[Silverlight] clock rotation wait Animation

 

Next, we will teach you how to use Microsoft Expression blend 4 to create this animation.Click to view all images

Step 1: Create a Silverlight project named waitclock

 

Step 2: Adjust the widget size to 160*160 and select a suitable background image.

 

Step 3: Draw the outer ring, set the fill color, and convert the fill color to the resource. Drag two ovans in consecutively, set the margins to 25 and 70, and apply the brush.

Drag a ring to layoutroot and set arcthickness to 13.

Set the gradient brush (...) of the ring. The two points are #70 ffffff #40 ffffff. Then convert this brush to a static resource.

 

Step 4: Use path to draw two pointers. Enter "M0, 0c3, 7, 8, 26c8, 30, 38 0, 40m0, 0c-3, 7-8, 17-8, 26c-8, 30-3, 38," in data ". Set the fill color and layout. For specific parameters, see the image. For data, see path tag syntax.

 

Step 5: Create an animation. Set the center of the two paths to the correct position. Select a path to add a Story version. At this time, press the F6 shortcut key to switch to the animation design mode.

First, set the rotation angle to the current value of the record at the starting point of the time, and then set the rotation angle to 360 at the 1 second time. Click the play button to view the animation with a large pointer rotating for one week.

Similarly, you can set a rotation animation for the second path. The difference is that the time interval is 12 seconds instead of 1 second.

To facilitate differentiation, do not name the two paths bigger and smaller. Name the two story editions big and small respectively.

 

Step 6: Set repeated animation behavior to an unlimited number of times.

 

Step 7: Add a trigger event. Place two controlstoryboardactions on usercontrol and set them to play the big and small animations when triggered by the loaded event.

 

Step 8: complete. Now you can press the F5 shortcut to view the effect in the browser. Is it easy?

 

Full: http://files.cnblogs.com/Aimeast/SLWaitClock.zip