WPF background animation DoubleAnimation explained

WPF background animation, using DoubleAnimation to do.

1. Moving animation

Requires parameters (target point from the uppermost position, target point from the leftmost position, element name)

Image mImage = new Image();

FloatInElement(100,100,mImage);

1  ///  <summary> 
2          /// Moving animation 
 3          ///  </summary> 
4          ///  <param name="top"> The position of the target point relative to the top </param> 
5          ///  <param name="left"> The position of the target point relative to the left end </param> 
6          ///  <param name="elem"> Move element </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. Transparency animation

Requires parameters (element name, transparency that needs to be reached)

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. Easing animation - scaling animation

Requires parameters (control name, element start position, start size, target size)

Image mImage = new Image();

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

The starting position of the element is from new Point (0, 0) to new Point (1, 1), the upper left corner is (0, 0), the lower right corner is (1, 1), and the control size range is (1, 0) 1 It is the size of the control itself, and 0 means that the control is zoomed out and not displayed.

If you want to change the animation type, change EasingMode = EasingMode.EaseOut

1  ///  <summary> 
2          /// The animation of the user control is
 3          ///  </summary> 
4          ///  <param name="element"> Control name </param> 
5          ///  <param name= "point"> The position where the element starts to animate </param> 
6          ///  <param name="from"> the size of the element to start </param> 
7          ///  <param name="from"> the size of the element to reach < /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 ,                                    // start value 
23                      To = to,                                      // end value 
24                      EasingFunction = easeFunction,                     // easing function 
25                      Duration = new TimeSpan( 0 , 0 , 0 , 1 , 0 )   // animation playback time 
26                 };
27                 AnimationClock clock = scaleAnimation.CreateClock();
28                 scale.ApplyAnimationClock(ScaleTransform.ScaleXProperty, clock);
29                 scale.ApplyAnimationClock(ScaleTransform.ScaleYProperty, clock);
30             }
31         }