WPF C#實現動畫(速度、啟停、緩動、線性漸變)

該Demo使用是純C#編寫（不建議使用XAML做動畫效果，內存開銷不可控且不便操作）
效果：速度、啟動、暫停、緩動效果、線性漸變

代碼如下

using System;
using System.Text.RegularExpressions;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MyWPF
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {

        Storyboard sb;//故事板
        Rectangle myRectangle;//故事板主角控件對象
        string rectName = "MyRectangle";//故事板主角控件名
        public MainWindow()
        {
            InitializeComponent();
            this.Loaded += (s,e)=>InitData();
        }

        //初始化數據
        private void InitData()
        {
            sb = new Storyboard();
            myRectangle = new Rectangle()
            {
                Fill = Brushes.Red,
                Height = 200,
                Width = 200,
                HorizontalAlignment = HorizontalAlignment.Left
            };
            myRectangle.Name = rectName;
            this.RegisterName(myRectangle.Name, myRectangle);//使用C#插入控件時要注冊控件名
            ui_Grid.Children.Add(myRectangle);

        }

        //啟動動畫
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            //故事板動畫Clear（等待GC),也可以手動設置為Null
            sb.Children.Clear();
            //邊距位移動畫
            var marginAnim = new ThicknessAnimation
            {
                From = new Thickness(0, 0, 0, 0),
                To = new Thickness(this.ActualWidth - 200, 0, 0, 0),
                RepeatBehavior = RepeatBehavior.Forever,
                EasingFunction = new BounceEase()
                {
                    Bounces = 0,//反彈次數
                    EasingMode = EasingMode.EaseInOut,//緩動函數In Out
                    Bounciness = 0//反彈大小
                }
            };
            //線性漸變動畫
            var colorAnim = new ColorAnimation
            {
                From = Colors.Red,
                To = Colors.Blue,
                RepeatBehavior = RepeatBehavior.Forever//重復播放
            };
            //設置故事板動畫目標屬性
            Storyboard.SetTargetProperty(marginAnim, new PropertyPath(MarginProperty));
            Storyboard.SetTargetProperty(colorAnim, new PropertyPath("(Fill).(SolidColorBrush.Color)"));
            //將配置完畢的動畫插入到故事板
            sb.Children.Add(marginAnim);
            sb.Children.Add(colorAnim);
            if (!Regex.IsMatch(ui_Speed.Text, @"^[+-]?\d*[.]?\d*$"))
                return;
            //故事板運行速度
            sb.SpeedRatio = Convert.ToDouble(ui_Speed.Text);
            //故事板啟動
            sb.Begin(myRectangle, true);
        }
        //停止動畫
        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            //故事板停止
            sb.Stop(myRectangle);
        }
    }
}

可能有同學會問new PropertyPath("(Fill).(SolidColorBrush.Color)")為什么要這樣寫,因為Fill依賴屬性本身是Brushes類型。

MSDN上是這樣說的：

例如，面板的Background屬性是來自主題模板的完整畫筆（實際上是SolidColorBrush ）。要完全為Brush設置動畫，需要有一個 BrushAnimation（可能每個Brush類型都有一個），並且沒有這樣的類型。要為畫筆設置動畫，您可以為特定畫筆類型的屬性設置動畫。您需要從SolidColorBrush到它的Color才能在其中應用ColorAnimation。此示例的屬性路徑為.Background.Color

For instance, the Background property of a Panel is a complete Brush (actually a SolidColorBrush) that came from a theme template. To animate a Brush completely, there would need to be a BrushAnimation (probably one for every Brush type) and there is no such type. To animate a Brush, you instead animate properties of a particular Brush type. You need to get from SolidColorBrush to its Color to apply a ColorAnimation there. The property path for this example would be Background.Color.

關於PropertyPath XAML語法請看：https://docs.microsoft.com/en-us/dotnet/desktop/wpf/advanced/propertypath-xaml-syntax?view=netframeworkdesktop-4.8

關於更多故事板Storyboard資料請看：https://docs.microsoft.com/en-us/dotnet/desktop/wpf/graphics-multimedia/storyboards-overview?view=netframeworkdesktop-4.8