排行榜0.0.1

Wpf_AiSportsMicrospace/Dto/GroupJumpRopeContext.cs

@@ -1,6 +1,9 @@
 using System;
 using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
 using System.Drawing;
+using System.Runtime.CompilerServices;
 using System.Text;
 using Wpf_AiSportsMicrospace.MyUserControl;
 using Yztob.AiSports.Postures.Sports;
@@ -10,7 +13,7 @@ namespace Dto
     public class GroupJumpRopeContext
     {
         // 静态字段，保存排名列表
-        public static List<RankItem> RankList { get; set; } = new List<RankItem>();
+        //public static List<RankItem> RankList { get; set; } = new List<RankItem>();
         public List<(double XNorm, double YNorm)> CirclePositions { get; private set; }
         public List<SportUserItem> UserList { get; private set; }
         public List<string> UserNumberList { get; private set; }
@@ -38,9 +41,9 @@ namespace Dto
         }
 
         // 更新排行榜方法
-        public void UpdateRankList()
+        public List<RankItem> UpdateRankList()
         {
-            RankList = UserNumberList
+            var rankList = UserNumberList
                  .Select((numStr, index) => new
                  {
                      Index = index,
@@ -55,6 +58,8 @@ namespace Dto
                      Number = x.Number
                  })
                  .ToList();
+
+            return rankList;
         }
     }
 
@@ -65,4 +70,5 @@ namespace Dto
         public string Name { get; set; }
         public int Number { get; set; }
     }
+
 }

Wpf_AiSportsMicrospace/Views/Home.xaml.cs

@@ -106,6 +106,8 @@ namespace Wpf_AiSportsMicrospace
             // 停止抽帧线程/释放资源
             try
             {
+                //_mainWin.HumanFrameUpdated -= OnHumanFrameUpdated;
+                //_mainWin.WebcamClient.StopExtract();
                 RouterGoNew();
             }
             catch (Exception ex)
@@ -128,12 +130,12 @@ namespace Wpf_AiSportsMicrospace
             if (coverFlow.SelectedIndex == 0)
             {
                 var newPage = new GroupJumpRope();
-                mainWin?.SwitchPage(newPage, true);
+                mainWin?.SwitchPageWithMaskAnimation(newPage, true);
             }
             else
             {
                 var newPage = new MusicJumpRope();
-                mainWin?.SwitchPage(newPage, true);
+                mainWin?.SwitchPageWithMaskAnimation(newPage, true);
             }
         }
 
@@ -147,12 +149,12 @@ namespace Wpf_AiSportsMicrospace
             if (coverFlow.SelectedIndex == 0)
             {
                 var newPage = new GroupJumpRope();
-                mainWin?.SwitchPage(newPage, true);
+                mainWin?.SwitchPageWithMaskAnimation(newPage, true);
             }
             else
             {
                 var newPage = new MusicJumpRope();
-                mainWin?.SwitchPage(newPage, true);
+                mainWin?.SwitchPageWithMaskAnimation(newPage, true);
             }
         }
     }

Wpf_AiSportsMicrospace/Views/JumpRope/GroupJumpRope.xaml

@@ -32,5 +32,111 @@
                    TextAlignment="Center"
                    />
         </Grid>
+
+        <!--排行榜-->
+        <Grid  x:Name="RankingGrid" Margin="0,0,0,0"  Height="1080" Width="1920" Visibility="Hidden">
+            <Image 
+                   Source="/Resources/Img/test_img/one_rope/finish_img/finish_bg.png"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Top"
+                   Width="1920"
+                   Height="1080"
+                   />
+            <Image 
+               Source="/Resources/Img/test_img/one_rope/finish_img/1.png"
+               HorizontalAlignment="Center"
+               VerticalAlignment="Top"
+               Width="120"
+                Height="92"
+                Margin="0,85"
+               />
+            <Image 
+               Source="/Resources/Img/test_img/one_rope/finish_img/2.png"
+               HorizontalAlignment="Left"
+               VerticalAlignment="Top"
+               Width="120"
+               Height="92"
+               Margin="451,134,0,0"
+               />
+            <Image 
+               Source="/Resources/Img/test_img/one_rope/finish_img/3.png"
+               HorizontalAlignment="Right"
+               VerticalAlignment="Top"
+               Width="120"
+                Height="92"
+                Margin="0,149,451,0"
+               />
+            <Image 
+               Source="/Resources/Img/test_img/one_rope/finish_img/top.png"
+               HorizontalAlignment="Center"
+               VerticalAlignment="Top"
+               Width="1346"
+                Height="163"
+                Margin="0,168"
+               />
+
+            <Grid Width="1346" Height="547"  HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,331,0,0" x:Name="ScoreGrid">
+                <Border Background="#FEDE50" CornerRadius="0,0,20,20"/>
+                <Grid HorizontalAlignment="Center" VerticalAlignment="Top" Width="1344" Height="71">
+                    <Border Background="#f7f7f7"/>
+                    <TextBlock Text="排名" FontSize="24" FontWeight="Bold" Foreground="#999999" Margin="150 , 0" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center" Width="200"/>
+                    <TextBlock Text="位置" FontSize="24" FontWeight="Bold" Foreground="#999999"  HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                    <TextBlock Text="成绩" FontSize="24" FontWeight="Bold" Foreground="#999999" Margin="0 ,0,150, 0" HorizontalAlignment="Right" VerticalAlignment="Center" TextAlignment="Center" Width="200"/>
+                </Grid>
+
+                <!--<Grid HorizontalAlignment="Center"  Margin="0,57"  VerticalAlignment="Top" Width="1344" Height="71">
+                    <Border Background="#fff"/>
+                    <TextBlock Text="1" FontSize="24" FontWeight="Bold" Foreground="#999999" Margin="150 , 0" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Center" Width="200"/>
+                    <TextBlock Text="一号位" FontSize="24" FontWeight="Bold" Foreground="#999999"  HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                    <TextBlock Text="100" FontSize="24" FontWeight="Bold" Foreground="#999999" Margin="0 ,0,150, 0" HorizontalAlignment="Right" VerticalAlignment="Center" TextAlignment="Center" Width="200"/>
+                </Grid>-->
+
+            </Grid>
+            <Grid Width="368" Height="100" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,200,0,0">
+                <TextBlock x:Name="name1" Text="一号位" FontSize="32" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" />
+                <Grid HorizontalAlignment="Right">
+                    <Border Background="#e54229" CornerRadius="20" Width="110" Height="40"/>
+                    <Image 
+                       Source="/Resources/Img/test_img/one_rope/finish_img/star.png"
+                       HorizontalAlignment="Center"
+                       VerticalAlignment="Center"
+                       Width="22"
+                       Height="30"
+                       Margin="0,0,50,2"
+                       />
+                    <TextBlock x:Name="number1" Text="999" FontSize="24" FontWeight="Bold" Foreground="#fff" HorizontalAlignment="Left" Margin="50,0,0,0" VerticalAlignment="Center" />
+                </Grid>
+            </Grid>
+            <Grid Width="369" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1225,231,0,0">
+                <TextBlock x:Name="name3" Text="三号位" FontSize="32" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" />
+                <Grid HorizontalAlignment="Right">
+                    <Border Background="#e54229" CornerRadius="20" Width="110" Height="40"/>
+                    <Image 
+                       Source="/Resources/Img/test_img/one_rope/finish_img/star.png"
+                       HorizontalAlignment="Center"
+                       VerticalAlignment="Center"
+                       Width="22"
+                       Height="30"
+                       Margin="0,0,50,2"
+                       />
+                    <TextBlock x:Name="number3" Text="999" FontSize="24" FontWeight="Bold" Foreground="#fff" HorizontalAlignment="Left" Margin="50,0,0,0" VerticalAlignment="Center" />
+                </Grid>
+            </Grid>
+            <Grid Width="368" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="310,226,0,0">
+                <TextBlock x:Name="name2" Text="二号位" FontSize="32" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" />
+                <Grid HorizontalAlignment="Right">
+                    <Border Background="#e54229" CornerRadius="20" Width="110" Height="40"/>
+                    <Image 
+                       Source="/Resources/Img/test_img/one_rope/finish_img/star.png"
+                       HorizontalAlignment="Center"
+                       VerticalAlignment="Center"
+                       Width="22"
+                       Height="30"
+                       Margin="0,0,50,2"
+                       />
+                    <TextBlock x:Name="number2" Text="999" FontSize="24" FontWeight="Bold" Foreground="#fff" HorizontalAlignment="Left" Margin="50,0,0,0" VerticalAlignment="Center" />
+                </Grid>
+            </Grid>
+        </Grid>
     </Grid>
 </UserControl>

Wpf_AiSportsMicrospace/Views/JumpRope/GroupJumpRope.xaml.cs

@@ -5,9 +5,12 @@ using SharpDX.Direct3D9;
 using System;
 using System.Collections.Concurrent;
 using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
 using System.Globalization;
 using System.IO;
 using System.Linq;
+using System.Runtime.CompilerServices;
 using System.Text;
 using System.Threading.Tasks;
 using System.Windows;
@@ -44,6 +47,13 @@ namespace Wpf_AiSportsMicrospace.Views
     {
         private Main _mainWin => Application.Current.MainWindow as Main;
         private MediaPlayer _mediaPlayer = new MediaPlayer();
+        List<RankItem> RankingItemList = new();
+
+        public event PropertyChangedEventHandler PropertyChanged;
+        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+        }
         private bool IsGameStarted = false;
         private readonly object _updateLock = new object();
         private readonly Dictionary<int, (string lastNumber, DateTime lastChangeTime, string currentState)> _jumpStatus = new Dictionary<int, (string, DateTime, string)>();
@@ -88,7 +98,7 @@ namespace Wpf_AiSportsMicrospace.Views
 
             // 监听播放完成事件
             _mediaPlayer.MediaEnded += MediaPlayer_MediaEnded;
-
+            //_mainWin.WebcamClient.StartExtract();
             _mediaPlayer.Play();
         }
         private void ShowCenterTip(string imagePath, TimeSpan duration)
@@ -261,8 +271,8 @@ namespace Wpf_AiSportsMicrospace.Views
                 x.ImageState = "1";
             });
 
-            _groupJumpRopeContext.UpdateRankList();
+            RankingItemList = _groupJumpRopeContext.UpdateRankList();
-
+            ShowRankingBoard(RankingItemList);
             IsGameStarted = false;
             Utils.StopBackgroundMusic();
         }
@@ -507,5 +517,87 @@ namespace Wpf_AiSportsMicrospace.Views
             _groupJumpRopeContext.UserNumberList.Add("0");
             return userItem; //
         }
+
+        public void ShowRankingBoard(List<RankItem> list)
+        {
+            var scoreGrid = FindName("ScoreGrid") as Grid;
+            name1.Text = list[0].Name;
+            name2.Text = list[1].Name;
+            name3.Text = list[2].Name;
+            number1.Text = list[0].Number.ToString();
+            number2.Text = list[1].Number.ToString();
+            number3.Text = list[2].Number.ToString();
+            foreach (var item in list)
+            {
+                var grid = new Grid {
+                    Width = 1344,
+                    Height = 71,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Top,
+                    Margin = new Thickness(0, 57 * item.Rank, 0, 0)
+                };
+                var border = new Border
+                {
+                    Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#fff"))
+                };
+                grid.Children.Add(border);
+                var rankText = new TextBlock
+                {
+                    Text = item.Rank.ToString(),
+                    FontSize = 24,
+                    FontWeight = FontWeights.Bold,
+                    Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#999999")),
+                    HorizontalAlignment = HorizontalAlignment.Left,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    TextAlignment= TextAlignment.Center,
+                    Width=200
+                };
+                grid.Children.Add(rankText);
+
+                var positionText = new TextBlock
+                {
+                    Text = item.Name,
+                    FontSize = 24,
+                    FontWeight = FontWeights.Bold,
+                    Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#999999")),
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center
+                };
+                grid.Children.Add(positionText);
+
+                var scoreText = new TextBlock
+                {
+                    Text = item.Number.ToString(),
+                    FontSize = 24,
+                    FontWeight = FontWeights.Bold,
+                    Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#999999")),
+                    HorizontalAlignment = HorizontalAlignment.Right,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    TextAlignment = TextAlignment.Center,
+                    Width = 200
+                };
+                grid.Children.Add(scoreText);
+                ScoreGrid.Children.Add(grid);
+            }
+
+            var rankingGrid = FindName("RankingGrid") as Grid;
+            if (rankingGrid == null) return;
+
+            rankingGrid.Visibility = Visibility.Visible;
+            var fadeIn = new DoubleAnimation(0, 1, TimeSpan.FromMilliseconds(600));
+            rankingGrid.BeginAnimation(UIElement.OpacityProperty, fadeIn);
+        }
+
+        // 控制排行榜隐藏（渐隐动画）
+        public void HideRankingBoard()
+        {
+            var rankingGrid = FindName("RankingGrid") as Grid;
+            if (rankingGrid == null) return;
+
+            var fadeOut = new DoubleAnimation(1, 0, TimeSpan.FromMilliseconds(600));
+            fadeOut.Completed += (s, e) => rankingGrid.Visibility = Visibility.Collapsed;
+            rankingGrid.BeginAnimation(UIElement.OpacityProperty, fadeOut);
+        }
+
     }
 }

Wpf_AiSportsMicrospace/Views/Main.xaml.cs

@@ -261,6 +261,89 @@ namespace Wpf_AiSportsMicrospace.Views
             newPage.BeginAnimation(OpacityProperty, fadeAnim);
         }
 
+         public void SwitchPageWithMaskAnimation(UserControl newPage, bool fromRight, double durationSeconds = 1.2)
+        {
+            if (MainContent.Content == newPage) return;
 
+            var oldPage = MainContent.Content as UserControl;
+            PreloadPageResources(newPage);
+
+            // 每次都创建新的 Image 实例
+            var maskTop = new Image
+            {
+                Source = new BitmapImage(new Uri("/Resources/Img/gif/top_animation_image.png", UriKind.Relative)),
+                Stretch = Stretch.Fill,
+                HorizontalAlignment = HorizontalAlignment.Stretch,
+                VerticalAlignment = VerticalAlignment.Top,
+                Width = 1920,
+                Height = 1000
+            };
+            var maskBottom = new Image
+            {
+                Source = new BitmapImage(new Uri("/Resources/Img/gif/bottom_animation_image.png", UriKind.Relative)),
+                Stretch = Stretch.Fill,
+                HorizontalAlignment = HorizontalAlignment.Stretch,
+                VerticalAlignment = VerticalAlignment.Bottom,
+                Width = 1920,
+                Height = 1000
+            };
+
+            var maskGrid = new Grid { Background = Brushes.Transparent, Width = 1920, Height = 1080 };
+            maskGrid.Children.Add(maskTop);
+            maskGrid.Children.Add(maskBottom);
+
+            if (MainContent.Parent is Grid parentGrid)
+            {
+                parentGrid.Children.Add(maskGrid);
+                Grid.SetZIndex(maskGrid, 9999);
+            }
+            else
+            {
+                var win = Window.GetWindow(this);
+                if (win != null && win.Content is Grid winGrid)
+                {
+                    winGrid.Children.Add(maskGrid);
+                    Grid.SetZIndex(maskGrid, 9999);
+                }
+            }
+
+            double height = ActualHeight;
+            double maskHeight = 1000;
+            //double maskHeight = height / 2 - 150;
+
+            //maskTop.Height = maskHeight;
+            //maskBottom.Height = maskHeight;  
+
+            maskTop.RenderTransform = new TranslateTransform(0, -maskHeight);
+            maskBottom.RenderTransform = new TranslateTransform(0, maskHeight);
+
+            var duration = TimeSpan.FromSeconds(durationSeconds);
+            var ease = new CubicEase { EasingMode = EasingMode.EaseInOut };
+
+            var topInAnim = new DoubleAnimation(-maskHeight, 0, duration) { EasingFunction = ease };
+            var bottomInAnim = new DoubleAnimation(maskHeight, 0, duration) { EasingFunction = ease };
+            //var topOutAnim = new DoubleAnimation(0, maskHeight, duration) { EasingFunction = ease };
+            //var bottomOutAnim = new DoubleAnimation(0, -maskHeight, duration) { EasingFunction = ease };
+            var bottomOutAnim = new DoubleAnimation(0, maskHeight, duration) { EasingFunction = ease };
+            var topOutAnim = new DoubleAnimation(0, -maskHeight, duration) { EasingFunction = ease };
+
+            topInAnim.Completed += (s, e) =>
+            {
+                MainContent.Content = newPage;
+                maskTop.RenderTransform.BeginAnimation(TranslateTransform.YProperty, topOutAnim);
+                maskBottom.RenderTransform.BeginAnimation(TranslateTransform.YProperty, bottomOutAnim);
+            };
+
+            topOutAnim.Completed += (s, e) =>
+            {
+                if (maskGrid.Parent is Grid grid)
+                    grid.Children.Remove(maskGrid);
+                if (oldPage is IDisposable disposable)
+                    disposable.Dispose();
+            };
+
+            maskTop.RenderTransform.BeginAnimation(TranslateTransform.YProperty, topInAnim);
+            maskBottom.RenderTransform.BeginAnimation(TranslateTransform.YProperty, bottomInAnim);
+        }
     }
 }

Wpf_AiSportsMicrospace/Wpf_AiSportsMicrospace.csproj

@@ -39,11 +39,19 @@
     <None Remove="Resources\Img\gif\1.gif" />
     <None Remove="Resources\Img\gif\2.gif" />
     <None Remove="Resources\Img\gif\3.gif" />
+    <None Remove="Resources\Img\gif\bottom_animation_image.png" />
+    <None Remove="Resources\Img\gif\top_animation_image.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" />
     <None Remove="Resources\Img\play_img\play_music.png" />
     <None Remove="Resources\Img\play_img\play_vs.png" />
+    <None Remove="Resources\Img\test_img\one_rope\finish_img\1.png" />
+    <None Remove="Resources\Img\test_img\one_rope\finish_img\2.png" />
+    <None Remove="Resources\Img\test_img\one_rope\finish_img\3.png" />
+    <None Remove="Resources\Img\test_img\one_rope\finish_img\finish_bg.png" />
+    <None Remove="Resources\Img\test_img\one_rope\finish_img\star.png" />
+    <None Remove="Resources\Img\test_img\one_rope\finish_img\top.png" />
     <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" />
@@ -196,6 +204,12 @@
     <Resource Include="Resources\Img\gif\3.gif">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
+    <Resource Include="Resources\Img\gif\bottom_animation_image.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\gif\top_animation_image.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
     <Resource Include="Resources\Img\play_img\play_home_bg.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
@@ -211,6 +225,24 @@
     <Resource Include="Resources\Img\play_img\play_vs.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\finish_img\1.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\finish_img\2.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\finish_img\3.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\finish_img\finish_bg.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\finish_img\star.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\finish_img\top.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
     <Resource Include="Resources\Img\test_img\one_rope\jump_rope.gif">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>