Windows Phone development (41): the next article on Key Frame Animation

You may have discovered that no matter what type of animation, the method of use is basically the same. I don't know if you have summed up the rule? When you find the rule, you will find that the rule can be used for the first to sixth, not to lie to you.

To help you find the rule, let's write two more examples today.

 

I. discreteobjectkeyframe

This is a brief introduction. It is provided to facilitate some large switchover, but it is not omnipotent. Although its target type is object type, the premise is that, like other animations, an animation can only process a certain attribute of an object. Compared with flash, Silverlight is less flexible, but we know that after all, Silverlight was not born for animation purposes. Microsoft launched it for enterprise-level applications. The so-called multimedia support or animation is to provide a better user experience. Do not treat it as a special entertainment.

Well, let's talk about F. Let's start the exercises below. First, you can refer to the following XAML code to complete the foreground layout. Wherever you write it, you can find the grid control as a container. The exercises are also flexible, and I will never have the requirement for hard work.

[HTML]View plaincopyprint?

1. <Grid>
2. <Rectangle X: Name = "REC" margin = "100,200" loaded = "rec_loaded"/>
4. <Grid. Resources>
5. <Storyboard X: Name = "STD">
6. <Objectanimationusingkeyframes
7. Duration = "0: 0"
8. Storyboard. targetname = "REC"
9. Storyboard. targetproperty = "fill"
10. Repeatbehavior = "forever">
11. <Discreteobjectkeyframe keytime = "0: 0">
12. <Discreteobjectkeyframe. value>
13. <Solidcolorbrush color = "blue"/>
14. </Discreteobjectkeyframe. value>
15. </Discreteobjectkeyframe>
16. <Discreteobjectkeyframe keytime = "0: 0">
17. <Discreteobjectkeyframe. value>
18. <Lineargradientbrush startpoint = "0, 0" endpoint = "1, 1">
19. <Gradientstop color = "red" offset = "0"/>
20. <Gradientstop color = "yellow" offset = "0.5"/>
21. <Gradientstop color = "Purple" offset = "1"/>
22. </Lineargradientbrush>
23. </Discreteobjectkeyframe. value>
24. </Discreteobjectkeyframe>
25. <Discreteobjectkeyframe keytime = "0: 0">
26. <Discreteobjectkeyframe. value>
27. <Radialgradientbrush center = "0.5, 0.5" radiusx = "0.5" radiusy = "0.5">
28. <Gradientstop color = "snow" offset = "0"/>
29. <Gradientstop color = "green" offset = "1"/>
30. </Radialgradientbrush>
31. </Discreteobjectkeyframe. value>
32. </Discreteobjectkeyframe>
33. </Objectanimationusingkeyframes>
34. </Storyboard>
35. </Grid. Resources>
36. </GRID>

In the code above, we define a rec_loaded event handler to start the animation. Therefore, right-click rec_loaded in the code above, select "navigation to event handler" from the pop-up menu, and a event processing method rec_loaded is generated. Then, we start playing the animation here.

[CSHARP]View plaincopyprint?

1. Private void rec_loaded (Object sender, routedeventargs E)
2. {
3. This. STD. Begin ();
4. }

 

Now, please debug and run it.

 

 

 

2. linearpointkeyframe

This is something that everyone must be familiar with. It refers to animation between two points. In the previous example, it is a key frame animation, that is, animation can be generated between N points. When using XAML, it is a child element of pointanimationusingkeyframes.

Refer to the following XAML code to build the UI.

[HTML]View plaincopyprint?

1. <Grid>
2. <Ellipse X: Name = "ell" width = "400" Height = "400" loaded = "ell_loaded">
3. <Ellipse. Fill>
4. <Radialgradientbrush center = "0, 0.5" radiusx = "1" radiusy = "0.5">
5. <Gradientstop color = "gold" offset = "0"/>
6. <Gradientstop color = "red" offset = "1"/>
7. </Radialgradientbrush>
8. </Ellipse. Fill>
9. </Ellipse>
10. <Grid. Resources>
11. <Storyboard X: Name = "STD">
12. <Pointanimationusingkeyframes
13. Duration = "0: 12"
14. Storyboard. targetname = "ell"
15. Storyboard. targetproperty = "(ellipse. Fill). (radialgradientbrush. Center )"
16. Repeatbehavior = "forever">
17. <Linearpointkeyframe keytime = "" value = "0.5, 1"/>
18. <Linearpointkeyframe keytime = "0: 0" value = "1, 0.5"/>
19. <Linearpointkeyframe keytime = "" value = "0.5, 0"/>
20. <Linearpointkeyframe keytime = "0: 0" value = "0, 0.5"/>
21. </Pointanimationusingkeyframes>
22. </Storyboard>
23. </Grid. Resources>
24. </GRID>

Do not forget to start the animation.

[CSHARP]View plaincopyprint?

1. Private void ell_loaded (Object sender, routedeventargs E)
2. {
3. STD. Begin ();
4. }

Okay. Let's see how it works.

 

 

I don't know how you feel through practice. If you have a solid foundation in WPF, I believe you don't have to understand these examples at all. Of course, if you are a beginner, don't be scared by these things. If you really want to learn something, even if you don't understand something in theory (in fact, few people actually understand things in theory, the key is more hands-on and more exercises. You can simply wear your clothes. No one says you have to know how to make them. Is that true? If you don't understand how the farmer's uncle planted the dishes, won't you eat them?