WPF中的動畫——（六）演示圖板
前面所介紹的都是單一的動畫，它只能修改單一屬性。有的時候，我們需要將一組動畫一起進行，對於一個按鈕，我們可能有如下需求：
- 選擇該按鈕時，該按鈕增大並更改顏色。
- 單擊該按鈕時，該按鈕縮小並恢復其原始大小。
- 該按鈕變成禁用時，縮小且不透明度縮減到 50%。
每個操作都同時對應進行著兩個動畫，此時用我們就需要用到TimelineGroup了，前文介紹TimeLine的時候已經介紹過它了，它可以將多個TimeLine封裝成一個統一調度。但TimeLine是一個抽象基類，我們通常使用的是它的子類演示圖板(Storyboard)。
演示圖板(Storyboard) 是一種為其所包含的時間線提供目標信息的容器時間線。 演示圖板可以包含任意類型的 Timeline，包括其他容器時間線和動畫。
var widthAnimation = new DoubleAnimation() { To = 250, FillBehavior = FillBehavior.Stop };
var opacityAnimation = new
DoubleAnimation() { From = 1, To = 0, FillBehavior = FillBehavior.Stop };
var storyBoard = new
Storyboard() { Duration = TimeSpan.FromSeconds(2) };
storyBoard.Children.Add(widthAnimation);
storyBoard.Children.Add(opacityAnimation);
Storyboard.SetTargetProperty(widthAnimation, new
PropertyPath("Width"));
Storyboard.SetTargetProperty(opacityAnimation, new
PropertyPath("Opacity"));
storyBoard.Begin(button);
這個例子簡單的演示了如何使用StoryBoard，由於Storyboard經常使用與XAML，這裏也介紹一下XAML中的寫法：
<Storyboard x:Key="storyBoard">
<DoubleAnimation Storyboard.TargetProperty="Width" To="250" FillBehavior="Stop"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" FillBehavior="Stop"/>
</Storyboard>
使用方式如下：
var storyBoard = this.FindResource("storyBoard") as
Storyboard;
storyBoard.Begin(button);
比直接用代碼編寫更加簡單。
兩個附加屬性：
Storyboard.TargetProperty：
由於StoryBoard對應著多個屬性的變化，因此不能用UIElement.BeginAnimation的方式執行，而采用Storyboard.TargetProperty附加屬性來寫入。
Storyboard.TargetName：
Storyboard也可以通知控制多個對象，此時的對象就不能直接在Storyboard.Begin函數中執行，而是通過Storyboard.TargetProperty附加屬性寫入。
<Storyboard x:Key="storyBoard">
<DoubleAnimationStoryboard.TargetName="button" Storyboard.TargetProperty="Width" To="250" FillBehavior="Stop"/>
<DoubleAnimationStoryboard.TargetName="button" Storyboard.TargetProperty="Opacity" From="1" To="0" FillBehavior="Stop"/>
</Storyboard>
這種方式下，執行storyboard的時候也不用在傳入對象了
var storyBoard = this.FindResource("storyBoard") as
Storyboard;
storyBoard.Begin();
控制Storyboard
前面已經介紹過，Storyboard 像Clock方法一樣，直接封裝了Begin、 Seek、 Stop、 Pause、Resume、Remove等幾個函數，在代碼中可以直接使用。另外，在XAML中，Storyboard是可以直接在觸發器中（EventTrigger、DataTrigger、Trigger）使用的，如下就是一個簡單的例子：
<Window.Resources>
<Storyboard x:Key="storyBoard">
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="Width" To="250" FillBehavior="Stop"/>
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="Opacity" From="1" To="0" FillBehavior="Stop"/>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded" >
<BeginStoryboard Storyboard="{StaticResource storyBoard}" />
</EventTrigger>
</Window.Triggers>
可以看到，這兒用到了一個系統提供的名為BeginStoryboard的TriggerAction，同樣也提供了SeekStoryboard、 StopStoryboard、 PauseStoryboard、ResumeStoryboard、RemoveStoryboard等幾個TriggerAction。一個稍微復雜點的例子如下：
<Window.Resources>
<Storyboard x:Key="storyBoard">
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="Width" To="250" FillBehavior="Stop"/>
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="Opacity" From="1" To="0" FillBehavior="Stop"/>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="MouseEnter" >
<BeginStoryboard Name="storyBegin" Storyboard="{StaticResource storyBoard}" />
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave" >
<RemoveStoryboard
BeginStoryboardName="storyBegin" />
</EventTrigger>
</Window.Triggers>
另外，微軟提供的Interaction也能在XAML中執行Storyboard的控制：
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ControlStoryboardAction Storyboard="{StaticResource storyBoard}" ControlStoryboardOption="Play" />
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ControlStoryboardAction Storyboard="{StaticResource storyBoard}" ControlStoryboardOption="Stop" />
</i:EventTrigger>
</i:Interaction.Triggers>
由於微軟的Interaction擴展在MVVM模式下非常有用，擴展性也非常好，這種方式很多時候更方便。關於Interaction的使用方式，請參看園子裏的這篇文章：Interaction triggers in WPF
參考資料：
演示圖板概述
WPF中的動畫——（六）演示圖板