基於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多個類。

BooleanAnimationUsingKeyFrames	ByteAnimation
ByteAnimationUsingKeyFrames	CharAnimationUsingKeyFrames
ColorAnimation	ColorAnimationUsingKeyFrames
DecimalAnimation	DecimalAnimationUsingKeyFrames
DoubleAnimation	DoubleAnimationUsingKeyFrames
DoubleAnimationUsingPath	Int16Animation
Intl 6AnimationUsingKeyFrames	Int32Animation
Int32AnimationUsingKeyFrames	Int64Animation
Int64AnimationUsingKeyFrames	MatrixAnimationUsingKeyFrames
MatrixAnimationUsingPath	ObjectAnimationUsingKeyFrames .
PointAnimation	PointAnimationUsingKeyFrames
PointAnimationUsingPath	Point3DAnimation
Point3DAnimationUsingKeyFrames	QuarternionAnimation
QuarternionAnimationUsingKeyFrames	RectAnimation
RectAnimationUsingKeyFrames	Rotation3DAnimation
Rotation3DAnimationUsingKeyFrames	SingleAnimation
SingleAnimationUsingKeyFrames	SizeAnimation
SizeAnimationUsingKeyFrames	StringAnimationUsingKeyFrames
ThicknessAnimation	ThicknessAnimationUsingKeyFrames
VectorAnimation	VectorAnimationUsingKeyFrames
Vector3DAnimation	Vector3DAnimationUsingKeyFrames

這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類

名稱	說明
BeginTime	設置將被添加到動畫開始以前的延遲時間(TimeSpan類型)。這一-延遲時間被加到總時間，因此具備5秒延遲的5秒動畫，總時間是10秒。當同步在同一時間開始，但按順序應用效果的不一樣動畫時，BeginTime 屬性是頗有用的
Duration	使用Duration對象設置動畫從開始到結束的運行時間
SpeedRatio	提升或減慢動畫速度。一般，SpeedRatio 屬性值是1。若是增長該屬性值，動畫會加快(例如，若是SpeedRatio屬性的值爲5,動畫的速度會變爲原來的5倍);若是減少該屬性值，動畫會變慢(例如，若是SpeedRatio屬性的值爲0.5,動畫時間將變爲原來的兩倍)。可經過改變更畫的Duration屬性值獲得相同結果。當應用BeginTime 延遲時，不考慮SpeedRatio屬性的值
AccclerationRatio；DecelerationRatio	使動畫不是線性的，從而開始時較慢，而後增速(經過增長AcelerationRatio 屬性值):或者結束時下降速度(經過增長DecelerationRatio屬性值)。這兩個屬性的值都在0~1之間，而且開始時都設置爲0。此外，這兩個屬性值之和不能超過1
AutoReverse	若是爲true,當動畫完成時會自動反向播放，返回到原始值。這也會使動畫的運行時間加倍。若是增長SpeedRatio屬性值，就會應用到最初的動畫播放以及反向的動畫播放。BeginTime屬性值只應用於動畫的開始一不 延遲反向動畫
FillBehavior	決定當動結束時如何操做。一般，可將屬性值保持爲固定的結束值(FillBchavior. HoldEnd),可是也可選擇將屬性值返回爲原來的數(FillBehavior Stop)
RepeatBehavior	經過該屬性，可使用指定的次數或時間間隔重複動畫。用於設置這個屬性的RepeatBehavior對象決定了確切的行爲

故事板

在全部聲明式動畫中都會用到以下兩個要素:
故事板: 故事板是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();
        }