Silverlight & Blend動畫設計系列二：旋轉動畫（RotateTransform）
Silverlight的基礎動畫包括偏移、旋轉、縮放、傾斜和翻轉動畫，這些基礎動畫毫無疑問是在Silverlight中使用得最多的動畫效果，其使用也是非常簡單的。相信看過上一篇《偏移動畫（TranslateTransform）》文章的朋友大多數對Silverlight & Blend動畫設計已經產生了莫大的興趣，本篇將繼續介紹Silverlight中的基礎動畫之旋轉動畫（RotateTransform）。
所謂旋轉動畫（RotateTransform）也就是一個元素以一個坐標點為旋轉中心點旋轉，在使用旋轉動畫（RotateTransform）的時候需要註意的有兩點：旋轉中心點（Center）
當動畫容器時間線創建好後，只需要選中需要進行創建動畫的元素，然後再屬性面板下進行可視化屬性設置就可以完成動畫的創建，轉到“轉換”屬性面板，然後選擇“旋轉”，可以看到如下圖所示的屬性設置面板。
如上圖示，將動畫旋轉角度(Angle)設置為了360，這表示動畫作用元素將以旋轉中心坐標進行旋轉360度。此時切換到XAML編碼視圖可以發現Blend自動生成了如下動畫代碼塊：
<Storyboard x:Name="Storyboard1"><DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="fan"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
執行這個旋轉動畫可以看到效果，名為“fan”的元素將在一秒鐘內旋轉360度。同樣也可以通過編程的方式來動態的創建該旋轉動畫，詳細如下代碼塊：
private void CreateStoryboard(){
//創建動畫容器時間線
Storyboard storyboard = new Storyboard();
//創建旋轉動畫
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.To = 360;
doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 1));
Storyboard.SetTarget(doubleAnimation, fan);
Storyboard.SetTargetProperty(doubleAnimation,
new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"));
storyboard.Children.Add(doubleAnimation);
storyboard.Begin();
}
或許有人會問，旋轉動畫我該怎麽去用，什麽樣的場景適合使用旋轉動畫？其實很多地方都可以使用旋轉動畫，比如遊戲中的地圖場景中的風車，實際上也就是一個旋轉動畫效果，旋轉動畫下面是一條線作為風車的柱子。我們直接在本文的示例項目中加入一條豎線，線的一端對應於旋轉動畫的中心，通過Blend設計後動態生成的XAML編碼如下：
<Canvas Canvas.ZIndex="-1" x:Name="Line"><Path x:Name="path" Stretch="Fill" Stroke="Black" Height="194.494" Width="1" UseLayoutRounding="False"
Canvas.Left="303" Canvas.Top="184" Data="M408,256 L408,449.49417" StrokeThickness="6" Opacity="0.78"
StrokeStartLineCap="Round" StrokeEndLineCap="Round">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBA6161" Offset="0"/>
<GradientStop Color="#FF306C0A" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Canvas>
註意上面設置ZIndex值是為了將線條呈現到旋轉動畫的後面去，這樣給人一種旋轉動畫是在線條的一端不停的選擇，看起就像是一個風車在旋轉一樣，實際上就是一種視覺欺騙，記得我一個做3D遊戲開發的朋友給我說過，3D遊戲裏的大多數效果全都是視覺欺騙，嘎嘎~~~~~~~~~~,OK,現在運行動畫的效果則如下截圖：
這樣的效果貌似不好看，我們可以為其他加入背景圖片進行裝飾，根據背景圖片進行調整適當的位置、元素顏色、形狀等，以更為真實的效果呈現在用戶面前。具體的調整過程這裏就不作過多的介紹，給個上了背景的截圖演示下吧：
Silverlight & Blend動畫設計系列二：旋轉動畫（RotateTransform）