update：music jump

Wpf_AiSportsMicrospace/MyUserControl/PopSilder.xaml

@@ -12,15 +12,14 @@
         <Grid x:Name="great" Visibility="Hidden" HorizontalAlignment="Left" Height="172" Width="221" VerticalAlignment="Bottom" Margin="-110,0,0,0"  >
             <Image  Source="/Resources/Img/play_img/music_rope/great.png"  HorizontalAlignment="Right" Width="90"  VerticalAlignment="Top" Margin="0,0,0,0"/>
             <Image Source="/Resources/Img/play_img/music_rope/great-p.png"   Width="145" Height="141" VerticalAlignment="Bottom" />
-
         </Grid>
         <Image x:Name="miss" Source="/Resources/Img/play_img/music_rope/miss.png" Visibility="Hidden" HorizontalAlignment="Left" Width="157" Height="85" VerticalAlignment="Bottom" Margin="0,0,0,86"/>
 
-        <Image x:Name="head_g" Source="/Resources/Img/play_img/music_rope/head_g.png" Visibility="Hidden" HorizontalAlignment="Right" Width="152" Height="85" VerticalAlignment="Top" Margin="0,0,0,0"/>
+        <Image x:Name="head_g" Source="/Resources/Img/play_img/music_rope/head_g.png" Visibility="Visible" HorizontalAlignment="Right" Width="152" Height="85" VerticalAlignment="Top" Margin="0,0,0,0"/>
         <Image x:Name="head_m" Source="/Resources/Img/play_img/music_rope/head_m.png" Visibility="Hidden" HorizontalAlignment="Right" Width="152" Height="85" VerticalAlignment="Top" Margin="0,0,0,0"/>
         <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-            <Grid Width="3" Height="140"  Background="#fedd40" ClipToBounds="False" Margin="0,620,0,0"></Grid>
+            <Grid Width="3" Height="140"  Background="#fedd40" ClipToBounds="False" Margin="0,500,0,0"></Grid>
-            <Grid Width="580" Height="87"  Background="#25ffffff" ClipToBounds="False" Margin="0,620,0,0" HorizontalAlignment="Left">
+            <Grid Width="580" Height="87"  Background="#25ffffff" ClipToBounds="False" Margin="0,500,0,0" HorizontalAlignment="Left">
                 <Border BorderBrush="#25ffffff" 
                     BorderThickness="3" 
                     CornerRadius="5"

Wpf_AiSportsMicrospace/MyUserControl/PopSilder.xaml.cs

@@ -171,7 +171,8 @@ namespace Wpf_AiSportsMicrospace.MyUserControl
                 var hideTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(200) };
                 hideTimer.Tick += (s, e) =>
                 {
-                    //head_m.Visibility = Visibility.Hidden;
+                    head_m.Visibility = Visibility.Hidden;
+                    miss.Visibility = Visibility.Hidden;
                     //_isMiss = true;
                     hideTimer.Stop();
                 };

Wpf_AiSportsMicrospace/MyUserControl/WxProgressBar.xaml

@@ -4,10 +4,10 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              x:Name="root"
-             Width="1206">
+             >
     <Grid>
         <Image x:Name="MiddleLine" HorizontalAlignment="Left" Source="/Resources/Img/Album/vs.png" Width="60"  Height="110" Panel.ZIndex="100" Margin="580,0,0,0"/>
-        <Grid Height="55" >
+        <Grid Height="55" Width="1206">
             <Border BorderBrush="#ffffff" BorderThickness="3" CornerRadius="5" Padding="0" Margin="0">
                 <Grid >
                     <Border  BorderBrush="#e0585b" BorderThickness="2" CornerRadius="2" Background="#e0585b"></Border>

Wpf_AiSportsMicrospace/Views/JumpRope/MusicJumpRope.xaml

@@ -5,6 +5,7 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:Wpf_AiSportsMicrospace.MyUserControl"
              mc:Ignorable="d" 
+             xmlns:gif="http://wpfanimatedgif.codeplex.com"
              Height="1080" Width="1920" Loaded="UserControl_Loaded" Unloaded="UserControl_Unloaded">
     <Grid>
         <Grid.Background>
@@ -15,15 +16,16 @@
               HorizontalAlignment="Center"
               VerticalAlignment="Top"
               Width="905"
-              Margin="0,70,0,0"
+              Margin="0,50,0,0"
               MouseDown="Image_MouseDown"
               />
         <Grid Height="1080" Width="1920" x:Name="userBox">
             <Canvas x:Name="beatCanvas" />
         </Grid>
 
-        <Grid Width="260" Height="130" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="00,40,60,0" Visibility="Visible" x:Name="countdownGrid">
+        <!--倒计时-->
-            <Border Background="#9e4ff9" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" CornerRadius="30"  />
+        <Grid Width="260" Height="130" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="00,830,00,0" Visibility="Visible" x:Name="countdownGrid">
+            <Border Background="#9e4ff9" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Opacity="0.5" CornerRadius="30"  />
             <TextBlock x:Name="countdownText"
                   Text="100"
                   FontSize="120"
@@ -36,27 +38,57 @@
                   TextAlignment="Center"
                   />
         </Grid>
-        <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,100,0,0">
+
+        <!--进度条-->
+        <Grid VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,155,0,0">
+            <TextBlock x:Name="score1" Text="0" FontSize="70" FontWeight="UltraBold" FontStyle="Italic"  Foreground="#fff" Margin="-220,15" TextAlignment="Center" HorizontalAlignment="Left" Width="200" />
+            <TextBlock x:Name="score2" Text="0" FontSize="70" FontWeight="UltraBold" FontStyle="Italic"  Foreground="#fff" Margin="-220,15" TextAlignment="Center" HorizontalAlignment="Right" Width="200" />
             <local:WxProgressBar x:Name="PkBar"/>
-        </StackPanel>
-
-    <!--<Grid Width="3" Height="140" Margin="00,600,580,0" Background="#fedd40" ClipToBounds="False"></Grid>
-        <Grid Width="580" Height="87" Margin="00,600,0,0" Background="#25ffffff" ClipToBounds="False">
-            
-            <Grid Width="564" Height="72" >
-                <Border BorderThickness="3" BorderBrush="#25ffffff">
-                </Border>
-                
-                --><!--动画区域--><!--
-                <StackPanel x:Name="ani" VerticalAlignment="Center" Orientation="Horizontal">
-                    <StackPanel Orientation="Horizontal">
-                        <Image Source="/Resources/Img/play_img/music_rope/point.png" Width="50" Height="50" HorizontalAlignment="Left" Margin="0,0,0,0"/>
-                        <Grid Width="60" Height="5" Background="#000"></Grid>
-                    </StackPanel>
-                </StackPanel>
         </Grid>
-        </Grid>-->
+
-        <local:PopSilder x:Name="popSilder1" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="154,0,0,100"/>
+
-        <local:PopSilder x:Name="popSilder2" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,154,100"/>
+        <Image 
+          Source="/Resources/Img/play_img/music_rope/vs.png"
+          HorizontalAlignment="Center"
+          Width="242"
+          Margin="0,0,0,0"
+          />
+
+        <!--滚动条-->
+        <local:PopSilder x:Name="popSilder1" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="154,0,0,60"/>
+        <local:PopSilder x:Name="popSilder2" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,154,60"/>
+
+        <!--人物-->
+        <Grid>
+            <Image x:Name="left1" Visibility="Visible" Source="/Resources/Img/play_img/music_rope/jump_u.png" HorizontalAlignment="Left" VerticalAlignment="Top" Width="420" Margin="226,345,0,0" />
+            <Image x:Name="left3"  Visibility="Hidden" Source="/Resources/Img/play_img/music_rope/out_u.png" HorizontalAlignment="Left" VerticalAlignment="Top" Width="420" Margin="226,345,0,0" />
+            <Image 
+                gif:ImageBehavior.AnimatedSource="/Resources/Img/play_img/music_rope/jump_u.gif"
+                gif:ImageBehavior.RepeatBehavior="Forever"
+                gif:ImageBehavior.AnimateInDesignMode="True"
+                HorizontalAlignment="Left"
+                VerticalAlignment="Top"
+                Width="420"
+                Margin="226,345,0,0"
+                x:Name="left2"
+                Visibility="Hidden"
+               />
+        </Grid>
+
+        <Grid>
+            <Image x:Name="right1" Visibility="Visible" Source="/Resources/Img/play_img/music_rope/jump_u.png" HorizontalAlignment="Right" VerticalAlignment="Top" Width="420" Margin="0,345,226,0" />
+            <Image x:Name="right3"  Visibility="Hidden" Source="/Resources/Img/play_img/music_rope/out_u.png" HorizontalAlignment="Right" VerticalAlignment="Top" Width="420" Margin="0,345,226,0" />
+            <Image 
+                gif:ImageBehavior.AnimatedSource="/Resources/Img/play_img/music_rope/jump_u.gif"
+                gif:ImageBehavior.RepeatBehavior="Forever"
+                gif:ImageBehavior.AnimateInDesignMode="True"
+                HorizontalAlignment="Right"
+                VerticalAlignment="Top"
+                Width="420"
+                Margin="0,345,226,0"
+                x:Name="right2"
+                Visibility="Hidden"
+               />
+        </Grid>
     </Grid>
 </UserControl>

Wpf_AiSportsMicrospace/Views/JumpRope/MusicJumpRope.xaml.cs

@@ -62,7 +62,7 @@ namespace Wpf_AiSportsMicrospace.Views.JumpRope
             DrawCirclesWithText();
             // 播放音乐
             PlayMusic("raisehand.mp3");
-            PkBar.LeftProgress = 0.5;
+            PkBar.LeftProgress = 1;
 
             popSilder1.MusicBeats = _musicJumpRopeContext.MusicBeats["1"];
             popSilder2.MusicBeats = _musicJumpRopeContext.MusicBeats["1"];
@@ -219,12 +219,13 @@ namespace Wpf_AiSportsMicrospace.Views.JumpRope
 
         private int _currentCountdown = 3;
         private DateTime _lastUpdateTime = DateTime.Now;
-        private void StartCountdown(int start = 3)
+        private void StartCountdown(int start = 4)
         {
             _currentCountdown = start;
             countdownText.Text = _currentCountdown.ToString();
             countdownGrid.Visibility = Visibility.Visible;
             _lastUpdateTime = DateTime.Now;
+            _mainWin.ShowCountDownAnimation();
             Utils.PlayBackgroundMusic("countdown_3.mp3", false);
         }
 
@@ -461,22 +462,24 @@ namespace Wpf_AiSportsMicrospace.Views.JumpRope
                 double y = pos.YNorm * imgHeight;
 
                 // 绘制发光圆
-                var userItem = AddUserItem(x, y, i);
+                //var userItem = AddUserItem(x, y, i);
                 // 绑定运动对象
                 var sport = SportBase.Create("rope-skipping");
                 int indexCopy = i;
-                var currentItem = userItem;
+                //var currentItem = userItem;
 
                 // 订阅事件
                 sport.OnTicked += (count, times) =>
                 {
                     // 更新UI
-                    userItem.NumberText = count.ToString();
+                    //userItem.NumberText = count.ToString();
                     // 更新数字源
                     _musicJumpRopeContext.UserNumberList[indexCopy] = count.ToString();
 
-                    if (userItem.ImageState != "2")
+                    //if (userItem.ImageState != "2")
-                        userItem.ImageState = "2";
+                    //    userItem.ImageState = "2";
+                    ChangeImgState(indexCopy, "2"); //改变当前图的状态
+
 
                     var currentTime = Utils.GetMusicCurrentTime();
                     int currentSecond = (int)Math.Floor(currentTime);
@@ -488,32 +491,22 @@ namespace Wpf_AiSportsMicrospace.Views.JumpRope
                     {
                         _musicJumpRopeContext.UserBeatSyncList[indexCopy]++;
                         _musicBeatTextBlock[indexCopy].Text = $"卡点 x{_musicJumpRopeContext.UserBeatSyncList[indexCopy]}";
-                        if (indexCopy == 0)
-                        {
-                            popSilder1.IsMiss = false;
-                        }
-                        else
-                        {
-                            popSilder2.IsMiss = false;
-                        }
                         double left = _musicJumpRopeContext.UserBeatSyncList[0];
                         double right = _musicJumpRopeContext.UserBeatSyncList[1];
                         double total = left + right;
 
                         PkBar.LeftProgress = total == 0 ? 0 : Math.Round(left / total, 2);
+                        if (indexCopy == 0)
+                        {
+                            popSilder1.IsMiss = false;
+                            UpdateScore(left, score1);
+                        }
+                        else
+                        {
+                            UpdateScore(right,score2);
+                            popSilder2.IsMiss = false;
+                        }
                       
-                        //if (indexCopy == 0)
-                        //    LeftBeats.SetSelected(currentSecond, true);
-                        //else
-                        //    RightBeats.SetSelected(currentSecond, true);
-
-                        //Application.Current.Dispatcher.BeginInvoke(() =>
-                        //{
-                        //    if (indexCopy == 0)
-                        //        LeftBeats.SetSelected(currentSecond, true);
-                        //    else
-                        //        RightBeats.SetSelected(currentSecond, true);
-                        //});
                     }
                 };
 
@@ -522,6 +515,34 @@ namespace Wpf_AiSportsMicrospace.Views.JumpRope
             }
         }
 
+        private void UpdateScore(double to , TextBlock score)
+        {
+            DoubleAnimation animation = new DoubleAnimation
+            {
+                From = double.Parse(score1.Text),
+                To = to,
+                Duration = TimeSpan.FromSeconds(0.2),
+                EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseOut },
+                FillBehavior = FillBehavior.HoldEnd
+            };
+            score.BeginAnimation(TextBlock.TextProperty, animation);
+        }
+
+        private void ChangeImgState(int index , string state)
+        {
+            if(index== 0)
+            {
+                left1.Visibility = state == "1" ? Visibility.Visible : Visibility.Hidden;
+                left2.Visibility = state == "2" ? Visibility.Visible : Visibility.Hidden;
+                left3.Visibility = state == "3" ? Visibility.Visible : Visibility.Hidden;
+            }else if (index == 1)
+            {
+                right1.Visibility = state == "1" ? Visibility.Visible : Visibility.Hidden;
+                right2.Visibility = state == "1" ? Visibility.Visible : Visibility.Hidden;
+                right3.Visibility = state == "1" ? Visibility.Visible : Visibility.Hidden;
+            }
+        }
+
         private void UpdateCircleCounts(List<Human> humans)
         {
             double radiusNormX = 0.07;
@@ -564,7 +585,9 @@ namespace Wpf_AiSportsMicrospace.Views.JumpRope
                 bool hasHuman = humanInCircle != null;
                 lock (_updateLock)
                 {
-                    _musicJumpRopeContext.UserList[i].ImageState = GetJumpState(i, hasHuman);
+                    //_musicJumpRopeContext.UserList[i].ImageState = GetJumpState(i, hasHuman);
+                    var state = GetJumpState(i, hasHuman);
+                    ChangeImgState(i, state);
                 }
 
                 // 推送计数
@@ -608,46 +631,6 @@ namespace Wpf_AiSportsMicrospace.Views.JumpRope
             return lastState;
         }
 
-        private SportUserItem AddUserItem(double centerX, double centerY, int index)
-        {
-            var userItem = new SportUserItem();
-            userItem.Width = 270;
-            userItem.Height = 560;
-            userItem.DisplayText = _musicJumpRopeContext.UseNameList[index];
-            userItem.VerticalAlignment = VerticalAlignment.Top;
-            userItem.HorizontalAlignment = HorizontalAlignment.Left;
-            userItem.ImageState = "1";
-            userItem.Margin = new Thickness(centerX + 120, centerY - 700, 0, 0);
-
-            // ----------- 创建上方 TextBlock ------------
-            var textBlock = new TextBlock
-            {
-                Text = "0", // 卡点个数
-                FontSize = 50,
-                FontWeight = FontWeights.Bold,
-                Foreground = Brushes.Red,
-                HorizontalAlignment = HorizontalAlignment.Left,
-                VerticalAlignment = VerticalAlignment.Top,
-                TextAlignment = TextAlignment.Center,
-                Width = userItem.Width // 文本宽度和 userItem 一样
-            };
-
-            // 设置 TextBlock 的 Margin，使其在 userItem 上方居中
-            double textLeft = userItem.Margin.Left;
-            double textTop = userItem.Margin.Top - 50; // 50 可以根据需要调整高度
-            textBlock.Margin = new Thickness(textLeft, textTop, 0, 0);
-
-            // 添加控件
-            userBox.Children.Add(userItem);
-            userBox.Children.Add(textBlock);
-
-            _musicJumpRopeContext.UserList.Add(userItem);
-            _musicJumpRopeContext.UserNumberList.Add("0");
-            _musicJumpRopeContext.UserBeatSyncList.Add(0);
-            _musicBeatTextBlock.Add(textBlock);
-
-            return userItem;
-        }
 
         private void Image_MouseDown(object sender, MouseButtonEventArgs e)
         {

Wpf_AiSportsMicrospace/Wpf_AiSportsMicrospace.csproj

@@ -47,10 +47,14 @@
     <None Remove="Resources\Img\play_img\music_rope\great.png" />
     <None Remove="Resources\Img\play_img\music_rope\head_g.png" />
     <None Remove="Resources\Img\play_img\music_rope\head_m.png" />
+    <None Remove="Resources\Img\play_img\music_rope\jump_u.gif" />
+    <None Remove="Resources\Img\play_img\music_rope\jump_u.png" />
     <None Remove="Resources\Img\play_img\music_rope\miss.png" />
+    <None Remove="Resources\Img\play_img\music_rope\out_u.png" />
     <None Remove="Resources\Img\play_img\music_rope\play_bg.png" />
     <None Remove="Resources\Img\play_img\music_rope\point.png" />
     <None Remove="Resources\Img\play_img\music_rope\title.png" />
+    <None Remove="Resources\Img\play_img\music_rope\vs.png" />
     <None Remove="Resources\Img\play_img\play_home_bg.png" />
     <None Remove="Resources\Img\play_img\play_home_title.png" />
     <None Remove="Resources\Img\play_img\play_jump.png" />
@@ -65,8 +69,10 @@
     <None Remove="Resources\Img\test_img\one_rope\jump_rope.gif" />
     <None Remove="Resources\Img\test_img\one_rope\nopeople.png" />
     <None Remove="Resources\Img\test_img\one_rope\out_user.png" />
+    <None Remove="Resources\Img\test_img\one_rope\out_user1.png" />
     <None Remove="Resources\Img\test_img\one_rope\pre_people.png" />
     <None Remove="Resources\Img\test_img\one_rope\pre_user.png" />
+    <None Remove="Resources\Img\test_img\one_rope\pre_user1.png" />
     <None Remove="Resources\Img\test_img\one_rope\test_home_bg.png" />
     <None Remove="Resources\Img\test_img\one_rope\title.png" />
     <None Remove="Resources\Img\test_img\one_rope\top_bg.png" />
@@ -99,6 +105,12 @@
     <Resource Include="Resources\Img\play_img\music_rope\head_m.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
+    <Resource Include="Resources\Img\play_img\music_rope\jump_u.gif">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\play_img\music_rope\jump_u.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
     <Resource Include="Resources\Img\play_img\music_rope\miss.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
@@ -245,6 +257,9 @@
     <Resource Include="Resources\Img\gif\top_animation_image.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
+    <Resource Include="Resources\Img\play_img\music_rope\out_u.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
     <Resource Include="Resources\Img\play_img\music_rope\play_bg.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
@@ -254,6 +269,9 @@
     <Resource Include="Resources\Img\play_img\music_rope\title.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
+    <Resource Include="Resources\Img\play_img\music_rope\vs.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
     <Resource Include="Resources\Img\play_img\play_home_bg.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
@@ -296,12 +314,18 @@
     <Resource Include="Resources\Img\test_img\one_rope\out_user.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\out_user1.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
     <Resource Include="Resources\Img\test_img\one_rope\pre_people.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
     <Resource Include="Resources\Img\test_img\one_rope\pre_user.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\pre_user1.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
     <Resource Include="Resources\Img\test_img\one_rope\test_home_bg.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>