Windows Phone development (40): Part 1 of Key Frame Animation

I. discretedoublekeyframe

Key Points of discrete Key Frame Animation: Let's take a look at the meaning of "discrete". In fact, you can look at "Xinhua Dictionary", and the meaning of "separation" is similar to that of "scattered. We can explain this as follows: each key frame is a direct transition without animated interpolation. It seems that this understanding is bitter and difficult to understand, so we should start with an instance.

See the following XAMLCodeWrite an example:

<Grid loaded = "ongridloaded"> <rectangle width = "100" Height = "100" fill = "green" verticalignment = "TOP"> <rectangle. rendertransform> <translatetransform X: Name = "TRM"/> </rectangle. rendertransform> </rectangle> <grid. resources> <storyboard X: Name = "STD"> <doubleanimationusingkeyframes duration = "0: 0" repeatbehavior = "15" storyboard. targetname = "TRM" storyboard. targetproperty = "Y"> <discretedoublekeyframe keytime = "" value = "150"/> <discretedoublekeyframe keytime = "" value = "280"/> <discretedoublekeytime = ""value =" 380 "/> </doubleanimationusingkeyframes> </storyboard> </grid. resources> </GRID>

In the C # code in the background, do not remember the startup animation. It will be troublesome if it cannot be moved after running.

 
Private void ongridloaded (Object sender, routedeventargs e) {This. STD. Begin ();}
 

Then you can run it. Pay attention to observe the evolution of the animation.

 

I don't know what you have observed? Do you find that the downward movement of the rectangle is directly leaping, and no transition effect is created between each key, and the corresponding value is jumped directly.

 

 

Ii. discretecolorkeyframe

This is also a discrete Key Frame Animation. We know from the name that it is used for color animation. Let's look at the example.

Please refer to the following XAML code to write a testProgram:

<Grid loaded = "ongridloaded"> <ellipse width = "250" Height = "250"> <ellipse. fill> <solidcolorbrush X: Name = "brush" color = "blue"/> </ellipse. fill> </ellipse> <grid. resources> <storyboard X: Name = "STD"> <coloranimationusingkeyframes duration = "0: 0" repeatbehavior = "20" storyboard. targetname = "brush" storyboard. targetproperty = "color"> <discretecolorkeyframe keytime = "0:0:2" value = "yellow"/> <discretecolorkeyframe keytime = "0:0:5" value = "gray"/> <discretecolorkeytime = "0:7 "value =" red "/> </coloranimationusingkeyframes> </storyboard> </grid. resources> </GRID>

The background code won't be posted, and I know what to write.

Run the command to check the effect.

 

From the effect, we can see that the color changes do not have a smooth transition effect, but the color changes directly when the playing time of the timeline reaches the position of the key frame.

 

 

3. linearcolorkeyframe

The linear key frame is opposite to the discrete animation. A smooth transition effect is created between each key frame to make it look continuous.

Refer to the following XAML code to write a test program.

<Grid loaded = "ongridloaded"> <ellipse width = "300" Height = "300"> <ellipse. fill> <radialgradientbrush X: Name = "rdgradientbrush" center = "0.5, 0.5 "radiusx =" 0.5 "radiusy =" 0.5 "> <gradientstop color =" lightgreen "offset =" 0 "/> <gradientstop color =" darkgreen "offset =" 1 "/> </radialgradientbrush> </ellipse. fill> </ellipse> <grid. resources> <storyboard X: Name = "STD"> <coloranimationusingkeyframes duration = "0: 0" repeatbehavior = "forever" storyboard. targetname = "rdgradientbrush" storyboard. targetproperty = "(radialgradientbrush. gradientstops) [0]. (gradientstop. color) "> <linearcolorkeyframe keytime =" "value =" orange "/> <linearcolorkeyframe keytime =" "value =" white "/> <linearcolorkeyframe keytime =" "value =" pink "/> </coloranimationusingkeyframes> <coloranimationusingkeyframes duration =" 0: 6 "repeatbehavior =" forever "storyboard. targetname = "rdgradientbrush" storyboard. targetproperty = "(radialgradientbrush. gradientstops) [1]. (gradientstop. color) "> <linearcolorkeyframe keytime =" 0: 3 "value =" yellow "/> <linearcolorkeyframe keytime =" 0: 6 "value =" Violet "/> <linearcolorkeyframe keytime =" 0: 0: 7 "value =" seagreen "/> </coloranimationusingkeyframes> </storyboard> </grid. resources> </GRID>

The positive circle on the page is filled with a radial gradient. There are two gradient color points. We will perform linear animation on the colors of these two gradient points, which will produce very beautiful results, as shown in the following figure.