源碼下載：http://yunpan.cn/cFJR5zcMNtBq6  访问密码 ac7a

使用Storyboard可以實現動畫效果。

1.仿照WINDOWS系統安裝時的等待畫面，不停更換背景顏色

        <Button x:Name="testBtn" Content="Button" HorizontalAlignment="Left" Margin="62,29,0,0" VerticalAlignment="Top" Height="53" Width="234">
            <Button.Background>
                <SolidColorBrush x:Name="testBtnBack" Color="Black">
                </SolidColorBrush>
            </Button.Background>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">－－－－－控件一加載就跑一個動畫
                    <BeginStoryboard>－－－－－－－－－－－表示開始執行
                        <Storyboard －－－－－真正的動畫板　　　　　　　　　　　　　　　　RepeatBehavior="Forever"－－－－－－－－無限循環 　　　　　　　　　　　　　　　 AutoReverse="True"－－－－－－－－－－－－自動反向變換，即動畫從A->B，後再B->A。　　　　　　　　　　　　　　　　>
                            <ColorAnimation
                                From="Red"－－－－－－－－－－－－－－－－－－－－－－－－－－－－－｜從紅色變到綠色，可以使用Binding, Converter分配一個隨機顏色
                                To="Blue" －－－－－－－－－－－－－－－－－－－－－－－－－－－－－｜
                                Duration="0:0:2" －－－－－－－－－－－－－－－－－－－－－－－－－變換時間，H:M:S，可以使用小數。
                                Storyboard.TargetName="testBtnBack" －－－－－－－－－－－－－－這裡是應用於哪個控件
                                Storyboard.TargetProperty="Color"   －－－－－－－－－－－－－－屬性
                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

以上這段XAML代碼就實現了背景顏色從RED變化到BLUE的簡單動畫。

這個例子中，我們使用了單幀動畫 ColorAnimation ，Color 代表是屬性的類型，如上圖中，背景顏色屬性類型為Color，Animation代表動畫，所以這個東東就表示是一個顏色變化的單幀動畫。

2.單幀動畫

下面列出單幀動畫：

比如DoubleAnimation，我們可以改變字體大小，改變寬度，高度等等。

所以要改變控件的位置，XAML不支持使用Margin.Top這樣的屬性。必須使用RenderTransform。舉例說明，實現一個球上下彈動的效果：

        <Ellipse x:Name="ball" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="52" Margin="45,226,0,0" Stroke="Black" VerticalAlignment="Top" Width="52" RenderTransformOrigin="0.5,0.5">
            <Ellipse.RenderTransform>－－－－－－－－－－－－－這裡要使用Render
                <TranslateTransform />
            </Ellipse.RenderTransform>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames ------多幀，稍後討論。
                                Storyboard.TargetName="ball"
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"－－－－－－改變Y的位置。
                                Duration="0:0:2"
                                RepeatBehavior="Forever"
                                EnableDependentAnimation="True"－－－－－－這個玩意一定要設置為真。。
                               AutoReverse="True" >
                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="240"> －－－－－這種屬性多幀類型，稍後討論。
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <BackEase EasingMode="EaseOut" />
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>

                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>

3.多幀動畫

所要說明的是，每一種子幀類型都有4種，即Discrete、Linear、Spline、Easing。如，PointAnimationUsingKeyFrames就會有DiscretePointKeyFrame、LinearPointKeyFrame、SplinePointKeyFrame、EasingPointKeyFrame。

而ObjectAnimationUsingKeyFrames只能使用DeiscreteObjectKeyFrame，以及系統自定義主題動畫。待會再介紹這個東東。

DeiscreteObjectKeyFrame這個玩意可以使用任意類型，即不局限於double、color、point，但是你也看到了，它是使用Deiscrete，所以它只能立即改變。

每一個子幀都有 KeyTime、Value兩個屬性。

KeyTime即為顯示該幀的時間，Value即在DoubleAnimationUsingKeyFrames中設定的屬性的值。

好了，我寫了一個BUTTON，可以任意跳轉位置，而且可以轉換長度：

<Button x:Name="widthButton" Content="Button" HorizontalAlignment="Left" Height="100" Margin="251,413,0,0" VerticalAlignment="Top" Width="124">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Duration="0:0:2" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="widthButton" Storyboard.TargetProperty="Width">
                                <LinearDoubleKeyFrame KeyTime="0" Value="100" />
                                <LinearDoubleKeyFrame KeyTime="0:0:1" Value="200" />
                                <LinearDoubleKeyFrame KeyTime="0:0:2" Value="300" />
                            </DoubleAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames EnableDependentAnimation="True" Duration="0:0:9" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="widthButton" Storyboard.TargetProperty="Margin">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0,100,0,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="100,100,0,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="100,100,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:3" Value="0,200,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:4" Value="300,100,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:5" Value="0,400,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:6" Value="10,400,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:7" Value="90,160,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:8" Value="28,10,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:09" Value="244,100,0,0" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

4.系統主題動畫。

上述表格從以下博客複製：

http://www.cnblogs.com/hebeiDGL/archive/2012/10/27/2742293.html

比如為GridView添加添加、刪除元素的動畫：

<GridView>
            <GridView.Items>
                <AddDeleteThemeTransition />
            </GridView.Items>
</GridView>

為一個按鈕添加一個進入的動畫：

                            <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="69" Margin="-13,93,0,-117" VerticalAlignment="Top" Width="115">
                                <Button.Transitions>
                                    <TransitionCollection>
                                        <EntranceThemeTransition FromHorizontalOffset="500" FromVerticalOffset="500"  />
                                    </TransitionCollection>
                                </Button.Transitions>
                            </Button>

5.代碼控制動畫的播放與停止

上面介紹的都是自動播放的動畫，實際上我們可以手動開始、停止動畫。

我寫了一個單擊變化長度的動畫：

        <Grid.Resources>
            <Storyboard   x:Name="framesBoard"> －－－－標識一個名字進行操作
                <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="frames"
                        Storyboard.TargetProperty="Width"
                        Duration="0:0:2"
                        EnableDependentAnimation="True"
                        >
                    <LinearDoubleKeyFrame KeyTime="0:0:2" Value="500" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>

        private void frames_Click(object sender, RoutedEventArgs e)
        {
            framesBoard.Begin();
        }