Silverlight & Blend Animation Design series four: Tilt Animation (SkewTransform)

The tilt Change Animation (skewtransform) in Silverlight enables the horizontal, vertical tilt-change animation of an object element. Our real-life tilt change effect is very common, such as the paper effect of the book, door open when the opening of the Image tilt transformation. It is very easy to animate an oblique change in Silverlight, which is even better if you use the powerful design tools of blend.

The effect of the tilt effect is really pretty, and there are two points to be aware of when using the tilt transformation: the Tilt Direction and the Tilt Center point . You can tilt the x-or y-coordinate direction of a point for the center of the tilt, as follows a simple example of varying degrees of tilt in the default center store:

<grid x:name= "LayoutRoot" background= "White" margin= ">"
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<image source= "11.jpg" grid.row= "0" grid.column= "0"/>
<image source= "11.jpg" grid.row= "0" grid.column= "1" >
<Image.RenderTransform>
<skewtransform anglex= "angley=" 0 "></SkewTransform>
</Image.RenderTransform>
</Image>
<image source= "11.jpg" grid.row= "1" grid.column= "0" >
<Image.RenderTransform>
<skewtransform anglex= "0" angley= "-5" ></SkewTransform>
</Image.RenderTransform>
</Image>
<image source= "11.jpg" grid.row= "1" grid.column= "1" >
<Image.RenderTransform>
<skewtransform anglex= "angley=" ></SkewTransform>
</Image.RenderTransform>
</Image>
</Grid>

　　　　　　　　

If you use blend to design the transformation animation of the tilt effect is very simple, just need to set the relevant implementation in the Properties panel to complete the design of the entire tilt transformation animation, the following to draw a door and set the effect of opening the door, the opening of the door when the appearance of the effect is to tilt the effect of transformation to achieve:

Looking at a XAML file, you can see that blend generates the following code for opening the door, and it's important to note that the Tilt Center point is applied to a direction (X) switch, and that the tilt effect of the rendering is the tilt transformation in the y-coordinate direction. As shown, the y-coordinate direction of tilt-17 is set, which creates a tilt effect in the horizontal direction of the door.

<storyboard x:name= "Storyboard1" >
<pointanimationusingkeyframes begintime= "00:00:00"
Storyboard.targetname= "Door" storyboard.targetproperty= "(Uielement.rendertransformorigin)" >
<easingpointkeyframe keytime= "00:00:00" value= "1,0.5"/>
<easingpointkeyframe keytime= "00:00:03" value= "1,0.5"/>
</PointAnimationUsingKeyFrames>
<doubleanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "door"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [1]. (Skewtransform.angley) ">
<easingdoublekeyframe keytime= "00:00:03" value= " -17"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

　　　　

Silverlight & Blend Animation Design series four: Tilt Animation (SkewTransform)