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. The effect of tilt change in our real life is very common, such as the paper effect of turning the book, closing the door when the gate shape tilt transformation. Implementing a tilt-change animation effect in Silverlight is very simple, and it's even better if you use blend's powerful design tool to achieve that.

The effect of the tilt effect is actually very good, with the tilt transformation you need to note that there are two points: Tilt direction and tilt center point. You can tilt a point in the direction of the X or Y coordinate for the tilt center point, following a simple example of the various degrees of tilt that is performed by 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>