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

　Silverlight的基礎動畫包括偏移、旋轉、縮放、傾斜和翻轉動畫，這些基礎動畫毫無疑問是在Silverlight中使用得最多的動畫效果，其使用也是非常簡單的。相信看過上一篇《偏移動畫（TranslateTransform）》文章的朋友大多數對Silverlight & Blend動畫設計已經産生了莫大的興趣，本篇将繼續介紹Silverlight中的基礎動畫之旋轉動畫（RotateTransform）。

　　所謂旋轉動畫（RotateTransform）也就是一個元素以一個坐标點為旋轉中心點旋轉，在使用旋轉動畫（RotateTransform）的時候需要注意的有兩點：旋轉中心點（Center）和旋轉角度(Angle)。同樣當我們設計好動畫元素後要為其建立動畫效果，首先得添加動畫容器時間線（Storyboard），直接在Blend設計界面既可完成該操作。如下圖所示：

　　　　　　　　

　　當動畫容器時間線建立好後，隻需要選中需要進行建立動畫的元素，然後再屬性面闆下進行可視化屬性設定就可以完成動畫的建立，轉到“轉換”屬性面闆，然後選擇“旋轉”，可以看到如下圖所示的屬性設定面闆。

　　如上圖示，将動畫旋轉角度(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,現在運作動畫的效果則如下截圖：

　　　　　　　　　　

　　這樣的效果貌似不好看，我們可以為其他加入背景圖檔進行裝飾，根據背景圖檔進行調整适當的位置、元素顔色、形狀等，以更為真實的效果呈現在使用者面前。具體的調整過程這裡就不作過多的介紹，給個上了背景的截圖示範下吧：

本文轉自 beniao 51CTO部落格，原文連結：http://blog.51cto.com/beniao/303125，如需轉載請自行聯系原作者