Silverlight & Blend Animation Design series five: Storyboard (storyboards) and animation (animations)

As you can see, blend is a very powerful time saving design tool, under blend can design a lot of satisfactory animation works, perhaps he specifically how to achieve, through what way to achieve we still ignorant. This article will continue on top of several basic animations, detailing the details of the properties and various types of animation (animations) in Silverlight that provide the story board (Storyborards), revealing the inside story of the animated design under blend.

Story Board (StoryBoard) properties

The storyboard (StoryBoard) in Silvelight provides a functional interface for managing timelines that can be used to control one or more Silverlight animation processes, and I also call them animation timeline containers. The following XAML code block demonstrates an offset transformation animation of an element named Greenball in the x-coordinate direction through storyboard.

<Storyboard　x:Name="MoveBall">
　　　　 <DoubleAnimationUsingKeyFrames　BeginTime="00:00:00"　 Storyboard.TargetName="GreenBall"
　　　　　　　　 Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[3].(TranslateTransform.X)">
　　　　　　　　 <EasingDoubleKeyFrame　KeyTime="00:00:02"　Value="540"/>
　　　　 </DoubleAnimationUsingKeyFrames>
</Storyboard>

Storyboard provides six commonly used animation property options, namely, Autoreverse,begintime,duration,fillbehavior,repeatbehavior,speedratio. These six properties can be used to control the basic behavior of the animation, such as to achieve the animation buffer time, you need to use the Duration property; Set the start time of the animation with BeginTime; If the animation is finished, reverse the execution route. Execution to the original state requires the use of autoreverse; If you need to set the animation speed, use SpeedRatio to complete it. The following code block demonstrates the use of the AutoReverse property, which runs backwards after the animation is run. For more details, refer to this blog post: "The Animation Basics QuickStart Animation" or MSDN.

<Storyboard　x:Name="MoveBall"　AutoReverse="True">
　　　　 <DoubleAnimationUsingKeyFrames　BeginTime="00:00:00"　 Storyboard.TargetName="GreenBall"
　　　　　　　　 Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[3].(TranslateTransform.X)">
　　　　　　　　 <EasingDoubleKeyFrame　KeyTime="00:00:02"　Value="540"/>
　　　　 </DoubleAnimationUsingKeyFrames>
</Storyboard>

Storyboard properties can be combined to apply, such as the code block on the animation set the AutoReverse property, so that after the animation is completed through the original run path back to scroll, you can add a BeginTime property to the animation timeline container, Causes it to start animation 5 seconds after the program is loaded, which uses two properties, the following block of code:

<Storyboard　x:Name="MoveBall"　AutoReverse="True"　 BeginTime="00:00:05">
　　　　 ......
</Storyboard>