WPF後臺動畫DoubleAnimation講解
阿新 • • 發佈:2018-04-28
目標 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講解