Silverlight & Blend Animation Design Series II: Rotational animation (RotateTransform)

The base animations for Silverlight include offset, rotate, scale, tilt, and flip animations, which are undoubtedly the most animated effects used in Silverlight, and are very simple to use. I believe that most of the friends who have read the article " offset Animation" (TranslateTransform)have had a great interest in the design of Silverlight & blend animation. This article continues with the rotation animation (rotatetransform) of the underlying animation in Silverlight.

The so-called rotational animation (RotateTransform) is an element that rotates at a coordinate point for the center point of rotation, and there are two points to note when using the Rotate animation (rotatetransform): Center of rotation and Rotation angle (Angle). Also, once we've designed the animated elements to animate them, we first have to add the Animation container timeline (Storyboard), which can be done directly in the blend design interface. As shown in the following:

　　　　　　　　

When the animation container timeline is created, simply select the element that you want to animate, and then make the Visual property settings under the Properties panel to finish creating the animation, go to the Transform Properties panel, and then select Rotate to see the property settings panel as shown.

　　　　　　　　

As shown, the animation rotation angle (Angle) is set to 360, which means that the animation action element rotates 360 degrees with the center of rotation coordinates. Switching to XAML encoding view now shows that blend automatically generates the following animation code block:

<storyboard x:name= "Storyboard1" >
<doubleanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Fan"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [2]. (Rotatetransform.angle) ">
<easingdoublekeyframe keytime= "00:00:01" value= "/>"
</DoubleAnimationUsingKeyFrames>
</Storyboard>

Perform this rotation animation to see the effect, the element named "fan" will rotate 360 degrees in a second. It is also possible to dynamically create the rotation animation programmatically, with the following code blocks:

private void Createstoryboard ()
{
Create animation container Timeline
Storyboard Storyboard = new Storyboard ();
Create a rotation animation
DoubleAnimation doubleanimation = new DoubleAnimation ();
doubleanimation.to = 360;
Doubleanimation.duration = new Duration (new TimeSpan (0, 0, 1));
Storyboard.settarget (DoubleAnimation, fan);
Storyboard.settargetproperty (DoubleAnimation,
New PropertyPath ("(Uielement.rendertransform)." ( TransformGroup.Children) [2]. (Rotatetransform.angle) "));
Storyboard. Children.add (DoubleAnimation);

Storyboard. Begin ();
}

　　　　　　　　

Some people may ask, how do I use the rotation animation, what kind of scene is suitable for using rotation animation? In fact, many places can use rotary animation, such as the game in the map scene of the windmill, in fact, is a rotating animation effect, rotating animation below is a line as a windmill pillar. We add a vertical bar directly to the example project in this article, where one end of the line corresponds to the center of the rotation animation, and the dynamically generated XAML code after the blend is designed as follows:

<canvas canvas.zindex= "-1" x:name= "line" >
<path x:name= "Path" stretch= "Fill" stroke= "Black" height= "194.494" width= "1" uselayoutrounding= "False"
canvas.left= "303" canvas.top= "184" data= "m408,256 l408,449.49417" strokethickness= "6" opacity= "0.78"
strokestartlinecap= "Round" strokeendlinecap= "Round" >
<Path.Fill>
<lineargradientbrush endpoint= "0.5,1" startpoint= "0.5,0" >
<gradientstop color= "#FFBA6161" offset= "0"/>
<gradientstop color= "#FF306C0A" offset= "1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Canvas>

Note that the above setting the ZIndex value is to render the line to the back of the rotation animation, so that a rotation of the animation is at one end of the line constantly selected, look like a windmill in the rotation, is actually a kind of visual deception, I remember a 3D game development friend told me, Most of the effects in 3D games are visual deception, Quack ~~~~~~~~~~,ok, and now the effect of running animations is as follows:

　　　　　　　　　　

This effect seems to be not good-looking, we can add the background image for other decoration, according to the background image to adjust the appropriate position, element color, shape, etc., with more realistic effect presented in front of the user. The specific adjustment process here does not make too much introduction, give a background of the demonstration under it:

　　　　　　　　

Silverlight & Blend Animation Design Series II: Rotational animation (RotateTransform)