Windows Phone development path (9) Silverlight Animation

Animation is a key feature of Silverlight (SL) because it provides some dazzling effects, these are the examples of server-based programming frameworks (such as ASP.. net ). In SL, animation can achieve a lot of effects. For example, when the mouse goes through, the icon becomes larger, the logo is rotated, and the text is rolled into the view, you can also design browser-based games.

Animation is the core part of the SL model,This means you do not need to use timer and Event ProcessingCodeTo implement them, but by using a few classes to declare and configure them, you can create an animation without writing a line of C # code.

Basic animation knowledge

SL animation is a lite-version WPF animation system. To better understand SL animation, you need to understand the following key principles.

1. SL executes a time-based animation. You need to set the initial state, final state, and animation duration. SL calculates the frame rate.
2. SL uses an attribute-based animation model.
3. To assign an animation attribute, you must use an animation class that supports this data type. For example, if you want to modify the attribute whose data type is double, you must use the doubleanimation class. To modify the background color of the canvas, use the coloranimation class.

There are few animation classes in SL, and only a limited number of data types can be used. Currently, the following data types can be used to modify animation attributes: Double, object, color, and print.

Demo Board

the presentation board is used to manage the animation timeline. The storyboard class provides the most basic function of specifying specific attributes and specific elements using the targetproperty and targetname attributes. In short, A dashboard serves as a bridge between an animation and an animation attribute to be set.
The following XAML Code defines a dashboard. It assigns the doubleanimation class to the width attribute of a button named rows grow:

<Storyboard X: Name ="Storyboard">
<Doubleanimation storyboard. targetname ="Cmdgrow"Storyboard. targetproperty ="Width"From ="160"To ="300"Duration ="0: 0: 5">
</Doubleanimation>
</Storyboard>
 

Create an animation

Creating an animation is a multi-step process. Three different elements need to be created: the animation object for executing the animation, the demo board for managing the animation, and the event trigger for starting the demo board. The following is a simple example to illustrate the process of creating an animation.
XAML code:

<Usercontrol X: class = "  Silverlight_layout.mainpage  " 
Xmlns = "  Http://schemas.microsoft.com/winfx/2006/xaml/presentation  " 
Xmlns: x = "  Http://schemas.microsoft.com/winfx/2006/xaml  " 
Xmlns: D = " Http://schemas.microsoft.com/expression/blend/2008  " 
Xmlns: MC = "  Http://schemas.openxmlformats.org/markup-compatibility/2006  " 
MC: ignorable = "  D  " 
D: designheight = "  150  " D: designwidth = "  300 " >

<! -- Define the animation object doubleanimation and the demonstration board storyboard -->
<Usercontrol. Resources>
<Storyboard X: Name = "  Storyboard  " >
<Doubleanimation storyboard. targetname = "  Cmdgrow  " Storyboard. targetproperty = "  Width  " From ="  160  " To = "  300  " Duration = "  0: 0: 5  " >
</Doubleanimation>
</Storyboard>
</Usercontrol. Resources>

<! -- Define a button and add a click event -->
<Grid>
<Button name = " Cmdgrow  " Content = "  This button grows  " Width = "  160  " Height = "  40  " Click = "  Cmdgrow_click  " />
</GRID>
</Usercontrol>

C # code:

 
Public Partial ClassMainpage: usercontrol
{
PublicMainpage ()
{
Initializecomponent ();
}

Private VoidRepeated grow_click (ObjectSender, routedeventargs E)//Process the Click Event of the cmdgrow button
{
Storyboard. Begin ();//Call the begin () method to start the animation associated with the Demo Board
}
}
 

Execution result

Before an animation is executed

In the preceding example, we can conclude that:

1. The animation object is a doubleanimatin class object.
2. The graphic board used to manage animations is a storyboard object.
3. The event trigger is: Click Event

The above is all about the Silverlight animation. Although this is a very simple animation, it shows three elements and creation methods for creating the Silverlight animation. It can be said that the previous summary all laid the foundation for better development of WP. From the next article, I will officially summarize the content about actual development of WP. I hope you will continue to pay attention to it. Thank you!