Silverlight: The ultimate strategy of WPF Animation: Baiyun floating, traveling by car (blend 4 Development)

This chapter is a little long, so I divided it into two chapters. This chapter is mainly about preparation. It is about to be an artist. This Chapter does not cover many animation effects, mainly about the use of tools in blend and what effects can be achieved using tools. The next chapter will teach you how to combine these to achieve the animation effect. I will upload the source code, but I will not upload it. Which of the following will tell me the message.

Before I started, I wanted to complain about how to achieve an effect a few days ago. I searched for information online and found the information. However, I gave you one and a bunch of code. Although the Code can be understood, I don't believe you wrote it yourself. I admire you for writing so much code on your own. I think it is very bad. You don't have time to write at least some simple steps. You don't need a picture or a bunch of NIMA code. Who are you looking! Of course, this is also the reason why I wrote the tutorial. I will teach you how to really get in touch with Silverlight and WPF's uidesign. Everyone thinks it's a great help, so that more people can see it.

In other words, those who post code are the most annoying. Our goal is no code, even! By the way, you may find that some websites have good animation effects. You can leave a message and I will help you make a tutorial.

Start our tutorial

1. Open the previous project and create a new usercontrol in the parts folder named Cloud.

2. Select the pen tool to draw the path. First, roughly draw the shape of Yun. I can't see the cloud now. It will be like it later.

3. Select the second pointer on the toolbar, direct section. Press and hold the Alt key, drag the vertex of the path, two dots appear, and then drag the dots to change the radian. (The two points you appear on the vertex are the two points that you control next to the center, and the two points that appear on the path are the two points that control the line ).

You can copy the code to the data instead of drawing your kids shoes.

(M282.5, 0.5c343.389, 0.499996 396.713, 25.4695 426.178, percentile, 62.9694l433.421, 62.6282c436000097, 62.5431 438.79, 62.5 441.5, 62.5c528.209, 62.5 598.5, 106.6 598.5, 161c598. 5,215.4 528.209, 259.5 441.5 259.5, 259.5c411.694, 383.828 254.289 360.09, 254.914 308.595, clerk, 245.044l355.335, 246.73c333.301, 259.5 282.5, 259.5 186.272, clerk, 242.16 155.467, clerk, clerk, 214.20.c146.599, 215.156 139.86, 215.5 133,215.5 c59.8223, 215.5 0.5, 176.325 0.5, C0. 5, 79.6751 59.8223, 40.5 133, 40.5c139.86, 40.5 146.599, 40.8443 153.178, 41.5082l159.024, 42.1976l160.89, 40.6527c191.487, 15.9149 234.658, 0.499996 282.5, 0.5z)

4. Fill the fill with a gradient paint brush on the property panel.

5. Fill stroke with solid color paint brush.

6. Draw a small cloud inside the cloud using the same method.

PATH (m231.5, 0.5c282.862, 0.499999 324.804, 24.8699 327.375, 55.5153l327.381, 55.6152l329.986, 55.7143c371.84, 57.8395 404.5, 75.5127 404.5, 97c404. 5,101.118 403.3, 105.097 401.066, 108.852l400.676, 109.467l402.765, 109.262c408.494, 108.762 414.425, 108.5 420.5, 108.5c469.101, 108.5 508.5, 125.289 508.5, 146c508. 5,166.711 469.101, 183.5 420.5 183.5, 183.5c388.606, 360.674 176.269 345.24, 184.226 293.78, large, 166.146c326.large, 196.5 256,196.5, 196.5 166.369 c207.058, 175.902 158.054, 148.767l157.987, 148.53l157.12, large, 160.424 116.906, 167.5 90.5 167.5, 167.5c40.7944, 0.5 142.428 0.5, 80.5721 40.7944, 111.5c0.5, 55.5 90.5, 55.5 120.647, 55.5c106.033, 57.9484 133.399, 61.4897 135.5, 63.1188l135.78, 60.0015 135.5, 58.5c135.5, 26.4675 178.481, 0.499999 231.5, 0.5z)

7. Gradient fill value. Just change the 100% location.

8. Fill stroke with solid color.

9. Place the two paths in a canvas.

10. Our cloud is finished, and we use the pen tool to draw the cloud. I think it is the basic foundation to do a good job of the art pen tool.

11. There will be slight bumps when the car starts up and down. We will separate this bumpy state into a user-defined control similar to that in Web development of net. Next, let's start making the status of the car and taking material pictures.

12. Create a new images folder in the project and put the image into it.

13. Create a usercontrol in the parts folder and name it car.

14. Set the width and height of layoutroot to 400*200. Drag the image and adjust the position.

15. Create a New stroyboard named Salta. Press F6 to enter the Animation Mode.

16. Set the key frame at 0 s, 3 s, and 5 s.

17. Pull the timeline (the Yellow Line) to 1 s, and change the value of Y to 2 in the transfrom category.

18. change the value of Y to 1 in 1.5 S and S. you may find that the values at 1.5s and 2.5s are originally 1, but you still need to add a key frame here, and you have added a key frame, when the animation arrives here, a transitional effect is required. You can try different effects.

19. Change the value of Y to-1 in 0.35 s and S, and change the value of Y to-2 in S and S.

20. Select Salta and set its repeatbehavior to forever.

21. Click the play button to check the effect.

22. Remember the birds we made in Chapter 1. We also made them into a bird control that would fly away.

23. Create a New usercontrol and rename birdgo. XAML.

24. On behalf of the Code interface, we need to implement some code here. This code is equivalent to introducing a namespace. Here we introduce our project name so that we can call the files in the project.

25. After adding a reference, start calling our previous bird. Check out what we can call after we call local. If you still cannot find it, check the namespace of your project or recompile the project.

26. Return to the design interface, but let the bird fly away.

The birds here will be moved. If you haven't moved it once, you are the property of the previous animation repeatbehavior.

27. Create a New stroyboard named leave.

28. Move the Time Pointer to 1.2s and drag the bird to the top right (outside the visible area ). In this way, you can set any key frame to place the bird in different positions, and the bird will fly in the direction you set. Click the play button to try it out. Is it flying away.

29. Now, I have completed a small piece of content. The following is an animation processing. The effect is that an image grows from a distance and then becomes smaller, generating a visual effect from a distance. This effect is displayed in the image, and many are used in the pop-up box. You 'd better find an image with a transparent background. I drew it here.

30. Create a New usercontrol named logo.

31. Just put an image in the canvas. My canvas is what I drew. Wrap two layers of canvas.

32. Create a New stroyboard. Name it "Come.

33. Select the outermost canvas to set the key frame at 0 s, and then change the scale attribute of the transform category to 0.

34. Drag the Time Pointer to 1 s, and change the scale attribute of the transform category to 0.8 (the proper size you think ).

35. Set the Key Frame in 7 s. (1s-7s is the screen display time)

36. Drag the Time Pointer to 8 s and modify the opacity value.

37. Press the keys to view the effect.

At this point, our preparation is almost done. Next we will put all of these in mainpage. However, this is the content of the next chapter. In the next chapter, we will combine all the components to form a complete animation.

Let's look forward to the next chapter. You may find many suggestions.

Our goal is no code, even!

Http://files.cnblogs.com/WWLB/Animals.zip