MSDN Magazine - August 2008 - (Page 72)

ColorAnimationUsingKeyFrames type. This method is used to animate properties that contain a color value—the background or stroke of an element, for instance. Targeting the Animation Note that if the animation is set to run for 5 seconds as previously, and the AutoReverse is set to true, then the complete animation will take 10 seconds. Following is an example of XAML containing the AutoReverse property: To define which object you want to apply the animation to, you use the Storyboard.TargetName property on these animation types, and you need to pass it the name of the object in question, which is set on the object using the x:Name property. Additionally, you specify the property that will be animated using the Storyboard.TargetProperty. Note that if you are specifying a complex or attached property (such as Canvas.Left), you place it in parentheses. So, for example, to specify a Double animation to target the Canvas.Left of a rectangle named rect, the resulting XAML will look like this: Setting the RepeatBehavior Property Setting Animation Properties To define how long it will take to transition the properties in question from one value to another, you use the Duration property. Note that it is defined in the HH:MM:SS format, wherein a fivesecond time duration for the animation is specified as 00:00:05, abbreviated to 0:0:5. If you do not want the animation to begin right away, you can insert a delay using the BeginTime property, using the same syntax: When the animation has finished running, you can apply a number of options to control how you want it to behave. You specify these using the RepeatBehavior property. This property can take three different types of values: • A time defined in seconds. The timeline will wait for this period and then start the animation again. • Repeat behavior set to Forever for constant repetition. • A discrete number of repetitions set by specifying a number followed by x. For example, if you want the animation to run three times, you specify the value 3x. Figure 6 shows the complete XAML for the animated rectangle to move it from 100 to 500 and back to 100 on the x-axis and then repeat that behavior three times: Let’s look at each of these animation types in a little more detail. First, I’ll examine the attributes needed to animate each of the various types, and then I’ll address where the associated key frame type of animation fits into the picture. You can also tweak the animation behavior by multiplying the duration by a speed ratio. This is achieved using the SpeedRatio property. For example, in the previous case the duration was set to 5 seconds. You can change the speed ratio to make the animation last 10 seconds by setting SpeedRatio to 2, or, alternatively you can speed the animation up to 1 second by setting SpeedRatio to 0.2. Animating a Value with DoubleAnimation Silverlight animation provides the facility to reverse the changes made as part of the animation. For example, if you are moving a double value from 0 to 500 over a specific time frame, an AutoReverse will cause the animation to move from 500 back to 0. Figure 6 Reversing and Repeating Animation The DoubleAnimation object allows you to specify how a double value will change over a specified timeline. The animation is calculated as a linear interpolation between the property values over time. When animating a double, you specify the value at the start of the animation using the From value and then change it to either the To value, which is an absolute destination, or the By value, which is a relative destination. For example, if you are moving the Canvas.Left property of an item from 100 (near the left of the screen) to 500, you can set From to 100 and To to 500, or By to 400. Note that if you set both, the To property takes precedence and the By property is ignored. Also, if the rectangle is already located at the desired From position, you do not need to specify the From property. The previous XAML example displayed this behavior. The rectangle is located with a Canvas.Left value of 100, and the DoubleAnimation specifies the To value as 500. Hence, the animation will move the value from 100 to 500, which will cause the rectangle to move across the screen to the right. Animating a Color with ColorAnimation ColorAnimation operates in a manner that is similar to DoubleAnimation. You use it to specify how the color value of an element will change over time. The animation is then calculated as a linear interpolation between the color values over the specified time. When animating a color, you specify the value at the start of the animation using the From property. If you do not specify this, Silverlight 72 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.