Introduction

When I was new to WPF, I saw several examples of animating objects. But they were quite complicated. With time I became familiar with them. However, animating still required quite a bit of typing. So I decided to write this class to minimize this effort. The MSDN link will provide with more detailed information about the various animation classes. I will try to cover all the basic part.

Using the code

The MAnimation class contains methods for easy animation of WPF controls or UIElements. It contains methods for various kinds of animations discussed below.

Translate or Slide Animation

As the name describes itself, it can be used to move or slide a control from one point to another. For this, you can use the method MAnimation.SlidingAnimation(). This method initializes two new TranslateTransform class object. One for X property and one for Y. It also initializes a DoubleAnimation class object that is required for TranslateTransform class to carry out its BeginAnimation() method. It is a sort of timeline and contains the duration, FillBehavior(Whether or not does the control hold values after the animation has ended), EasingFunction(That is the accelaration and retardation rates of animation), etc.

Ok, now how to use it:

Dim animator As New MAnimation
animator.SlidingAnimation(ControlToBeAnimated, initialXValue, initialYValue, finalXValue, finalYValue, 
durattion, FillBehavior, easingFuntion)

C#

MAnimation animator = new MAnimation();
animator.SlidingAnimation(ControlToBeAnimated, initialXValue, initialYValue, finalXValue, finalYValue, 
durattion, FillBehavior, easingFuntion);

In place of easingFuntion you can write "New NameOfEasingFunction()",For Example-

animator.SlidingAnimation(ControlToBeAnimated, initialXValue, initialYValue, finalXValue, finalYValue, 
durattion, FillBehavior, New BounceEase)

C#

animator.SlidingAnimation(ControlToBeAnimated, initialXValue, initialYValue, finalXValue, finalYValue, durattion, FillBehavior, new BounceEase())

For more types and details visit this link.

Property Animation

It animates a specific property of a control such as OpacityProperty or any other property. The method you can use is MAnimation.AnimateProperty(). It initializeas a DoubleAnimation class object, sets its properties using the parameters passed and assossiates it with a StoryBoard object. Usage:

Dim animator As New MAnimation
animator.AnimateProperty(MyControl.Name, initialValue, finalValue, duration, PropertyPath, 
MyControlContainer, FillBehavior, easingFunction)

C#

MAnimation animator = new MAnimation();
animator.AnimateProperty(MyControl.Name, initialValue, finalValue, duration, PropertyPath, MyControlContainer, FillBehavior, easingFunction);

Suppose you have to fade in a Canvas Control then,

Dim animator As New MAnimation
animator.AnimateProperty(MyControl.Name, 0, 1, 1, New PropertyPath(Canvas.OpacityProperty), 
Me, FillBehavior.Hold, Nothing)

C#

MAnimation animator = new MAnimation();
animator.AnimateProperty(MyControl.Name, 0, 1, 1, new PropertyPath(Canvas.OpacityProperty), this, FillBehavior.Hold, null);

As you can see, the PropertyPath constructor contains Canvas.OpacityProperty. That means you have to sigify the control type specifically and the property to be animated. "Me" or "this" signifies the window and "Nothing" or "null" describes no easingFunction is to be used.

Rotate Animation-

This type of animation rotates a control about the provided coordinates by a certain angle. The MAnimation.Rotate() method can be used for this purpose. This method creates a new RotateTransform and a DoubleAnimation class objects to rotate the control. Usage-

Dim animator As New MAnimation
animator.Rotate(myControl, centerX, centerY, InitialAngle, FinalAngle, FillBehavior,
                         easeFunction, duration)

C#-

MAnimation animator = new MAnimation();
animator.Rotate(myControl, centerX, centerY, InitialAngle, FinalAngle, FillBehavior, easeFunction, duration);

centerX and centerY are the X and Y coordinates about which the control is to be rotated. The top of the control is taken to be (0,0). The InitialAngle is generally 0. If FinalAngle is positive, the control is rotated in clockwise direction and if negative, it is rotated anti-clockwise.

MSDN illustraion.

Skew Animation-

As the name suggests it skews the control about its lenght, breadth or both based on the parameters. The MAnimation.SkewAnimation() is the method to be used. This method creates a new SkewTransform and a DoubleAnimation class objects to skew the control. Usage-

Dim animator As New MAnimation
animator.SkewAnimation(myControl, CenterX, CenterY, AngleX, AngleY, duration, easeFunction,FillBehavior)

C#-

MAnimation animator = new MAnimation();
animator.SkewAnimation(myControl, CenterX, CenterY, AngleX, AngleY, duration, easeFunction, FillBehavior);

I insist that you take a look at the MSDN illustration to understand more about the skew tranformation or you can just test this method with different values.

MSDN illustration.

Scale Animation-

It scales a control along the height and width based on the provided values. This method works similar to the previous ones. Usage-

Dim animator As New MAnimation
animator.ScaleAnimation(myControl, centerX, centerY, scaleX, scaleY, duration, easeFunction, FillBehavior)

C#-

MAnimation animator = new MAnimation();
animator.ScaleAnimation(myControl, centerX, centerY, scaleX, scaleY, duration, easeFunction, FillBehavior);

The scaleX(For width) and scaleY(For Height) values are the factors by which the width and height are to be scaled. It means that if you put scaleWidth to be 2 than the control's width is doubled.

MSDN illustration.

History

Version-1.0

Change log-

Added Rotate, Skew and Scale Animation methods.

Animations made easy in WPF.