WPF中的動畫——（六）示範圖闆

原文: 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.TargetProperty：

由于StoryBoard對應着多個屬性的變化，是以不能用UIElement.BeginAnimation的方式執行，而采用Storyboard.TargetProperty附加屬性來寫入。

Storyboard.TargetName：

Storyboard也可以通知控制多個對象，此時的對象就不能直接在Storyboard.Begin函數中執行，而是通過Storyboard.TargetProperty附加屬性寫入。

        <DoubleAnimationStoryboard.TargetName="button" Storyboard.TargetProperty="Width" To="250" FillBehavior="Stop"/>

        <DoubleAnimationStoryboard.TargetName="button" Storyboard.TargetProperty="Opacity" From="1" To="0" FillBehavior="Stop"/>

這種方式下，執行storyboard的時候也不用在傳入對象了

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。一個稍微複雜點的例子如下：

        <EventTrigger RoutedEvent="MouseEnter" >

            <BeginStoryboard Name="storyBegin" Storyboard="{StaticResource storyBoard}" />

        <EventTrigger RoutedEvent="MouseLeave" >

            <RemoveStoryboard

BeginStoryboardName="storyBegin" />

另外，微軟提供的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:Interaction.Triggers>

由于微軟的Interaction擴充在MVVM模式下非常有用，擴充性也非常好，這種方式很多時候更友善。關于Interaction的使用方式，請參看園子裡的這篇文章：

Interaction triggers in WPF

參考資料：

示範圖闆概述