Windows Phone development and learning-storyboard animation effect

Windows Phone applicationProgramIn development, the dazzling animation effect can increase the user experience. The basic animations such as translation and flip involve some animations in the game. The current application requires such an effect, so I learned how to make the animation effect and found that it is quite simple. Microsoft provides a storyboard control and can be used.

For example, if you want to add a flip effect and display different content after the flip, you only need to add the following content to the XAML and backend CS.CodeYou can:

XAML: note that you do not need to add it to the page. You can add it to the user control. You only need to change the prefix and suffix to <usercontrol. Resources>... </usercontrol. Resources>.

<Phone: phoneapplicationpage. resources> <storyboard X: Name = "storyboard1"> <doubleanimationusingkeyframes storyboard. targetproperty = "(uielement. rendertransform ). (compositetransform. scaley) "storyboard. targetname = "textbox1"> <easingdoublekeyframe keytime = "0" value = "1"/> <easingdoublekeyframe keytime = "0: 0. 5 "value =" 0 "> <easingdoublekeyframe. easingfunction> <circleeffeceasingmode = "easein"/> </easingdoublekeyframe. easingfunction> </easingdoublekeyframe> </doubleanimationusingkeyframes> </storyboard> <storyboard X: Name = "storyboard2"> <doubleanimationusingkeyframes storyboard. targetproperty = "(uielement. rendertransform ). (compositetransform. scaley) "storyboard. targetname = "textbox1"> <easingdoublekeyframe keytime = "0" value = "0"/> <easingdoublekeyframe keytime = "0: 0. 5 "value =" 1 "> <easingdoublekeyframe. easingfunction> <circleeffeceasingmode = "easeout"/> </easingdoublekeyframe. easingfunction> </easingdoublekeyframe> </doubleanimationusingkeyframes> </storyboard> </Phone: phoneapplicationpage. resources>

Storyboard. targetname = "textbox1" indicates the control to which the animation is to be played. The corresponding code must be added to the control:

 
<Textbox. rendertransform> <compositetransform/> </textbox. rendertransform>
 

Here, there is a parameter setting for flip, whether to flip by center or by up or down. In the control, set the corresponding rendertransformorigin = "0.5, 0.5". Here I set to flip by center

Set the RESPONSE event in the background CS Code, for example, click the mouse:

 
Private void button#click (Object sender, routedeventargs e) {storyboard1.begin (); storyboard1.completed + = (O, argS) =>{ textbox1.text = "this is the text after flip "; storyboard2.begin ();};}
 

Note that this is an asynchronous call, but you can also use another method, that is, add the completion event in the storyboard, for example

<Storyboard X: Name = "storyboard1" completed = "storyboard+completed">
 

Then add processing in the corresponding function in the background

 
Private void storyboardappscompleted (Object sender, eventargs e) {If (flag = 1) {// decrementmonth (); storyboard2.begin ();} else {// incrementmonth (); storyboard2.begin ();}}
 

The above two methods are similar, but I prefer the second method. After all, you only need to use a control to start storyboard, and then you don't have to worry about it, when storyboard is complete, its completion function is automatically called.

Obviously, Flip is only the simplest of all kinds of animations. Currently, this effect is enough for the current project. Storyboard involves a lot of parameters. If you study it carefully, you can definitely make the desired results.