WPF动画的控制播

到目前为止，已经在事件触发器中使用了一个动作，加载动画的BeginStoryboard动作，然而，一旦创建故事版，就可以使用其他动作控制故事板， 这些动作类都继承自ControllableStoryboardAction类，控制故事版的主要类如下：

PauseStoryboard：停止播放动画并且保持当前位置；

ResumeStoryboard：恢复播放暂停的动画；

StopStoryboard：停止播放动画，并将动画时钟重新设置到开始位置。

SeekStoryboard：跳到动画时间线中的特定位置，如果当前动画正在播放，就继续从新位置播放。如果当前动画是暂停的，就继续保持暂停。

SetStoryboardSpeedRatio：改变整个故事板的SpeedRatio属性值。

SkipStoryboardToFill： 将故事板移动到时间线的终点。FillBehavior属性设置为HoldEnd，动画继续保持最后的值。

RemoveStoryboard： 移除故事板，停止所有正在运行的动画，并将属性返回为原来的、最后一次设置的数值。

 

示例：

首先先搭建好布局样式：

使用Grid布局元素，定义2行，在第二行中定义6列， 每列代表一个动画的运行效果。

<Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="3*"/>

            <RowDefinition/>

        </Grid.RowDefinitions>

        <Image Name="img" Source="Images\2018-07-02.png"/>

        <Grid Grid.Row="1">

            <Grid.ColumnDefinitions>

                <ColumnDefinition/>

                <ColumnDefinition/>

                <ColumnDefinition/>

                <ColumnDefinition/>

                <ColumnDefinition/>

                <ColumnDefinition/>

            </Grid.ColumnDefinitions>

            <Button Name="btn_start" Content="开始" />

            <Button Name="btn_pause" Content="暂停" Grid.Column="1" />

            <Button Name="btn_resume" Content="恢复" Grid.Column="2"/>

            <Button Name="btn_end" Content="结束" Grid.Column="3"/>

            <Button Name="btn_stop" Content="停止" Grid.Column="4"/>

            <Button Name="btn_remove" Content="移除" Grid.Column="5" />

        </Grid>

 </Grid>

 

接着定义(按钮的)资源样式：

<Window.Resources>

        <Style TargetType="Button">

            <Setter Property="Margin" Value="10"/>

            <Setter Property="FontSize" Value="25"/>

            <Setter Property="FontFamily" Value="楷体"/>

        </Style>

 </Window.Resources>

 

实现动画，定义触发器：

  <Window.Triggers>

        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_start" >

            <BeginStoryboard Name="story"  >

                <!--CurrentTimeInvalidated:动画时钟已经向前移动了一个步长，正在更改动画。当动画开始、停止或结束时也会引发该事件。-->

                <Storyboard TargetName="img" TargetProperty="Opacity" CurrentTimeInvalidated="Storyboard_CurrentTimeInvalidated" Completed="Storyboard_Completed">

                    <DoubleAnimation From="1" To="0" Duration="0:0:6"  AutoReverse="True" />

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger>

       

        <!--暂停动画：将动画暂停，保持在暂停时的时间-->

        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_pause">

            <PauseStoryboard BeginStoryboardName="story"/>

        </EventTrigger>

       

        <!--恢复动画：恢复所暂停的动画 -->

        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_resume">

            <ResumeStoryboard BeginStoryboardName="story"/>

        </EventTrigger>

 

        <!--结束动画：将故事板移动到时间线的终点-->

        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_end">

            <SkipStoryboardToFill BeginStoryboardName="story"/>

        </EventTrigger>

       

        <!--停止动画：将故事版时间线重新设置到开始位置-->

        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_stop">

            <StopStoryboard BeginStoryboardName="story"/>

        </EventTrigger>

       

        <!--移除动画：将所有动画移除-->

        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_remove">

            <RemoveStoryboard BeginStoryboardName="story"/>

        </EventTrigger>

       

    </Window.Triggers>

<Window.Resources>

 

运行效果(设置图片背景的透明度从几秒后变为全透明(隐藏)):