源碼下載：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 | 屬性類型為Double或int的動畫。 |
| PointAnimation | 屬性類型為Point的動畫。 |
| ColorAnimation | 屬性類型為Color的動畫。 |
比如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.多幀動畫
| DoubleAnimationUsingKeyFrames | 全部使用Double類型單幀的動畫。 | |
| － DiscreteDoubleKeyFrame | 馬上變化，沒有漸變效果。如寬度從0到200，直接就變化到200，有一個跳變，一般會感覺比較突兀。 | |
| － LinearDoubleKeyFrame | 變化是線性變化效果，如寬度從0到200，是從0到10，到20，到50，再到200，有一個緩慢變化效果。 | |
| － SplineDoubleKeyFrame | 貝塞爾曲線，具體可以查看貝塞爾曲線的定義，再進行理解。 | |
| － EasingDoubleKeyFrame | 緩動變化效果。 具體請參照博客：http://www.cnblogs.com/xwlyun/archive/2012/09/11/2680579.html | |
| PointAnimationUsingKeyFrames | 全部使用Point類型單幀的動畫。 | |
| ColorAnimationUsingKeyFrames | 全部使用Point類型單幀的動畫。 | |
| ObjectAnimationUsingKeyFrames | 可以使用任意類型單幀的動畫。 | |
所要說明的是，每一種子幀類型都有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.系統主題動畫。
| API | 描述 |
|---|---|
| AddDeleteThemeTransition | 为控件添加或删除子对象或内容的情形提供动画的过渡表现方式。通常，控件是项目容器。 |
| ContentThemeTransition | 为控件的内容更改时的情形提供动画的过渡表现方式。可以在应用 AddDeleteThemeTransition 后再应用它。 |
| EntranceThemeTransition | 为控件第一次显示的情形提供动画的过渡表现方式。 |
| ReorderThemeTransition | 为列表-视图控件项目更改顺序的情形提供动画的过渡表现方式。通常它作为拖放操作的结果出现。不同的控件和主题可能具有不同的动画特征。 |
| RepositionThemeTransition | 为控件更改位置的情形提供动画的过渡表现方式。 |
| API | 描述 |
|---|---|
| DropTargetItemThemeAnimation | 应用到潜在的拖放目标元素的预配置动画。 |
| FadeInThemeAnimation | 控件第一次出现时应用到控件的预配置不透明度动画。 |
| FadeOutThemeAnimation | 控件从 UI 中删除或隐藏时应用到控件的预配置不透明度动画。 |
| PopInThemeAnimation | 控件的弹入组件显示时应用到它们的预配置动画。此动画结合了不透明度和转换。 |
| PopOutThemeAnimation | 控件的弹入组件关闭或删除时应用到它们的预配置动画。此动画结合了不透明度和转换。 |
| RepositionThemeAnimation | 对象重新放置时应用的预配置动画。 |
| SplitCloseThemeAnimation | 使用拆分动画显示目标 UI 的预配置动画。 |
| PointerDownThemeAnimation | 用于用户点击或单击项目或元素操作的预配置动画。 |
| PointerUpThemeAnimation | 在点击一个项目或元素后（指针不再悬停在上面）运行的用户操作预配置动画。 |
| SplitOpenThemeAnimation | 使用拆分动画显示目标 UI 的预配置动画。 |
上述表格從以下博客複製：
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();
}