Silverlight & Blend Animation Design Series 2: RotateTransform)

Silverlight basic animations include offset, rotation, scaling, tilt, and flip animations, which are undoubtedly the most used animation effects in Silverlight, and are also very simple to use. I believe that most of my friends who have read the previous article "TranslateTransform" are interested in Silverlight & Blend animation design, this article will continue to introduce the basic animation RotateTransform in Silverlight ).

 

The so-called RotateTransform is an element that rotates with a coordinate point as the center point. When using the RotateTransform, you must pay attention to the following two points:Center)AndAngle). Similarly, to create an animation effect for an animation element, you must first add the animation container timeline (Storyboard) and directly perform this operation on the Blend design interface. As shown in:

　　　　　　　　

 

After the timeline of the animation container is created, you only need to select the elements to create the animation, and then set the visual attributes under the attribute panel to create the animation, go to the "convert" Property panel and select "Rotate". The property settings panel shown in is displayed.

　　　　　　　　

 

As shown in, the animation rotation Angle (Angle) is set to 360, which means that the animation element will rotate 360 degrees at the center of the rotation. Switch to the XAML encoding view and you will find that Blend automatically generates the following animated code blocks:

<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 = "360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

 

Execute this rotation animation to see the effect. The element named "fan" will rotate 360 degrees in one second. You can also create the rotation animation dynamically by programming. The detailed code block is as follows:

Private void CreateStoryboard ()
{
// Create an 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 may ask how to use a rotation animation. What scenarios are suitable for rotation animation? In fact, rotation animation can be used in many places. For example, the windmill in the map scene in the game is actually a rotation animation effect. A line below the rotation animation is used as the pillar of the windmill. We add a vertical line directly to the example project in this article. one end of the line corresponds to the center of the rotating animation. The dynamic generated XAML encoding after the Blend design is as follows:

 

<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 ZIndex value above is set to render the line behind the rotation animation, so that a rotation animation is a constant choice at one end of the online bar, it seems like a windmill is spinning, but it is actually a kind of visual deception. I remember a friend of mine who developed 3D games told me that most of the effects in 3D games are all visual spoofing, ga ~~~~~~~~~~, OK. The animation effect is as follows:

　　　　　　　　　　

 

This effect does not seem easy to see. We can add background images for decoration and adjust the appropriate position, element color, and shape based on the background image, in front of the user with a more real effect. The specific adjustment process is not described here. Let's give a demonstration of the background:

　　　　　　　　

 

Recommended resources:

MSDN: http://msdn.microsoft.com/zh-cn/library/cc189090 (VS.95). aspx

Silverlight & Blend Animation Design Series 1: Offset animation (TranslateTransform)

Function Silverlight 3 Animation-the sample material used in this article has been selected from this book

 

Copyright description

This article is an original article. You are welcome to repost it and indicate the source of the Article. Its copyright belongs to the author and the blog Park.

Author: Beniao

Article Source: http://beniao.cnblogs.com/or http://www.cnblogs.com/