WPF實(shí)現(xiàn)動(dòng)畫效果（七）之演示圖板

更新時(shí)間：2022年06月23日 11:19:14 作者：天方

這篇文章介紹了WPF實(shí)現(xiàn)動(dòng)畫效果之演示圖板，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

WPF動(dòng)畫效果系列

WPF實(shí)現(xiàn)動(dòng)畫效果（一）之基本概念

WPF實(shí)現(xiàn)動(dòng)畫效果（二）之From/To/By 動(dòng)畫

WPF實(shí)現(xiàn)動(dòng)畫效果（三）之時(shí)間線（TimeLine）

WPF實(shí)現(xiàn)動(dòng)畫效果（四）之緩動(dòng)函數(shù)

WPF實(shí)現(xiàn)動(dòng)畫效果（五）之關(guān)鍵幀動(dòng)畫

WPF實(shí)現(xiàn)動(dòng)畫效果（六）之路徑動(dòng)畫

WPF實(shí)現(xiàn)動(dòng)畫效果（七）之演示圖板

正文

前面所介紹的都是單一的動(dòng)畫，它只能修改單一屬性。有的時(shí)候，我們需要將一組動(dòng)畫一起進(jìn)行，對于一個(gè)按鈕，我們可能有如下需求：

選擇該按鈕時(shí)，該按鈕增大并更改顏色。
單擊該按鈕時(shí)，該按鈕縮小并恢復(fù)其原始大小。
該按鈕變成禁用時(shí)，縮小且不透明度縮減到 50%。

每個(gè)操作都同時(shí)對應(yīng)進(jìn)行著兩個(gè)動(dòng)畫，此時(shí)用我們就需要用到TimelineGroup了，前文介紹TimeLine的時(shí)候已經(jīng)介紹過它了，它可以將多個(gè)TimeLine封裝成一個(gè)統(tǒng)一調(diào)度。但TimeLine是一個(gè)抽象基類，我們通常使用的是它的子類演示圖板(Storyboard)。

演示圖板(Storyboard) 是一種為其所包含的時(shí)間線提供目標(biāo)信息的容器時(shí)間線。演示圖板可以包含任意類型的 Timeline，包括其他容器時(shí)間線和動(dòng)畫。

    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);

這個(gè)例子簡單的演示了如何使用StoryBoard，由于Storyboard經(jīng)常使用與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();

控制Storyboard

前面已經(jīng)介紹過，Storyboard 像Clock方法一樣，直接封裝了Begin、 Seek、 Stop、 Pause、Resume、Remove等幾個(gè)函數(shù)，在代碼中可以直接使用。另外，在XAML中，Storyboard是可以直接在觸發(fā)器中（EventTrigger、DataTrigger、Trigger）使用的，如下就是一個(gè)簡單的例子：

    <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>

可以看到，這兒用到了一個(gè)系統(tǒng)提供的名為BeginStoryboard的TriggerAction，同樣也提供了SeekStoryboard、 StopStoryboard、 PauseStoryboard、ResumeStoryboard、RemoveStoryboard等幾個(gè)TriggerAction。一個(gè)稍微復(fù)雜點(diǎn)的例子如下：

    <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中執(zhí)行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擴(kuò)展在MVVM模式下非常有用，擴(kuò)展性也非常好，這種方式很多時(shí)候更方便。關(guān)于Interaction的使用方式，請參看這篇文章：Interaction triggers in WPF