Introduction

In my previous article, I showed some of the animations available with WPF. The article showed how you can use WPF to animate various properties of an object. This article is going to expand the original idea to show some of the other animations available.

Transformations

The article I wrote before had an example of using the TranslateTransform transformation to move an object across the screen. That's not the only way to move an object; but first let's examine some of the other types of transformations. The rectangle has a RenderTransform property that can take various kinds of transform objects, such as TranslateTransform, RotateTransform, ScaleTransform, MatrixTransform, etc. that can alter the way the object appears on the screen.

Let's look at an example of some XAML code using the RotateTransform, which defines a property Angle of type double. This property takes the degree of rotation in 45 degree increments. The CenterX/CenterY properties determine the point to rotate around. The following XAML defines a button that, when clicked, will rotate in a circular fashion. The XAML definition for the button is reported in listing 1.

Listing 1: Rotating Button Transform

The rotate transform was given a name, because that makes it easier to work with it in the code. The following code rotates the object around the (75,50) point.

Listing 2: Rotating Button Transform Code

Every time the button is clicked, it rotates 45 degrees. When at angle of 315 degrees, the next step is reset the value to 0. Clicking the button rotates it around (75,50) point in a continual loop. This point is not dead center of the control, so it rotates in an elliptical fashion. In addition to rotating it, it is possible stretch or skew the button, as we'll see next.

Let's look at an example of scaling and skewing a button. Skewing works in a manner similar to the rotating button because rotations involve rotating at an angle, though not as severe.

Listing 3: Skewing Button Transform

The code that skews the object changes the angle between 0 and 30 degrees, as shown in listing 4.

Listing 4: Skewing Button Transform Code

Skewing is a little more limited with respect to scaling. Scaling also uses the CenterX/CenterY properties, as well as a ScaleX/ScaleY group of properties. The latter properties specify the factor to use when scaling; so a value of 1 means to scale X/Y attributes to the normal size, .5 means scaling the button to half of the original size, and a value of 2 means double the normal size. When CenterX/CenterY is set to zero, the object scales larger to the right and bottom (scales away from the upper-left corner). When the CenterX/CenterY values are set to the middle of the object, the object scales away from the center point (grows from the center equally). Let's take a look at scaling. Below is the definition of a button.

Listing 5: Scaling Button Transform

The beginning scale value is .5, meaning half of the original value. The following code will alter the scale value from .5 up to 2, back down to .25, and back up again over and over. Doing this is really simple, as shown in the following code.

Listing 6: Scaling Button Transform Code

Scaling is determined by a private variable; and when it reaches 2 or .25, the Boolean value determining the direction is reversed.

Figure 1: Transformations Result

In my previous article, I showed an example of moving an object across the screen using the translate transformation. However, there are more interactive ways to do so, such as using Geometry capabilities available in the WPF framework. Using the path syntax, it is possible to draw lines, curves, and ellipses that an object can use as its path of movement. The path markup syntax will be explained as the article goes along, but it would be beneficial to read the MSDN article on path markup.

Path data uses a special syntax to note the direction of a path. It uses a collection of point data, along with a series of commands, like M/m for Move; C/c for cubic bezier curve; Q/q, S/s, T/t for specialty Bezier curves; A/a for arcs; and L/l, V/v, H/h for lines. Each command has a series of point arguments that it takes to determine the total path. For instance, the (L)ine command takes an (x,y) coordinates pair specifying the end point of the line. Curves use a set of control points to control the amount of curve in the line. In addition, there is a difference between the upper case and lower case letters. Upper case is an absolute value, whereas lower case is a relative value. Let’s start with a path that creates an ellipse (looking like a football), as shown in the following listing.

Listing 7: Ellipsis Path

The ellipse defined in the previous code is going to move across a path. That path is setup in a storyboard, and the data is passed through the PointAnimationUsingPath animation. Note the path geometry as defined in the following listing.

Listing 8: Animation using a Path

The PointAnimationUsingPath animation takes a path geometry. Path geometry renders a path which may or may not connect the beginning to the end. It can use a series of lines or curves to form this path, using a specialized syntax as mentioned before. M moves the beginning point to (20,100). L draws a line to (80,10), followed by a series of three types of Bezier curves, which end at the (20,100) starting point. Each of these curves has one or two control points, with the last set of coordinates being an end point.

Figure 2: Path Animation

Rotating Rectangle Animation

The last animation that I’m going to show you rotates the rectangle around in a circular fashion, using data provided by a path. As we've seen previously, the RotateTransform transform controls the amount of rotation applied to the object. When using this with path data, the rectangle animates in a circular fashion very smoothly. First, let's look at the setup, as the control uses a gradient and defines a RotateTransform object named RectRotate.

Listing 9: Gradient Rectangle With Rotating Transform

When the rectangle is loaded, the animation in the following listing is run. The double animation uses a path geometry (which simplistically consists of a horizontal line) to change the angle from 0 to 359 degrees, and repeat this behavior forever. The targeted property is the angle property. However, from the path geometry, it is also possible to use a source value of X, Y, or Angle as well.

Listing 10: Spinning Rectangle Animation

In this example, only the Angle property is targeted. However, using a TranslateTransform in combination with the RotateTransform can provide a realistic rendering of an object that moves along a path. To see an excellent example of this, check this MSDN example.

Figure 3: Spinning Rectangle Animation

Conclusion

WPF has some advanced capabilities in graphics rendering. As we've seen, animations in WPF are pretty powerful and provide interesting capabilities when programming with the various objects available.

About Brian Mains

Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare. In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou... View complete profile