Windows Phone development (36): doubleanimation of Animation

Starting from this section, we will discuss an interesting topic-animation.

When you see the word "Animation", you must think of flash. After all, a very important framework of the WP application is Silverlight, which has also played many advantages of Silverlight. Many people may say that, silverlight is similar to flash. When you have a deep understanding of Silverlight, you will find that, in fact, Silverlight is more focused on data processing and enterprise-level applications.

 

Well, f doesn't talk much about it. Let's start to blow our cowhide. Before we blow cowhide, we should know where the cowhide comes from. Before talking about animation, let's first think about what is a storyboard? How do you think this is a good translation? It's a demo board. msdn translates it like this. I 'd like to say it's an intuitive concept. I don't know if you 've ever played flash, there is a "Frame Panel" in flash. Yes, in fact, this demonstration board has a very serious similarity with the frame panel.

In this case, let's take a look at the fact that. NET is very powerful. Therefore, open express blend to see a graphical Demo Board, so that everyone will understand it better.

 

In this way, the storyboard is derived from timeline, and the timeline is crucial in the animation. We all know that the so-called animation will be "dynamic ", it is precisely because of the time difference that the concept of "frame" can be understood by everyone. It is only worth mentioning that you have a tacit understanding with her.

 

A storyboard can contain more than n sub-animation timelines. Today we will first learn about a relatively simple one. doubleanimation is used to animation two double values within a certain period of time, such as the width of the visualization element, height, transparency, etc.

 

Severe warning: not all attributes can be animated. The attribute to be animated must be a dependency attribute.

 

Well, there's a lot to talk about in theory. It's easy for people to get confused. Let's just do it.

Next we will do a drill.

 

Step 1: Create a WP ApplicationProgramProject, which is omitted 35 characters.

Step 2: Add a rectangle and two buttons to the page. The rectangle is "Mouse" and used for animation experiments. For the two buttons, one is playing an animation, one is to stop the animation. How to arrange the interface, as you like.

<! -- Contentpanel-place other content here --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <grid. rowdefinitions> <rowdefinition Height = "*"/> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <rectangle X: Name = "REC" grid. row = "0" margin = "100" fill = "yellow"/> <stackpanel grid. row = "1" orientation = "horizontal"> <button content = "play" Click = "play_click"/> <button content = "stop" Click = "stop_click"/> </stackpanel> </GRID>
 

 

Step 3: Add a storyboard to the grid named contentpanel as a resource, declare a doubleanimation in it, and change the transparency of the rectangle to 0 in five seconds, even if the rectangle produces an animation effect that fades out.

Storyboard. the targetname additional attribute specifies the name of the object to be animated. If you want to destroy the object, write its name. storyboard. targetproperty is an attribute for animation processing. We need to over-animation transparency, so the opacity attribute is used here. Duration is the animation duration. It takes 5 seconds.

 
<Grid. resources> <storyboard X: Name = "STD"> <doubleanimation duration = "0: 0: 5" storyboard. targetname = "REC" storyboard. targetproperty = "opacity" to = "0"/> </storyboard> </grid. resources>
 

Step 4: process the click events of the two buttons respectively, and call the begin and stop methods of the storyboard to control the playback and stop of the animation.

 
Private void play_click (Object sender, routedeventargs e) {This. STD. Begin ();} private void stop_click (Object sender, routedeventargs e) {This. STD. Stop ();}
 

 

Okay. Run it now.

 

 

 

 

Isn't it good enough? Let's do another one. How can we change the width of an elliptic from 20 to 420 in 3 seconds.

View XAMLCode.

<Grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <grid. rowdefinitions> <rowdefinition/> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <ellipse grid. row = "0" Height = "325" name = "ell" width = "15" fill = "darkorange"/> <stackpanel grid. row = "1" orientation = "horizontal"> <button content = "play" Click = "onplay"/> <button content = "stop" Click = "onstop"/> </stackpanel> <grid. resources> <storyboard X: Name = "STD"> <doubleanimation duration = "0: 0: 3" storyboard. targetname = "ell" storyboard. targetproperty = "width" from = "20" to = "420"/> </storyboard> </grid. resources> </GRID>

 

Background code:

 
Private void onplay (Object sender, routedeventargs e) {This. STD. Begin ();} private void onstop (Object sender, routedeventargs e) {This. STD. Stop ();}
 

 

Check the running effect.