WPF后台动画DoubleAnimation讲解

2021-04-14 02:28

阅读:402

标签:函数   public   播放   缩放动画   nim   移动元素   移动动画   目标   complete   

WPF后台动画,使用DoubleAnimation做的。

1.移动动画

需要参数(目标点离最上边的位置,目标点离最左边的位置,元素名称)

Image mImage = new Image();

FloatInElement(100,100,mImage);

 1 /// 
 2         /// 移动动画 
 3         /// 
 4         /// 目标点相对于上端的位置
 5         /// 目标点相对于左端的位置
 6         /// 移动元素
 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 /// 
 2         /// 透明度动画 
 3         /// 
 4         /// 
 5         /// 
 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 /// 
 2         /// 用户控件是的动画
 3         /// 
 4         /// 控件名
 5         /// 元素开始动画的位置
 6         /// 元素开始的大小
 7         /// 元素到达的大小
 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讲解

标签:函数   public   播放   缩放动画   nim   移动元素   移动动画   目标   complete   

原文地址:https://www.cnblogs.com/softwyy/p/8969184.html


评论


亲,登录后才可以留言!