From 6ad299214483b4e4841f42451fe95f4b1a2bf287 Mon Sep 17 00:00:00 2001
From: real-zony <zony@myzony.com>
Date: Sun, 30 Jun 2024 21:58:41 +0800
Subject: [PATCH] feat: Added some UI animation effects.

---
 src/ZonyLrcTools.Desktop/App.axaml            |  3 +-
 .../Controls/DownloadStatusControl.axaml      | 92 +++++++++++++++++++
 .../Controls/DownloadStatusControl.axaml.cs   | 36 ++++++++
 src/ZonyLrcTools.Desktop/Pages/HomePage.axaml | 11 ++-
 4 files changed, 139 insertions(+), 3 deletions(-)
 create mode 100644 src/ZonyLrcTools.Desktop/Controls/DownloadStatusControl.axaml
 create mode 100644 src/ZonyLrcTools.Desktop/Controls/DownloadStatusControl.axaml.cs

diff --git a/src/ZonyLrcTools.Desktop/App.axaml b/src/ZonyLrcTools.Desktop/App.axaml
index 69ae1c4..75057c1 100644
--- a/src/ZonyLrcTools.Desktop/App.axaml
+++ b/src/ZonyLrcTools.Desktop/App.axaml
@@ -19,7 +19,7 @@
             <ic:SymbolIconSource x:Key="SettingsIcon" Symbol="Settings" />
             <ic:SymbolIconSource x:Key="DownloadIcon" Symbol="ArrowDownload" />
             <ic:SymbolIconSource x:Key="TagIcon" Symbol="Tag" />
-            
+
             <FontFamily x:Key="GlobalFontFamily">Microsoft YaHei, Simsun, Arial</FontFamily>
         </ResourceDictionary>
     </Application.Resources>
@@ -30,5 +30,6 @@
         <Style Selector="TextBlock">
             <Setter Property="FontFamily" Value="{StaticResource GlobalFontFamily}" />
         </Style>
+        <StyleInclude Source="/Controls/DownloadStatusControl.axaml" />
     </Application.Styles>
 </Application>
\ No newline at end of file
diff --git a/src/ZonyLrcTools.Desktop/Controls/DownloadStatusControl.axaml b/src/ZonyLrcTools.Desktop/Controls/DownloadStatusControl.axaml
new file mode 100644
index 0000000..bb93aea
--- /dev/null
+++ b/src/ZonyLrcTools.Desktop/Controls/DownloadStatusControl.axaml
@@ -0,0 +1,92 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:controls="using:ZonyLrcTools.Desktop.Controls"
+        xmlns:fluent="using:FluentIcons.Avalonia.Fluent">
+
+    <Design.PreviewWith>
+        <controls:DownloadStatusControl Status="Completed" />
+    </Design.PreviewWith>
+
+    <Style Selector="controls|DownloadStatusControl">
+        <!-- Set Defaults -->
+        <Setter Property="Template">
+            <ControlTemplate>
+                <StackPanel Orientation="Horizontal" Spacing="5">
+                    <Border Name="IconContainer" Width="20" Height="20">
+                        <fluent:SymbolIcon Name="StatusIcon" Symbol="{TemplateBinding Symbol}" />
+                    </Border>
+                    <TextBlock Text="{TemplateBinding Text}" VerticalAlignment="Center" />
+                </StackPanel>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+
+    <Style Selector="controls|DownloadStatusControl[Status=NotStarted]">
+        <Setter Property="Symbol" Value="QuestionCircle" />
+        <Setter Property="Text" Value="未下载" />
+    </Style>
+
+    <Style Selector="controls|DownloadStatusControl[Status=Completed]">
+        <Setter Property="Symbol" Value="CheckmarkCircle" />
+        <Setter Property="Text" Value="已完成" />
+    </Style>
+
+    <Style Selector="controls|DownloadStatusControl[Status=Failed]">
+        <Setter Property="Symbol" Value="DismissCircle" />
+        <Setter Property="Text" Value="失败" />
+    </Style>
+    
+    <Style Selector="controls|DownloadStatusControl[Status=Completed] /template/ Border#IconContainer">
+        <Style.Animations>
+            <Animation Duration="0:0:0.5">
+                <KeyFrame Cue="0%">
+                    <Setter Property="RotateTransform.Angle" Value="0"/>
+                    <Setter Property="ScaleTransform.ScaleX" Value="1"/>
+                    <Setter Property="ScaleTransform.ScaleY" Value="1"/>
+                </KeyFrame>
+                <KeyFrame Cue="50%">
+                    <Setter Property="RotateTransform.Angle" Value="180"/>
+                    <Setter Property="ScaleTransform.ScaleX" Value="1.2"/>
+                    <Setter Property="ScaleTransform.ScaleY" Value="1.2"/>
+                </KeyFrame>
+                <KeyFrame Cue="100%">
+                    <Setter Property="RotateTransform.Angle" Value="360"/>
+                    <Setter Property="ScaleTransform.ScaleX" Value="1"/>
+                    <Setter Property="ScaleTransform.ScaleY" Value="1"/>
+                </KeyFrame>
+            </Animation>
+        </Style.Animations>
+    </Style>
+    
+    <Style Selector="controls|DownloadStatusControl[Status=Failed] /template/ Border#IconContainer">
+        <Style.Animations>
+            <Animation Duration="0:0:0.5" IterationCount="3">
+                <KeyFrame Cue="0%">
+                    <Setter Property="TranslateTransform.X" Value="0"/>
+                </KeyFrame>
+                <KeyFrame Cue="25%">
+                    <Setter Property="TranslateTransform.X" Value="-2"/>
+                </KeyFrame>
+                <KeyFrame Cue="50%">
+                    <Setter Property="TranslateTransform.X" Value="0"/>
+                </KeyFrame>
+                <KeyFrame Cue="75%">
+                    <Setter Property="TranslateTransform.X" Value="2"/>
+                </KeyFrame>
+                <KeyFrame Cue="100%">
+                    <Setter Property="TranslateTransform.X" Value="0"/>
+                </KeyFrame>
+            </Animation>
+        </Style.Animations>
+    </Style>
+    
+    <Style Selector="controls|DownloadStatusControl /template/ Border#IconContainer">
+        <Setter Property="RenderTransform">
+            <TransformGroup>
+                <RotateTransform/>
+                <ScaleTransform/>
+                <TranslateTransform/>
+            </TransformGroup>
+        </Setter>
+    </Style>
+</Styles>
\ No newline at end of file
diff --git a/src/ZonyLrcTools.Desktop/Controls/DownloadStatusControl.axaml.cs b/src/ZonyLrcTools.Desktop/Controls/DownloadStatusControl.axaml.cs
new file mode 100644
index 0000000..aa4258e
--- /dev/null
+++ b/src/ZonyLrcTools.Desktop/Controls/DownloadStatusControl.axaml.cs
@@ -0,0 +1,36 @@
+using Avalonia;
+using Avalonia.Controls.Primitives;
+using FluentIcons.Common;
+using ZonyLrcTools.Desktop.ViewModels;
+
+namespace ZonyLrcTools.Desktop.Controls;
+
+public class DownloadStatusControl : TemplatedControl
+{
+    public static readonly StyledProperty<DownloadStatus> StatusProperty =
+        AvaloniaProperty.Register<DownloadStatusControl, DownloadStatus>(nameof(Status));
+
+    public static readonly StyledProperty<Symbol> SymbolProperty =
+        AvaloniaProperty.Register<DownloadStatusControl, Symbol>(nameof(Symbol));
+
+    public static readonly StyledProperty<string> TextProperty =
+        AvaloniaProperty.Register<DownloadStatusControl, string>(nameof(Text));
+
+    public DownloadStatus Status
+    {
+        get => GetValue(StatusProperty);
+        set => SetValue(StatusProperty, value);
+    }
+
+    public Symbol Symbol
+    {
+        get => GetValue(SymbolProperty);
+        set => SetValue(SymbolProperty, value);
+    }
+
+    public string Text
+    {
+        get => GetValue(TextProperty);
+        set => SetValue(TextProperty, value);
+    }
+}
\ No newline at end of file
diff --git a/src/ZonyLrcTools.Desktop/Pages/HomePage.axaml b/src/ZonyLrcTools.Desktop/Pages/HomePage.axaml
index 7a5f156..96d3b60 100644
--- a/src/ZonyLrcTools.Desktop/Pages/HomePage.axaml
+++ b/src/ZonyLrcTools.Desktop/Pages/HomePage.axaml
@@ -3,10 +3,11 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:viewModels="clr-namespace:ZonyLrcTools.Desktop.ViewModels"
+             xmlns:controls="clr-namespace:ZonyLrcTools.Desktop.Controls"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="ZonyLrcTools.Desktop.Pages.HomePage"
              x:DataType="viewModels:HomeViewModel">
-
+    
     <DockPanel>
         <StackPanel DockPanel.Dock="Bottom" Margin="10">
             <TextBlock Text="下载进度:" Margin="0,0,0,5" />
@@ -23,7 +24,13 @@
                 <DataGridTextColumn Header="歌曲名称" Binding="{Binding SongName}" Width="*" />
                 <DataGridTextColumn Header="歌手名称" Binding="{Binding ArtistName}" Width="*" />
                 <DataGridTextColumn Header="文件路径" Binding="{Binding FilePath}" Width="2*" />
-                <DataGridTextColumn Header="下载状态" Binding="{Binding DownloadStatus}" Width="1*" />
+                <DataGridTemplateColumn Header="下载状态" Width="1*">
+                    <DataGridTemplateColumn.CellTemplate>
+                        <DataTemplate>
+                            <controls:DownloadStatusControl Status="{Binding DownloadStatus}" />
+                        </DataTemplate>
+                    </DataGridTemplateColumn.CellTemplate>
+                </DataGridTemplateColumn>
             </DataGrid.Columns>
 
             <DataGrid.Styles>