MSDN Magazine - August 2008 - (Page 74)

then the current color is used. You specify the desired end color using the To attribute. You can also specify a By attribute, which will provide the end color that is the result of adding the values of the From color (or the starting color) to the By color. When you animate a color-based property, you do not animate the contents of the property directly, because the content of the property is usually a brush and not a color. So, if you want to animate the fill color of a rectangle, for example, you don’t use the rectangle’s Fill property as your target. Instead, you specify that you intend to animate the Color property of the SolidBrush that is used to perform the fill. Figure 7 shows an example of how to animate the color of a rectangle, changing it from black to white over a time duration of five seconds, using a color animation. As you can see in the code, this XAML snippet specifies the Color property of the SolidColorBrush that is filling the shape as its target property. Note that this is the typical XAML syntax used in addressing complex properties like this scenario. In a manner similar to the Color and Double animations, you specify the start value using From and the destination either as a relative direction (using By) or an absolute point (using To). Figure 8 shows an example of how you could animate the end point of a Bezier curve. In this case, the Bezier curve is defined with a start point at (100,100), an end point at (300,100), and a control point at (200,0). An animation is set up to trigger after the path loads, and it animates the end point of the curve (Point2) from (300,100) to (300,600) over a time duration of five seconds. Using Key Frames Animating a Point with PointAnimation To change a value that is defined as a point over time, you use the PointAnimation type. The animation is then calculated as a linear interpolation between the values over the specified time. Figure 7 Animating Color Change Figure 8 Animating the End of a Curve The three animation types that you’ve just learned about, ColorAnimation, DoubleAnimation, and PointAnimation, all work by changing a defined property over time using linear interpolation. For example, if you are moving a double value from 100 to 500 over five seconds, it will increment by 80 each second. Each of these three animation types can have this transition defined through a set of milestones called key frames. To change the linear behavior of the animation from the starting property to the ending property, you simply insert one or more key frames. Then you define the style of animation that you want between these various points. Key frames are defined using key times. These are times that are specified relative to the start time of the animation; they also specify the end time of the key frame. So, for instance, if you need a nine-second animation with three evenly spaced key frames, you can specify the first key frame to end at 0:0:3, the second to end at 0:0:6, and the third to end at 0:0:9. Keep in mind that you do not specify the length of the key time—instead, you specify the end time for each key frame. As another example, consider a Double animation that you want to span half the range of 100 to 500. The animation should move very quickly in the first half and very slowly in the second half. Overall, it will require a six-second total transition. Since 350 is the midpoint between 100 and 500, you would define a key frame to begin at point 350. You’d tell it to go for one second between the start point and the midpoint, using a key time of 0:0:1, and then set a time duration of five seconds between the midpoint and the end point by using a second key time of 0:0:6. Now the item is set to zip across the screen to the midpoint and then it will seem to crawl the rest of the way. In the previous example, both animated segments will be linearly interpolated. To provide extra flexibility, two other types of key frames are provided: a discrete key frame that instantly jumps the value between the two values, and a spline key frame that moves the value between the first and end points using a quadratic curve to define the interpolation. (In the following sections, you’ll look at how to define an animation using key frames for the Double type. Note that the same principles apply for Point and Color animation types.) To specify key frames, you use the UsingKeyFrames postfix on your animation. That is, to define Double animations and use key frames, you’ll use DoubleAnimationUsingKeyFrames on which you specify your target and property (in the same way you use Silverlight 74 msdn magazine

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.