1. 程式人生 > >WPF後臺動畫DoubleAnimation講解

WPF後臺動畫DoubleAnimation講解

目標 property bili nsvalue bsp class out mage func

WPF後臺動畫,使用DoubleAnimation做的。

1.移動動畫

需要參數(目標點離最上邊的位置,目標點離最左邊的位置,元素名稱)

Image mImage = new Image();

FloatInElement(100,100,mImage);

 1 /// <summary>
 2         /// 移動動畫 
 3         /// </summary>
 4         /// <param name="top">目標點相對於上端的位置</param>
 5         /// <param name="left">目標點相對於左端的位置
</param> 6 /// <param name="elem">移動元素</param> 7 public static void FloatInElement(double top, double left, UIElement elem) 8 { 9 try 10 { 11 DoubleAnimation floatY = new DoubleAnimation() 12 { 13 To = TransValueFromHeight(top),
14 Duration = new TimeSpan(0, 0, 0, 1, 0), 15 }; 16 DoubleAnimation floatX = new DoubleAnimation() 17 { 18 To = TransValueFromWidth(left), 19 Duration = new TimeSpan(0, 0, 0, 1, 0), 20 };
21 22 elem.BeginAnimation(Canvas.TopProperty, floatY); 23 elem.BeginAnimation(Canvas.LeftProperty, floatX); 24 } 25 catch (Exception) 26 { 27 28 throw; 29 } 30 }

2.透明度動畫

需要參數(元素名稱,需要到達的透明度)

Image mImage = new Image();

FloatInElement(mImage,0);

 1 /// <summary>
 2         /// 透明度動畫 
 3         /// </summary>
 4         /// <param name="elem"></param>
 5         /// <param name="to"></param>
 6         public static void FloatElement(UIElement elem, double to)
 7         {
 8             lock (elem)
 9             {
10                 if (to == 1)
11                 {
12                     elem.Visibility = Visibility.Visible;
13                 }
14                 DoubleAnimation opacity = new DoubleAnimation()
15                 {
16                     To = to,
17                     Duration = new TimeSpan(0, 0, 0, 1, 0)
18                 };
19                 EventHandler handler = null;
20                 opacity.Completed += handler = (s, e) =>
21                 {
22                     opacity.Completed -= handler;
23                     if (to == 0)
24                     {
25                         elem.Visibility = Visibility.Collapsed;
26                     }
27                     opacity = null;
28                 };
29                 elem.BeginAnimation(UIElement.OpacityProperty, opacity);
30             }
31         }

3.緩動動畫-縮放動畫

需要參數(控件名稱,元素開始的位置,開始大小,目標大小)

Image mImage = new Image();

ScaleEasingAnimationShow(mImage,new Point(0.5,0.5),1,0);

元素開始的位置是從new Point(0,0)到new Point(1,1),左上角為(0,0)、右下角為(1,1),控件大小範圍為(1,0) 1為控件本身大小,0 為控件縮放完,不顯示。

如果要改動畫類型,則改EasingMode = EasingMode.EaseOut

 1 /// <summary>
 2         /// 用戶控件是的動畫
 3         /// </summary>
 4         /// <param name="element">控件名</param>
 5         /// <param name="point">元素開始動畫的位置</param>
 6         /// <param name="from">元素開始的大小</param>
 7         /// <param name="from">元素到達的大小</param>
 8         public static void ScaleEasingAnimationShow(FrameworkElement element, Point point, double from, double to)
 9         {
10             lock (element)
11             {
12                 ScaleTransform scale = new ScaleTransform();
13                 element.RenderTransform = scale;
14                 element.RenderTransformOrigin = point;//定義圓心位置        
15                 EasingFunctionBase easeFunction = new PowerEase()
16                 {
17                     EasingMode = EasingMode.EaseOut,
18                     Power = 5
19                 };
20                 DoubleAnimation scaleAnimation = new DoubleAnimation()
21                 {
22                     From = from,                                   //起始值
23                     To = to,                                     //結束值
24                     EasingFunction = easeFunction,                    //緩動函數
25                     Duration = new TimeSpan(0, 0, 0, 1, 0)  //動畫播放時間
26                 };
27                 AnimationClock clock = scaleAnimation.CreateClock();
28                 scale.ApplyAnimationClock(ScaleTransform.ScaleXProperty, clock);
29                 scale.ApplyAnimationClock(ScaleTransform.ScaleYProperty, clock);
30             }
31         }

WPF後臺動畫DoubleAnimation講解