Chapter 5

Animations and Transformations

After completing this chapter, you will be able to:

  • Resize user interface (UI) elements.
  • Scale, rotate, skew, and translate your objects.
  • Change the center point of an object.
  • Flip objects.
  • Simulate three-dimensional space via projection.
  • Add storyboards.
  • Use timelines and keyframes.
  • Add animations and change object properties over time. Modify storyboards.
  • Apply behaviors and run storyboards in response to events.
Transformations and animations are two great features in Expression Blend 4 which allow you to create amazing effects in your user interface. These tools provide powerful capabilities that enable you to move, resize, scale, rotate, and transform objects in both simple and complex ways. Transformations modify the rendering of an element while maintaining its original values. Animations serve to make your applications more interesting, natural, and lively. Transformations and animations can work everywhere—in games as well as in educational, developmental, and business applications.

Resizing

Resizing is the simplest way to change the size of an object—you just change its Width and Height properties. You might have noticed that when you select an element you can directly change its size on the Artboard. It would seem logical that resizing is a type of transformation; however, that’s not the case. Resizing changes only the dimensions of the object (its Width and Height) and doesn’t apply a transform.

Resizing Objects in Expression Blend

Transformations

Expression Blend provides the following two-dimensional transformations

  • RotateTransform
    • Rotates an element by the specified angle
  • ScaleTransform
    • Scales an element by the specified ScaleX and ScaleY values
  • SkewTransform
    • Skews an element by the specified AngleX and AngleY values
  • TranslateTransform
    • Moves an element by the specified X and Y values

Rendertransform Tab Expression Blend

Animation

When most people hear the word animation, they think of cartoons, but animations have a wider range of applications. In fact, animation is simply the rapid display of a sequence of images in order to create an illusion of movement. Objects can change their color, size, or opacity independently over time. They can even interact with the user and with other objects in response to actions while the animation is playing—and that might be the most interesting aspect of animation.

Expression Blend Animations

Controlling the Storyboard

There is an easier way to control storyboards—by using behaviors. Think about behaviors as reusable snippets of interactivity that you can apply to any element on your Artboard by using simple drag actions. You can use behaviors for many tasks, such as setting properties, running animations, and navigating between screens. Developers might also write their own behaviors for controlling interactivity. You will learn more about this in the next chapter, "Adding Interactivity.” For now, your first step toward learning behaviors will be to start an animation.

Adding a behavior to start an animation:

Expression Blend Behaviors Panel

Modifying an Animation and Adding New Keyframes

At this point, your project has an animation. You can now add some interactivity. Unfortunately, the tank currently moves in an unnatural way and needs several improvements in its motion. Suppose you wanted to add a 180-degree turn to the animation. To add that behavior, you’ll need to modify the animation.

New Keyframe Expression Blend

Easing an Animation

To make your animated motions look more like natural motions, you can control how Expression Blend animates property changes in the time span between two keyframes. It’s possible to simulate bouncing, accelerating from a stop, slowing down, and more. Keyframe interpolation will help you create amazing effects. You can control keyframe interpolation by selecting a suitable easing function from the comprehensive set that comes with Expression Blend.

Easing an Animation in Expression Blend

Using Storyboards

You’ve seen how to create a storyboard and how to start it by using behaviors. Here’s another example that enables you to start an opacity animation after your application starts and the top-level UserControl loads.

Building an opacity animation

Opacity Animation in Expression Blend




You can easily make this a point to YOUR company OR hide it all together.