基於C#WPF框架——動畫

WPF提供了一個更高級的模型，通過該模型可以只關註動畫的定義，而不必考慮它們的渲染方式。這個模型基於依賴項屬性基礎架構。本質上，WPF動畫只不過是在一段時間間隔內修染方式。這個模型基於依賴項屬性基礎架構。本質上，WPF動畫只不過是在一段時間間隔內修改依賴項屬性值的一種方式。

儘管目前WPF可為動畫使用三種方法(線性插值、關鍵幀以及路徑),但完全也可以創建更多的使用完全不同的方式來修改值的動畫類.唯一要求是自定義的動畫類必鬚根據時間修改值。
多的使用完全不同的方式來修改值的動畫類.唯一要求是自定義的動畫類必鬚根據時間修改值。

Animation 類

所有動畫類都以“類型名+Animation”方式命名。這種觀點很接近實際情況，但不是非常準確。

• 17個“類型名+Animation”類，這些類使用==插值==。
• 22 個“類型名+AnimationUsingKeyFrames"類,這些類使用==關鍵幀動畫==。

• 3個“類型名+AnimationUsingPath"類，這些類使用==基於路徑==的動畫。
  所有這些動畫類都繼承自抽象的“類型名+AnimationBase”類，這些基類實現了一些基本功能，從而為創建自定義動畫類提供了快捷方式。如果某個數據類型支持多種類型的動畫，那麼所有的動畫類都繼承自抽象的動畫基類。

  這42個類並不是System.Windows.Media.Animation名稱空間中的唯- -內容。每個關鍵幀動畫還使用自己的關鍵幀類和關鍵幀集合類,這兩部分類會導致一些混亂。 總之,在==System.Windows.Media.Animation==名稱空間中有100多個類。

這42個類開不是System. Windows.Media.Animation名稱空間中的唯一內 谷.每個關鍵幀動畫
還使用自己的關鍵幀類和關鍵幀集合類,這兩部分類會導致一些混亂。總之，在System.Windows.
Media.Animation名稱空間中有100多個類。

任何使用線性插值的動畫最少需要三個細節:
==開始值(From)==、==結束值(To)==和==整個動畫執行的時間(Duration)==。
即使不使用To屬性，也可以使用By屬性。By屬性用於創建按設置的數量改變值的動畫，而不是按給定目標改變值。
可結合使用By和From屬性，但這並不會減少任何工作. By值被簡單地增加到From值上，使其達到To值。
大部分使用插值的動畫類通常都提供了By屬性，但並非全部如此。例如，對於非數值數據類型來說，By 屬性是沒有意義的，比如ColorAnimation類使用的Color結構。
另有一種方法可得到類似的行為，而不需要使用By屬性一可通 過設置IsAdditive屬性創建增加數值的動畫。當創建這種動畫時，當前值被自動添加到From值和To值。

動畫的生命周期

單向動畫(如增長按鈕的動畫)在運行結束後會保持處於活動狀態，這是因為動畫需要將按鈕的寬度保持為新值。這會導致如下不常見的問題一如 果嘗試使用代碼在動畫完成後修改屬性值，代碼將不起作用。因為代碼只是為屬性指定了一個新的本地值，但仍會優先使用動畫之後的屬性值。
根據準備完成的工作，可通過如下幾種方法解決這個問題:
● 創建將元素 重新設置為原始狀態的動畫。可通過創建不設置To屬性的動畫達到該目的。
例如，將按鈕的寬度減小到最後設置的尺寸的按鈕縮小動畫，之後就可以使用代碼改變該屬性了。
●創建可翻轉的動畫。通過將AutoReverse屬性設置為true 來創建可翻轉的動畫。例如，當按鈕增-長動畫不再增加按鈕的寬度時，將反向播放動畫，返回到原始寬度。動畫的總持續時間也將翻倍。
●改變FillBehavior屬性。通常，FillBehavior 屬性被設置為HoldEnd,這意味著當動畫結束時，會繼續為目標元素應用最後的值。如果將FillBehavior 屬性改為Stop,只要動畫結束，屬性就會恢復為原來的值。
●當動畫完成時通過處理動畫對象的Completed事件刪除動畫對象。
前3種方法改變了動畫的行為。不管使用哪種方法，它們都將動畫後的屬性設置為原來的數值。如果這並非所希望的，那就需要使用最後-種方法。
首先，在啟動動畫前，關聯事件處理程式以響應動畫完成事件:
widthAnimation. Completed += animation_ Completed;
==註意:==
Completed事件是常規的.NET事件，使用常規的沒有附加信息的EventArgs 對象。該事件不是路由事件。

Timeline類

故事板

在所有聲明式動畫中都會用到如下兩個要素:
故事板: 故事板是BeginAnimation( )方法的XAML等價物。通過故事板將動畫指定到合適的元素和屬性。
事件觸發器: 事件觸發器響應屬性變化或事件(如按鈕的Click事件)，並控制故事板。例如，為了開始動畫，事件觸發器必須開始故事板。
小案例：

以上小案例為點單擊按鈕時，原形先向右移動到達To值後繼續向左移動，矩形向右下角移動，當到達To值後原路返迴向左上角移動，此動畫為重覆執行動畫

首先需要引入動畫類命名空間；

using System.Windows.Media.Animation;

創建故事板:

        Storyboard sto = new Storyboard(); // 故事板
        Storyboard stt = new Storyboard(); // 向下故事板

初始化圖形大小，位置:

            Border bod = new Border(); // 圓形
            bod.Width = 100;
            bod.Height = 100;
            bod.BorderThickness =new Thickness(10); // 設置原形邊框厚度
            bod.BorderBrush = Brushes.Yellow; // 邊框顏色
            bod.Background = Brushes.Purple; // 圓形背景色
            bod.CornerRadius = new CornerRadius(50); // 畫圓
            BG.Children.Add(bod);
            Border boo = new Border(); // 矩形
            boo.Width = 100;
            boo.Height = 100;
            boo.Background = Brushes.Cyan;
            Canvas.SetLeft(boo, 100);
            Canvas.SetTop(boo, 300);
            boo.CornerRadius = new CornerRadius(20);
            BG.Children.Add(boo);

動畫情節：

DoubleAnimation move = new DoubleAnimation(); // 移動情節
            move.From = 0; // 初始值
            move.To = 400; // 結束值
            move.Duration = new Duration(new TimeSpan(0, 0, 0, 3, 0)); // 需要的時間
            move.AutoReverse = true; // 設置成返回
            move.RepeatBehavior = RepeatBehavior.Forever; // 重覆執行
            Storyboard.SetTarget(move,bod); // 情節添加給對象
            //Storyboard.SetTargetProperty(move, new PropertyPath(Canvas.LeftProperty)); // 改變lef位置
            Storyboard.SetTargetProperty(move, new PropertyPath("(Canvas.Left)"));
            sto.Children.Add(move);

            ColorAnimation bianSe = new ColorAnimation(Colors.Purple,Colors.Orange,TimeSpan.FromMilliseconds(300)); // 改背景色情節
            Storyboard.SetTarget(bianSe, bod);
            Storyboard.SetTargetProperty(bianSe, new PropertyPath("(Border.Background).(SolidColorBrush.Color)"));
            sto.Children.Add(bianSe);

            ColorAnimation biankuSe = new ColorAnimation(Colors.Blue, Colors.DarkViolet,TimeSpan.FromSeconds(3));  // 改變邊框顏色
            Storyboard.SetTarget(biankuSe, bod);
            Storyboard.SetTargetProperty(biankuSe, new PropertyPath("(Border.BorderBrush).(SolidColorBrush.Color)"));
            sto.Children.Add(biankuSe);

            ThicknessAnimation kuang=new ThicknessAnimation(new Thickness(10),new Thickness(20),TimeSpan.FromMilliseconds(30));  // 改變邊框厚度
            Storyboard.SetTarget(kuang, bod);
            Storyboard.SetTargetProperty(kuang, new PropertyPath("BorderThickness"));
            sto.Children.Add(kuang);

            DoubleAnimation zhuan = new DoubleAnimation(0, 360, new Duration(TimeSpan.FromSeconds(3))); // 旋轉情節
            Storyboard.SetTarget(zhuan, bod);
            zhuan.AutoReverse = true;
            zhuan.RepeatBehavior = RepeatBehavior.Forever;
            Storyboard.SetTargetProperty(zhuan, new PropertyPath("RenderTransform.Angle"));
            sto.Children.Add(zhuan);
            RotateTransform xuanZhuan = new RotateTransform(); // 旋轉對象
            bod.RenderTransform = xuanZhuan;
            bod.RenderTransformOrigin = new Point(0.5,0.5);

            // 控制boo  向下移動並 旋轉
            DoubleAnimation yidong = new DoubleAnimation();// 移動右
            yidong.From = 0;
            yidong.To = 500;
            yidong.Duration = new Duration(TimeSpan.FromSeconds(3)); // 設置毫秒數
            yidong.AutoReverse = true; // 返回原路
            yidong.RepeatBehavior = RepeatBehavior.Forever; // 重覆執行
            Storyboard.SetTarget(yidong, boo);
            Storyboard.SetTargetProperty(yidong, new PropertyPath("(Canvas.Left)"));
            stt.Children.Add(yidong);
            DoubleAnimation yidong_ = new DoubleAnimation(Canvas.GetTop(boo),(Canvas.GetTop(boo)+400),new Duration(TimeSpan.FromSeconds(3))); // 移動下
            yidong_.AutoReverse = true;
            yidong_.RepeatBehavior = RepeatBehavior.Forever;
            Storyboard.SetTarget(yidong_, boo);
            Storyboard.SetTargetProperty(yidong_,new PropertyPath("(Canvas.Top)"));
            stt.Children.Add(yidong_);
            DoubleAnimation xiazhuan = new DoubleAnimation(0, 360, new Duration(TimeSpan.FromSeconds(3))); //旋轉情節
            Storyboard.SetTarget(xiazhuan, boo);
            xiazhuan.AutoReverse = true; //可原路返回
            xiazhuan.RepeatBehavior = RepeatBehavior.Forever;// 重覆執行
            Storyboard.SetTargetProperty(xiazhuan, new PropertyPath("RenderTransform.Angle"));
            stt.Children.Add(xiazhuan);
            RotateTransform xuanzhuan = new RotateTransform(); // 旋轉對象
            boo.RenderTransform = xuanzhuan;
            boo.RenderTransformOrigin = new Point(0.5, 0.5);

點擊按鈕：

        private void btn_Click(object sender, RoutedEventArgs e)
        {
            sto.Begin(); // 開啟動畫
            stt.Begin();
        }