Tải bản đầy đủ - 0 (trang)
17-30. Animate Several Properties in Parallel

17-30. Animate Several Properties in Parallel

Tải bản đầy đủ - 0trang



Define your animations as discussed in Recipe 17-29, but make them children of a


How It Works

The ParallelTimeline is a special type of System.Windows.Media.Animation.Timeline that allows for one

or more child Timeline objects to be defined as its children, with each child Timeline being run in

parallel. Because ParallelTimeline is a Timeline object, it can be used like any other Timeline object.

Unlike a Storyboard, where animations are activated based on the order in which its child Timeline

objects are declared, a ParallelTimeline will activate its children based on the value of their BeginTime

properties. If any of the animations overlap, they will run in parallel.

The Storyboard class actually inherits from ParallelTimeline, and simply gives each child a

BeginTime based on where in the list of child objects a Timeline is declared and the cumulative Duration

and BeginTime values of each preceding Timeline. The Storyboard class goes further to extend the

ParallelTimeline class by adding a number of methods for controlling the processing of its child

Timeline objects. Because ParallelTimeline is the ancestor of a Storyboard, ParallelTimeline objects

are more suited to nesting because they are much slimmer objects.

Like other Timeline objects, the ParallelTimeline has a BeginTime property. This allows you to

specify an offset from the start of the owning Storyboard to the activation of the ParallelTimeline. As a

result, if a value for BeginTime is given by the ParallelTimeline, its children’s BeginTime will work relative

to this value, as opposed to being relative to the Storyboard.

It is important to note that a Storyboard.Completed event will not be raised on the owning

Storyboard until the last child Timeline in the ParallelTimeline finishes. This is because a

ParallelTimeline can contain Timeline objects with different BeginTime and Duration values, meaning

they won’t all necessarily finish at the same time.

The Code

The following example defines a System.Windows.Window that contains a single

System.Windows.Shapes.Rectangle. When the mouse is placed over the rectangle, the Rectangle.Height,

Rectangle.Width, and Rectangle.Fill properties are animated. The animation continues until the

mouse is moved out of the rectangle.



Title="Recipe17_30" Height="300" Width="300">

Stroke="Black" StrokeThickness="1">




17-31. Create a Keyframe-Based Animation


You need to create an animation that uses keyframes to specify key points in the animation.


Use a keyframe-based animation such as System.Windows.Media.Animation.

DoubleAnimationUsingKeyFrames. You can then use several System.Windows.Media.Animation.

IKeyFrame objects to define the keyframes in your animation.

How It Works

Keyframes allow you to specify key points in an animation where the object being animated needs to be

at a required position or in a required state. The frames in between are then interpolated between these

two keyframes, effectively filling in the blanks in the animation. This process of interpolating the inbetween frames is often referred to as tweening.

When defining an animation using keyframes, you will need to specify one or more keyframes that

define the animation’s flow. These keyframes are defined as children of your keyframe animation. It is

important to note that the target type of the keyframe must match that of the parent animation. For

example, if you are using a System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames, any

keyframes must be derived from the abstract class System.Windows.Media.Animation.DoubleKeyFrame.

You will be pleased to hear that a good number of types have keyframe objects, from System.Int to

System.String and System.Windows.Thickness to System.Windows.Media.Media3D.Quarternion. (For a

more complete list of the types covered, please see http://msdn.microsoft.com/en-us/library/

ms742524(VS.100).aspx.) All but a few of the types covered by animations have a choice of interpolation

methods, allowing you to specify how the frames between two keyframes are generated. Each

interpolation method is defined as a prefix to the keyframe’s class name, and is listed in Table 17-13.

Table 17-13. Interpolation Methods for Keyframe Animation




A discrete keyframe will not create any frames between it and the following keyframe. Once

the discrete keyframe’s duration has elapsed, the animation will jump to the value specified

in the following keyframe.


Linear keyframes will create a smooth transition between it and the following frame. The

generated frames will animate the value steadily at a constant rate to its endpoint.


Spline keyframes allow you to vary the speed at which a property is animated using the shape

of a Bezier curve. The curve is described by defining its control points in unit coordinate

space. The gradient of the curve defines the speed or rate of change in the animation.




Although keyframes must match the type of the owning animation, it is possible to mix the different

types of interpolation, offering variable speeds throughout.

The Code

The following XAML demonstrates how to use linear and double keyframes to animate the Height and

Width properties of a System.Windows.Shapes.Ellipse control (see Figure 17-27). The animation is

triggered when the System.Windows.Controls.Button is clicked.



Title="Recipe17_31" Height="300" Width="300">





HorizontalAlignment="Center" VerticalAlignment="Center">



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

17-30. Animate Several Properties in Parallel

Tải bản đầy đủ ngay(0 tr)