Silverlight & Blend动画设计系列四：倾斜动画（SkewTransform）

Silverlight & Blend动画设计系列四：倾斜动画（SkewTransform）2011-04-20 博客园 BeniaoSilverlight中的倾斜变化动画（SkewTransform）能够实现对象元素的水平、垂直方向的倾斜变化动画效果。我们现实生活中的倾斜变化效果是非常常见的，比如翻书的纸张效果，关门开门的时候门缝图形倾斜变换。在Silverlight中实现一个倾斜变化的动画效果是非常简单的，如果利用Blend这种强大的设计工具来实现那更是锦上添花。

倾斜效果的动画应用效果其实非常好看，使用倾斜变换需要注意的有两点：倾斜方向和倾斜中心点。可以以某点为倾斜中心点进行X或Y坐标方向进行倾斜，如下以默认中心店进行的各种不同程度倾斜的简单示例：

<Grid x:Name="LayoutRoot" Background="White" Margin="20">
     <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="20" 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="20" AngleY="15"></SkewTransform>
         </Image.RenderTransform>
     </Image>
</Grid>