Silverlight & Blend Animation Design series nine: Animation (Animation) and view state management

Animation in Silverlight (Animation) is commonly used in conjunction with view state management, which is used to manage the animation actions that an object performs within a segment of an event, and view state management is used to control A system object toggles and navigates between multiple different visual states. This article focuses on the combination of animation (Animation) and view state management (Visual condition manager), and details about view state management.

A simple example, such as a button in the development of a project, when I click on the button dynamically from a certain direction (such as the direction from top to bottom, that is, from the top of the screen dynamic sliding to the screen) renders a panel.

To implement this simple example, you can do this by using the offset animation features introduced in the Silverlight & Blend Animation Design series One: Offset animation (translatetransform), to make it more aesthetically pleasing and to add some other transformations For example, in the process of sliding down the panel to change the transparency of the Panel, from completely transparent to opaque effect. When we understand the requirements then we can design it in blend, first the layout interface (Button,border[textblock]) as shown in the following illustration:

Add Storyboard and select the first-second timeline to set the Border object's transform.y to 296 (this value can be determined directly by dragging the border object in the design), and then move the timeline to the third-second position, setting the TRANSFROM.Y to 0. You can also set the opacity to 100% in the first second by setting the border opacity to 0%, or three seconds, so the effect will be better during the animation.

Through the layout of the above button to trigger animation development, compiled to run the program can see its effect, when the Click button will see a panel from the top has been blurred to clear animation loaded into the interface. Alternatively, you can set the Border object to not display (visibility= "collapsed") and set it to display (Visibile) when the animation is started.

<storyboard x:name= "Storyboard1" >
<doubleanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "border"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [3]. (TRANSLATETRANSFORM.Y) ">
<easingdoublekeyframe keytime= "00:00:00" value= " -296"/>
<easingdoublekeyframe keytime= "00:00:01" value= "0"/>
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "border"
Storyboard.targetproperty= "(uielement.opacity)" >
<easingdoublekeyframe keytime= "00:00:00" value= "0.3"/>
<easingdoublekeyframe keytime= "00:00:01" value= "1"/>
</DoubleAnimationUsingKeyFrames>
<objectanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "border"
Storyboard.targetproperty= "(uielement.visibility)" >
<discreteobjectkeyframe keytime= "00:00:00" >
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<discreteobjectkeyframe keytime= "00:00:01" >
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>