MSDN Magazine - August 2008 - (Page 76)

Figure 9 Animation with Key Frames linear interpolation This causes the object to jump to the value at the specified key frame time. The second part of Figure 9 shows the same example as the previous one, except that it uses a discrete key frame. At one second into the animation, the rectangle will jump halfway across the screen. Then at nine seconds into the animation, it will jump to the right of the screen. Note that similar principles apply for the DiscretePointKeyFrame and DiscreteColorKeyFrame. Using Spline Key Frames Discrete Key Frames DoubleAnimation). DoubleAnimationUsingKeyFrames contains the key frame definitions. (And as I mentioned earlier, the same applies to PointAnimationUsingKeyFrames or ColorAnimationUsingKeyFrames.) The default method for animation between two property values is linear interpolation in which the amount is divided evenly over time. You can also define linear steps between frames using the LinearKeyFrame type in which linear interpolation is still used, but it is used between key frames, so you can have an acceleration/deceleration effect. Consider the animation code shown in the first part of Figure 9. Here, a DoubleAnimationUsingKeyFrames is used, and it defines two key frames. One defines a linear interpolation between 0 and 300 for Canvas.Left changes over one second, and the next defines a linear interpolation between 300 and 600 for Canvas. Left changes over eight seconds. This has the effect of making the rectangle move quickly to the halfway point, then slowly the rest of the way across. Similar principles apply for the LinearPointKeyFrame and LinearColorKeyFrame. Using Linear Key Frames To change the property from one value to another using a curved value that provides for acceleration and deceleration, you use a spline key frame. To do this, first you define a quadratic Bezier curve and then the speed of the property as it moves from one value to another is determined by a parallel projection of that curve. If this is hard to visualize, consider the following scenario: the sun is right overhead, and you hit a baseball into the outfield. You look at the shadow of the ball. As it is climbing into the air, the movement of the shadow appears to accelerate. As it reaches its apex, you’ll see the shadow decelerate. As the ball falls, you’ll see the speed of the shadow accelerate again, until either it is caught or it hits the ground. Imagine your animation in this case is the ball’s shadow and the spline is the curve of the baseball. You define the trajectory of the baseball, a spline, using a KeySpline. The KeySpline defines control points for a quadratic Bezier curve. It is normalized so that the first point of the curve is at 0, and the second is at 1. For a parabolic arc, which is the trajectory the baseball would follow, the KeySpline will contain two comma-separated normalized values. To define a curve such as the flight of a baseball, you can specify the spline using a KeySpline such as 0.3,0 0.6,1. This defines the first point of the curve at (0.3,0) and the second at (0.6,1). This will have the effect of making the animation accelerate quickly until approximately one-third of the movement of the baseball is complete; then it will move at a uniform speed until approximately two-thirds of the ball’s trajectory is reached; and then it will decelerate for the rest of the flight of the animated baseball, as the animation simulates the ball’s fall to earth. Figure 10 shows an example of using a KeySpline to define the Figure 10 Defining a Spline with KeySpline Using Discrete Key Frames 76 msdn magazine If you want to change the property from one value to another and not use linear interpolation, you can use a discrete key frame. Silverlight

Table of Contents Feed for the Digital Edition of MSDN Magazine - August 2008

MSDN Magazine - August 2008 Toolbox CLR Inside Out Basic Instincts Cutting Edge Patterns in Practice Data 2.0 - Expose And Consume Data In A Web Services World Biztalk EDI - Build A Robust EDI Solution With BizTalk Server Silverlight - Create Animations With XAML And Expression Blend Write On! - Create Web Apps You Can Draw On With Silverlight 2 Wicked Code - Craft Custom Controls For Silverlight 2 Team System Foundations Windows With C++ Concurrent Affairs Going Places { End Bracket }

MSDN Magazine - August 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.