Windows Phone development (37): coloranimation of Animation

In the previous section, we discussed how to use the double value for animation processing. We know there are many types of animation. Today, I will continue to introduce an animation class-coloranimation.

In fact, it is similar to doubleanimation. After all, an animation is an excessive form of converting a value into another value within a specific period of time. Coloranimation is used for color animation. You only need to pay attention to the following attributes:

 

1. By: Total number of values changed relative to the initial value. This attribute is not easy to understand, so I put it in the first place. To be honest, this color value is really hard to understand. We may wish to use the by attribute of doubleanimation to understand it. The principle is the same. For example, if the width of a button is 200 and I want to animation it and set by to 150, you can guess, what is the final value of an animation? You don't have to guess. Calculate it. Since by represents the total amount of changes, that is, 200 + 150 = ?, I don't need to tell you the result. If you are a primary school student, you should calculate the result.

Okay, let's take another example. For example, if the initial value of a dependency attribute X of Class A is 300, I want to perform animation processing on it. Now I will set by to-100, the final animation value is 300-100. That's enough.

 

2. From: this is the starting value of the animation. For example, if I want the animation effect to change from red to blue, is the from value red? I don't need to give you the answer, you know.

 

3. To: relative to from, it is the value at the animation end. As in the above example, it changes from red to blue, that is, from = red, To = blue.

 

Well, the above content is probably okay. Do not back it up. programming cannot back it up. If you really don't remember it, you can check the document, query the information, and you can't back it up. Do not be misled.

Now we can start working. Come, play music, sing together ......

 

First, create a WP ApplicationProgramProject.

 

Second, this step, nothing, put the following XAMLCodeDo not ask you to perform typing exercises.

 
<Grid> <rectangle margin = "80,150"> <rectangle. fill> <solidcolorbrush X: Name = "SB" color = "green"/> </rectangle. fill> </rectangle> <grid. resources> <storyboard X: Name = "STD"> <coloranimation duration = "" storyboard. targetname = "SB" storyboard. targetproperty = "color" from = "red" to = "blue" repeatbehavior = "forever"/> </storyboard> </grid. resources> </GRID>
 

Repeatbehavior = "forever" is used to enable continuous loop playback of the animation. If you want to repeat three times and set it to three, forever is a permanent repetition.

 

Do not forget to start the animation in the background code.

 
Public mainpage () {initializecomponent (); this. Loaded + = (sender, e) =>{ STD. Begin ();};}
 

 

Now, when you run the application, you will see wonderful things, even better than the secret history of Xi Shi.

 

 

According to my habits, one example is not enough. Do you want to have a better experience? If you want to, continue. If you don't want to, unplug your computer.

 

Next we will make a color animation for the gradient painting fill. The above example is just for the monochrome painting brush. Below we will do the gradient.

<Grid> <ellipse horizontalalignment = "center" verticalalignment = "center" width = "400" Height = "400"> <ellipse. fill> <radialgradientbrush center = "0.5, 0.5" radiusx = "0.5" radiusy = "0.5"> <gradientstop X: name = "g1" color = "yellow" offset = "0"/> <gradientstop X: name = "G2" color = "green" offset = "0.5"/> <gradientstop X: name = "G3" color = "red" offset = "1"/> </radialgradientbrush> </ellipse. fill> </ellipse> <grid. resources> <storyboard X: Name = "STD"> <coloranimation duration = "0: 0: 2" storyboard. targetname = "g1" storyboard. targetproperty = "color" from = "lightblue" to = "green" repeatbehavior = "forever"/> <coloranimation duration = "0: 0: 3" storyboard. targetname = "G2" storyboard. targetproperty = "color" from = "orange" to = "snow" repeatbehavior = "forever"/> <coloranimation duration = "" storyboard. targetname = "G3" storyboard. targetproperty = "color" from = "yellow" to = "red" repeatbehavior = "forever"/> </storyboard> </grid. resources> </GRID>

The background Code cannot be forgotten, or the animation cannot be started.

 
Public page1 () {initializecomponent (); this. Loaded + = (sender, e) =>{ STD. Begin ();};}
 

Now, you can run it to make sure it is better than the above. Believe it or not, and you will run it once.