Windows Phone開發之路(9) Silverlight之動畫

　　動畫(Animation)是Silverlight(以下簡稱SL)的一項關鍵特性，因為它提供了一些炫目的效果，而這些是那些基於伺服器編程架構所無法仿效的(比如ASP.NET)。在SL中，動畫可以實現很多效果，比如當滑鼠經過時表徵圖變大，Logo旋轉，文本滾入視圖等，更可以設計基於瀏覽器的遊戲。

　　動畫是SL模型的核心部分，這意味著你不需要使用計時器和事件處理代碼來實現它們，而是通過使用少數幾個類來聲明並配置它們，從而不需要編寫一行C#代碼就能創造動畫效果。

動畫基礎知識

　　SL動畫是一個精簡版的WPF動畫系統，為了更深入地理解SL動畫，需要瞭解以下關鍵原則。

　　1,SL執行以時間為基礎的動畫。需要設定初始狀態，最終狀態和動畫期間，SL計算出幀速。
　　2,SL使用基於屬性的動畫模型。
　　3,要賦予動畫一個屬性，需要使用一個支援這種資料類型的動畫類。例如，如果你想要修改其資料類型為Double類型的屬性，必須使用DoubleAnimation類。如果想要修改Canvas的背景色，就需要使用ColorAnimation類。

　　SL中的動畫類比較少，只有有限的資料類型可以使用。目前可以用來修改動畫屬性的資料類型有以下幾種：double,object,Color和Print。

示範圖板

　　示範圖板用來管理動畫的時間軸，StoryBoard類提供的最準系統是使用TargetProperty和TargetName屬性來指定特定的屬性和特定的元素。簡言之，示範圖板是動畫和要設定的動畫屬性之間的橋樑。
　　下面的XAML代碼定義了一個示範圖板。它為一個名為cmdGrow的按鈕的Width屬性賦予DoubleAnimation類：

<Storyboard x:Name="storyboard">
            <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" From="160" To="300" Duration="0:0:5">
            </DoubleAnimation>
</Storyboard>

建立動畫

　　建立動畫是一個多步的過程。需要建立3個不同的要素，分別是：執行動畫的動畫對象，管理動畫的示範圖板和啟動示範圖板的事件觸發程序。下面是一個簡單的樣本來詳細說明建立一個動畫的過程。
　　XAML代碼：

<UserControl x:Class="Silverlight_Layout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="150" d:DesignWidth="300">

    <!--定義動畫對象DoubleAnimation和示範圖板Storyboard-->
    <UserControl.Resources>
        <Storyboard x:Name="storyboard">
            <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" From="160" To="300" Duration="0:0:5">
            </DoubleAnimation>
        </Storyboard>
    </UserControl.Resources>

    <!--定義一個按鈕並添加Click事件-->
    <Grid>
        <Button Name="cmdGrow" Content="This button grows" Width="160" Height="40" Click="cmdGrow_Click"/>
    </Grid>
</UserControl>

　　C#代碼：

public partial class MainPage : UserControl
    {
public MainPage()
        {
            InitializeComponent();
        }

private void cmdGrow_Click(object sender, RoutedEventArgs e)//處理cmdGrow按鈕的Click事件
        {
            storyboard.Begin();//調用Begin()方法啟動與示範圖板關聯的動畫
        }
    }

　　執行效果

   
　　　　　　　　     執行動畫前　　　　　　　　　　　　　　　　　　　　　　　　　　執行動畫後

　　從以上樣本中可以總結出：

　　1,執行動畫的動畫對象為：DoubleAnimatin類對象
　　2,管理動畫的示範圖板為：Storyboard對象
　　3,事件觸發程序為：Click事件

　　以上就是關於Silverlight的動畫的全部內容，雖然這是一個非常簡單的動畫，但是它很好地展示了建立Silverlight動畫的3個要素和建立方法。可以說前面總結了這麼多都是為更好地進行WP開發打基礎，那麼從下一篇開始，我將正式總結關於WP實際開發的內容，希望大家繼續關注，謝謝！