Silverlight & Blend動畫設計系列四：傾斜動畫（SkewTransform）

　　Silverlight中的傾斜變化動畫（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>

 　　　　　　　　

　　如果使用Blend來設計傾斜效果的變換動畫就非常簡單了，只需要在屬性面板裡設定相關的實現就可以完成整個傾斜變換動畫的設計，如下繪製了一扇門並為其設定開門的效果，開門的時候門縫間的呈現效果就是以傾斜變換的效果實現的：

　　　　　　　　 

 

　　查看XAML檔案可以發現，Blend產生了如下代碼，用於實現開門的效果，需要注意的是這裡應用到了傾斜中心點，們是朝一個方向（X）開關，其呈現的傾斜效果就是Y座標方向的傾斜變換。如所示，設定了Y座標方向傾斜-17，既形成門向水平下方向傾斜效果。

 

<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>

 

　　　　

 

推薦資源：

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

　　MSDN:http://msdn.microsoft.com/zh-cn/system.windows.media.skewtransform(de-de).aspx

　　Silverlight & Blend動畫設計系列一：位移動畫（TranslateTransform）

　　Silverlight & Blend動畫設計系列二：旋轉動畫（RotateTransform）

　　Silverlight & Blend動畫設計系列三：縮放動畫（ScaleTransform）

 　 《Function Silverlight 3 Animation》----本篇中使用的樣本素材選自此書

 

著作權說明

  本文屬原創文章，歡迎轉載且註明文章出處，其著作權歸作者和部落格園共有。  

  作      者：Beniao

 文章出處：http://beniao.cnblogs.com/  或  http://www.cnblogs.com/