圖形 wid onu alt 文件 amp val 設計工具 現實生活

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>

　　　　

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