WPF之小动画一

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

定义动画：

直接使用Element进行BeginAnimation

DoubleAnimation animation = new DoubleAnimation();
animation.By = ;
animation.Duration = TimeSpan.FromSeconds();
btnTest.BeginAnimation(Button.WidthProperty, animation);

也可以将Animation添加到StoryBoard中去，这样可以一次执行多个动画：

Storyboard sb = new Storyboard();
DoubleAnimation animation = new DoubleAnimation();
animation.By = ;
animation.Duration = TimeSpan.FromSeconds();
Storyboard.SetTarget(animation, btnTest);
Storyboard.SetTargetProperty(animation, new PropertyPath("Width"));
sb.Children.Add(animation);
sb.Begin();

我们称Storyboard为动画面板，顾名思义就是专门来执行动画的，可以向其Children中添加多个Animation，这样在Begin的时候就可以执行多个动画。

也可以使用Trigger触发器来触发动画：

EventTrigger表示事件触发器，RoutedEvent表示哪个事件的时候触发对应的Action，当前是Button.Click事件，当点击按钮则会执行Storyboard中的动画。在这里使用了一个BeginStoryboard，这样就不用手动对Storyboard调用Begin方法。

在Style中使用触发器Trigger：

FrameElement.Triggers仅支持EventTrigger，还好有其它的触发器可以使用，那就是Styles.Triggers、DataTemplate.Triggers、ControlTemplate.Triggers它们支持属性触发、数据触发以及事件触发。

上述代码是在样式中使用Trigger，Style没有指定Key，仅指定了TargetType，则表示对所有类型应用此样式。在Style中添加IsMouseOver时候的触发器，即当鼠标悬浮时执行，Property表示元素的属性变化，可以是IsPressed或者IsMouseOver等。EnterActions表示鼠标悬浮时候执行，将Width动画执行到500；ExitActions表示鼠标离开时候执行重新将Width设置为原始；然后运行程序鼠标选择则执行Width变大动画，离开则复原。

动画的重叠：

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>

<Style x:Key="ButtonWithCompose" TargetType="{x:Type Button}">
<Setter Property="Button.RenderTransform">
<Setter.Value>
<ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard HandoffBehavior="Compose">
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>

<Style x:Key="ButtonWithSnapShotAndReplace" TargetType="{x:Type Button}">
<Setter Property="Button.RenderTransform">
<Setter.Value>
<ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Page.Resources>
<Canvas>
<Button Style="{StaticResource ButtonWithSnapShotAndReplace}" Canvas.Top="200" Canvas.Left="200" Width="100" Height="100">
SnapShotAndReplace
</Button>
<Button Style="{StaticResource ButtonWithCompose}" Canvas.Top="200" Canvas.Left="400" Width="100" Height="100">
Compose
</Button>
</Canvas>
</Page>

使用BeginStoryboard的HandoffBehavior 属性进行设置，此属性一共两个值可选；Compose 将通过把新动画追加到组合链的末尾来组合新动画和现有动画；
SnapshotAndReplace 新动画将替换它们所应用到的属性上的任何现有动画。

当鼠标光标移到这两个按钮上时，它们将变大，当鼠标光标移开时，它们将变小。如果将鼠标移到一个按钮上然后快速移走光标，则在第一个动画完成之前将应用第二个动画。当两个动画像这样重叠时，您可以看到 Compose 和 SnapshotAndReplace 的 HandoffBehavior 值之间存在差异。如果值为 Compose，在出现动画重叠时，动画之间的过渡将较为平滑，而如果值为 SnapshotAndReplace，则会使新动画立即取代之前的重叠动画。

注：上文代码来自MSDN

控制动画：

PauseStoryboard 暂停动画；

ResumeStoryboard 恢复暂停的动画；

StopStoryboard 停止动画；

SeekStoryboard 将动画定位到指定位置；

SetStoryboardSpeedRatio 设置动画速度比；

SkipStoryboardToFill 将动画跳转至结束；

RemoveStoryboard 删除动画。

控制动画有两个代码实现方式，一种是使用Trigger一种是通过后置代码实现。

代码中有两个图片，一个是白天，一个是黑夜。通过动画修改白天图片的透明度一直到0，然后显示黑夜的图片，这是一个完整的动画。
在Windows.Triggers中放置了五个事件触发器，分别对应五个按钮，通过设置EventTrigger的SourceName为按钮的名称，RoutedEvent同样为Click事件，在每一个EventTrigger中放置对应的Storyboard的操作，每个Storyboard操作的BeginStoryboardName就是BeginStory的Name。有一个特殊就是SeekStory中的Offset表示将动画定位到指定的偏移量，也就是指定的动画时间点。

通过后置代码实现的方式是使用StoryBoard的方法进行实现，大家可以查询MSDN。

注：虽然我们可以去操作动画，但是当动画开始之后属性是无法直接修改的，比如速度比，这些属性都是在XAML中配置的，所以如果我们修改了这个属性也是无效的，好在有对应的函数可以调用

修改上述代码片段，在外层StackPanel中添加一个Slider，用于控制速度比。

private void sldSpeed_ValueChanged_1(object sender, RoutedPropertyChangedEventArgs<double> e)
{
testStory.SetSpeedRatio(this, sldSpeed.Value);
}

testStory为Storyboard对象，使用SetSpeedRatio设置速度比，第一个参数为动画的最高层容器，当前就是窗体所以是this，第二个就是一个double的值，当前使用的是silder的value。

监视动画过程：

通过专门的方法得到动画的当前执行时间(动画的整个Duration)和当前的进度(0--1)，详情见下文。

Storyboar的事件：

Completed	动画完成
CurrentGlobalSpeedInvalidated	暂停、继续、反转、加速、减速、查找、停止或更改时钟的交互速度可触发此事件
CurrentStateInvalidated	当状态发生变化的时候发生(启动、停止或填充时)
CurrentTimeInvalidated	当执行时间点发生变化时触发
RemoveRequested	当动画被移除

在此例子中我们要使用到的事件是CurrentTimeInvalidated，当时间点变化就触发此事件。首先，我们继续修改XAML代码添加一个Label和一个ProgressBar，Label显示当前的时间，ProgressBar显示进度。代码修改如下：

事件代码如下：

private void testStory_CurrentTimeInvalidated_1(object sender, EventArgs e)
{
Clock storyboardeClock = sender as Clock;
if (storyboardeClock.CurrentProgress == null)
{
lblTime.Content = "[Stop]";
progressbar.Value = ;
}
else
{
lblTime.Content = storyboardeClock.CurrentTime.ToString();
progressbar.Value = storyboardeClock.CurrentProgress.Value;
}
}

事件的第一个参数sender为Clock对象，表示TimeLine类型的运行时间状态。通过GetCurrentTime()和GetCurrentProgress()得到当前动画的执行点和当前动画的执行进度。