WPF编程宝典 - 15动画基础

使用代码创建动画

WPF如何决定使用的步长

  幸运的是，这个细节是自动进行的，WPF使用它所需的步长以确保在当前配置的帧率下得到平滑的动画。标准的帧率是60帧/秒。换句话说，WPF每隔/60秒就回计算所有应用例如动画的数值，并更新相应的属性。

  使用动画的最简单方式是实例化在前面列出的其中一个动画类，配置该实例，然后使用希望修改的元素的BeginAnimation()方式。所有WPF元素，成UIElement基类开始，都继承了BeginAnimation()方法，该方法是IAnimatable结构的一部分。其他实现了IAnimatablae结构的类包括ContentElement（文档流内容的基类）和Visual3D(3D可视化对象的基类)

  下图显示了一个非常简单的、增加了按钮宽度的动画。当单击按钮时，WPF平滑地扩展按钮的两个侧边知道充满窗口

1
2
3
4
5

DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.From = 160;
widthAnimation.To = this.Width - 30;
widthAnimation.Duration = TimeSpan.FromSeconds(5);
cmdGrow.BeginAnimation(Button.WidthProperty, widthAnimation);

From属性

  From值是Width属性的开始值。如果多次单击按钮，没吃单击时，都会将Width属性重新设置为160，并且重新开始运行动画。即使当动画已在运行时单击按钮也同样如此

  在许多情况下，可能不希望动画成最初的From值开始。有如下两个常见的原因：

• 创建能够触发多次，并逐次累加效果的动画。例如，可能希望创建没吃单击时都增大一点的按钮
• 创建可能相互重叠的动画。例如，可使用MouseENter事件触发扩展的动画，并使用MouseLeave 事件触发将按钮缩小为原尺寸的互补动画(这通常称为“鱼眼”效果)。如果连续快速地将鼠标多次移动到这种按钮上并移开，每个新动画就会打断上一个动画，导致按钮“跳”回到由 From 属性设置的尺寸。

  当前示例属于第二种情况。如果当按钮正在增大时单击按钮，按钮的宽度就回呗重新设置为160像素——这可能会出现抖动效果。为纠正这个问题，只需要忽略设置From属性的代码语句即可：

1
2
3
4

DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.To = this.Width - 30;
widthAnimation.Duration = TimeSpan.FromSeconds(5);
cmdGrow.BeginAnimation(Button.WidthProperty, widthAnimation);

  为使用这种技术，应用动画的属性必须有预先设置的值。在这个示例中这意味着按钮必须有硬编码的宽度(不管是在按钮标签中直接定义的,还是通过样式设置器应用的)。问题是在许多布局容器中，通常不指定宽度并且让容器根据元素的对齐属性控制宽度。对于这种情况，元素使用默认宽度,也就是特殊的 Double.NaN 值(这里的 NaN 代表“不是数字(nota number)”)。不能为具有这种值的属性使用线性插值应用动画。

  那么，解决方法是什么呢?在许多情况下，答案是硬编码按钮的宽度。正如您将看到的，动画经常需要更精确地控制元素的尺寸和位置。实际上，对于能应用动画的内容，最常用的布局容器是 Canvas 面板，因为 Canvas 面板允许更方便地移动内容(可能相互重叠)以及改变内容的尺寸。Canvas面板还是量级最轻的布局容器，因为当诸如 Width 的属性发生变化时不需要额外的布局工作。

To属性

  就像可省略From属性一样，也可以省略To属性。实际上，可同时省略From属性和To属性，像下面这样创建动画：

1
2
3

DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.Duration = TimeSpan.FromSeconds(5);
cmdGrow.BeginAnimation(Button.WidthProperty, widthAnimation);

  乍一看,这个动画好像根本没有执行任何操作。这样想是符合逻辑的,因为 To属性和 From属性都被忽略了，它们将使用相同的值。但它们之间存在一点微妙且重要的区别。

  当省略 From 值时，动画使用当前值，并将动画纳入考虑范围。例如，如果按钮位于某个增长操作的中间，From 值会使用扩展后的宽度。然而，当忽略To值时，动画使用不考虑动画的当前值。本质上，这意味着 To值变为原数值-一最后一次在代码中、元素标签中或通过样式设置的值(这得益于 WPF 的属性识别系统，该系统可以根据多个重叠属性提供者计算属性的值，不会丢弃任意信息。

By属性

  即使不使用 To属性，也可以使用 By属性。By 属性用于创建按设置的数量改变值的动画,而不是按给定目标改变值。例如，可创建一个动画，增大按钮的尺寸，使得比当前尺寸大50个单位，如下所示:

1
2
3
4

DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.By = 50;
widthAnimation.Duration = TimeSpan.FromSeconds(0.5);
cmdGrow.BeginAnimation(Button.WidthProperty, widthAnimation);

  在按钮示例中，这种方法不是必需的，因为可使用简单的计算设置 To属性来实现相同的效果，如下所示:

1

widthAnimation.To = cmdGrowIncrementally.Width + 10;

  然而当使用XAML定义动画时，使用By值就变得更加合理了，因为XAML没有提供执行简单的计算的能力

  另有一种方法可得到类似的行为，而不需要使用 By属性–可通过设置 IsAdditive 属性创建增加数值的动画。当创建这种动画时，当前值被自动添加到From值和 To值。例如，分析下面这个动画:

1
2
3
4
5
6

DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.From = 0;
widthAnimation.To = -50;
widthAnimation.Duration = TimeSpan.FromSeconds(0.5);
widthAnimation.IsAdditive = true;
cmdGrow.BeginAnimation(Button.WidthProperty, widthAnimation);

  这个动画是成当前值开始的，当到达比当前值少50可单位的值时完成。另一方面，如果使用下面的动画：

1
2
3
4
5
6

DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.From = 10;
widthAnimation.To = 50;
widthAnimation.Duration = TimeSpan.FromSeconds(0.5);
widthAnimation.IsAdditive = true;
cmdGrow.BeginAnimation(Button.WidthProperty, widthAnimation);

  属性值跳到新值(比当前值大 10个单位的值)，然后增加值，直到达到最后的值，最后的值比动画开始前的当前值大 50个单位。

Duration属性

  Duration 属性很简单–是在动画开始时刻和结束时刻之间的时间间隔(时间间隔单位是毫秒、分钟、小时或您喜欢使用的其他任何单位)。尽管在上一个示例中，动画的持续时间是使用TimeSpan 对象设置的,但 Duration 属性实际上需要 Duration 对象。幸运的是,Duration 和 TimeSpan非常类似，并且 Duration 结构定义了一种隐式转换，能够根据需要将 System.TimeSpan 转换为System.Windows.Duration。这正是为什么下面的代码行完全合理的原因:

1

widthAnimation.Duration = TimeSpan.FromSeconds(0.5);

那么，为什么要使用全新的数据类型呢?

  因为 Duration 类型还提供了两个不能通过 TimeSpan对象表示的特殊数值–Duration.Automatic 和 Duration.Forever。在当前示例中，这两个值都没有用处(Automatic 值只将动画设置为1秒的持续时间，而Forever 值使动画具有无限的持续时间，这会防止动画具有任何效果)。然而，当创建更复杂的动画时，这些值就有用处了。

同时发生的动画

  可使用 BeginAnimation()方法同时启动多个动画。BeginAnimation()方法几乎总是立即返回从而可以使用类似下面的代码同时为两个属性应用动画:

1
2
3
4
5
6
7
8
9
10
11
12

DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.From = 160;
widthAnimation.To = this.Width - 30;
widthAnimation.Duration = TimeSpan.FromSeconds(5);

DoubleAnimation heightAnimation = new DoubleAnimation();
heightAnimation.From = 30;
heightAnimation.To = this.Height - 50;
heightAnimation.Duration = TimeSpan.FromSeconds(5);

cmdGrow.BeginAnimation(Button.WidthProperty, widthAnimation);
cmdGrow.BeginAnimation(Button.HeightProperty, heightAnimation);

  在这个示例中，两个动画没有被同步，这意味着宽度和高度不会准确地在相同时间间隔内增长(通常，将看到按钮先增加宽度，紧接着增加高度)。可通过创建绑定到同一个时间线的动画，突破这一限制。本章稍后讨论故事板时将介绍这种技术。

动画的生命周期

  从技术角度看，WPF动画是暂时的，这意味着它们不能真正改变基本属性的值。当动画处于活动状态时，只是覆盖属性值。这是由依赖项属性的工作方式造成的，并且这是一个经常会被忽视的细节，该细节会给用户带来极大的困惑。

  单向动画(如增长按钮的动画)在运行结束后会保持处于活动状态，这是因为动画需要将按钮的宽度保持为新值。这会导致如下不常见的问题–如果尝试使用代码在动画完成后修改属性值，代码将不起作用。因为代码只是为属性指定了一个新的本地值，但仍会优先使用动画之后的属性值。

  根据准备完成的工作，可通过如下几种方式解决这个问题：

• 创建将元素重新设置为原始状态的动画。可通过创建不设置 To 属性的动画达到该目的。例如，将按钮的宽度减小到最后设置的尺寸的按钮缩小动画，之后就可以使用代码改变该属性了。
• 创建可翻转的动画。通过将 AutoReverse 属性设置为 true 来创建可翻转的动画。例如，当按钮增长动画不再增加按钮的宽度时，将反向播放动画，返回到原始宽度。动画的总持续时间也将翻倍。
• 改变 FiBehavior 属性。通常，FillBehavior 属性被设置为 HoldEnd，这意味着当动画结束时，会继续为目标元素应用最后的值。如果将FiBehavior属性改为 Stop，只要动画结束属性就会恢复为原来的值。
• 当动画完成时通过处理动画对象的 Completed 事件删除动画对象

  前3种方法改变了动画的行为。不管使用哪种方法，它们都将动画后的属性设置为原来的数值。如果这并非所希望的，那就需要使用最后一种方法。

1. 在启动动画前，关联事件处理程序以响应动画完成事件

1

widthAnimation.Completed += WidthAnimation_Completed;

1. 当引发Completed事件时，可通过调用BeginANimation()方法来渲染不活动的动画。为此，只需要指定属性，并为动画对象传递null引用：

1

cmdGrow.BeginAnimation(WidthProperty, null);

1. 当调用 BeginAnimation()方法时，属性返回为动画开始之前的原始值。如果这并非所希望的结果，可记下动画应用的当前值，删除动画，然后手动为属性设置新值，如下所示:

1
2
3

double currentWidth = cmdGrow.Width;
cmdGrow.BeginAnimation(WidthProperty, null);
cmdGrow.Width = currentWidth;

Timeline类

  下图显示了WPF动画类的继承层次结构。该图包含了所有基类，但省略了全部42可动画类以及相应的TypeNameAnimationBase类

  Timeline类中前几个有用的成员定义了已经介绍过的Duration属性，还有其他几个属性：

AccelerationRatio和DecelerationRatio属性

  可以通过 AccelerationRatio 和 DecelerationRatio 属性压缩部分时间线，使动画运行得更快。并将拉伸其他时间线进行补偿，使总时间保持不变。

  这两个属性都表示百分比值。例如，将AccelerationRatio属性设置为0.3表示希望使用动画持续时间中前 30%的时间进行加速。例如，在一个持续10秒的动画中，前3秒会加速运行而剩余的7秒会以恒定不变的速度运行(显然，在最后7秒钟的速度比没有加速的动画要快，因为需要补偿前3秒中的缓慢启动)。如果将AccelerationRatio属性设置为0.3，并将DecelerationRatio 属性也设置为 0.3，那么在前3秒会加速，在中间4秒保持固定的最大速度，在最后3秒减速。分析一下这种方式，显然，AccelerationRatio 和 DecelerationRatio 属性值之和不能超过 1，否则就需要超过 100%的可用时间来执行所需的加速和减速。当然，可将AccelerationRatio 属性设置为1(对于这种情况，动画速度从开始到结束一直在增加)，或将DecelerationRatio 属性设置为1(对于这种情况，动画速度从开始到结束一直在降低)。

RepeatBehavior属性

  使用RepeatBehavior 属性可控制如何重复运行动画。如果希望重复固定次数，应为RepeatBehavior构造函数传递合适的次数。例如，下面的动画重复两次:

1
2
3
4
5
6
7

DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.From = 160;
widthAnimation.To = this.Width - 30;
widthAnimation.Duration = TimeSpan.FromSeconds(5);
widthAnimation.RepeatBehavior = new RepeatBehavior(2);

cmdGrow.BeginAnimation(Button.WidthProperty, widthAnimation);

  当运行这个动画时,按钮会增加尺寸(经过5秒),跳回到原来的数值,然后再次增加尺寸(经过5秒)，在按钮的宽度为整个窗口的宽度时结束。如果将AutoReverse属性设置为true，行为稍有不同–整个动画完成向前和向后运行(意味着先展开按钮，然后收缩)，之后再重复一次。

  除可以使用RepeatBehavior属性设置重复次数完，还可以用该属性设置重复的时间间隔。为此，只需要为RepeatBheavior对象的构造函数传递一个TimeSpan对象。例如，下面的动画重复13秒

1
2
3
4
5
6
7

DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.From = 160;
widthAnimation.To = this.Width - 30;
widthAnimation.Duration = TimeSpan.FromSeconds(5);
widthAnimation.RepeatBehavior = new RepeatBehavior(TimeSpan.FromSeconds(13));

cmdGrow.BeginAnimation(Button.WidthProperty, widthAnimation);

  在该例中，Duration属性指定整个动画历经5秒。因此，将RepeatBehavior属性设置为13秒将会引起两次重复，然后通过第三次重复动画，使按钮的宽度处于中间位置(在3秒的位置)。

  最后，也可将RepeatBehavior的值设置为如下使动画不断重复自身：

1

widthAnimation.RepeatBehavior = RepeatBehavior.Forever;

故事板

  正如您已经看到的，WPF动画通过一组动画类表示。使用少数几个属性设置相关信息，如开始值、结束值以及持续时间。这显然使得它们非常适合于XAML。不是很清晰的是:如何为特定的事件和属性关联动画，以及如何在正确的时间触发动画。
  在所有声明式动画中都会用到如下两个要素：

• 故事板：故事板是BeginAnimation()方法的XAML等价物。通过故事板将动画指定到合适的元素和属性
• 时间触发器：事件触发器响应属性变化或事件，并控制故事板。例如，为了开始动画，事件触发器必须使用故事板

故事板

  故事板是增强的时间线，可用来分组多个动画，而且具有控制动画播放的能力——暂停、停止以及改变播放位置。然而，Storyboard类提供的最基本功能是，能够使用TargetProperty和TagrteName属性指向某个特定属性和特定元素。换句话说，故事板在动画和希望应用动画的属性之间架起了一座桥梁。下面的标记演示如何定义用于管理DoubleAnimation的故事板：

1
2
3
4
5
6
7

<Storyboard x:Key="WidthAnimation">
    <DoubleAnimation Storyboard.TargetName="cmdGrow"
                     Storyboard.TargetProperty="Width"
                     From="160"
                     To="300"
                     Duration="0:0:5" />
</Storyboard>

  定义故事板是创建动画的第一部。为让故事板实际运行起来，还需要有事件触发器

事件触发器

  样式提供了一种事件触发器关联到元素的方式。然而，可在如下4可位置定义事件触发器：

• 在样式中(Styles.Triggers集合)
• 在数据模板中(DataTemplate.Triggers集合)
• 在空间模板中(ControlTemplate.Triggers集合)
• 直接在元素中定义事件触发器(FrameworkElement.Triggers集合)

  当创建时间触发器时，需要指定开始触发器的路由事件和由触发器执行的一个或多个动作。对于动画，最常用的动作是BeginStoryboard，该动作相当于调用BeginAnimation()方法

  下面的示例使用按钮的Triggers集合为Click事件关联某个动画。当单击按钮时，该动画增长按钮：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<Button x:Name="cmdGrow"
        Width="160"
        Height="40"
        Padding="10"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Content="Click and Make Me Grow">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width"
                                         To="300"
                                         Duration="0:0:5" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Button.Triggers>
</Button>

  Storyboard.TargetProperty 属性指定了希望改变的属性(在这个示例中是 Width 属性)。如果没有提供类的名称，故事板使用其父元素，在此使用的是希望扩展的按钮。如果希望设置附加属性(如 Canvas.Left 或 Canvas.Top)，需要在括号中封装整个属性，如下所示:

1

<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" .../>

使用样式关联触发器

  FrameworkElement.Triggers 集合有点奇怪,它仅支持事件触发器。其他触发器集合(Style.Triggers、DataTemplate.Triggers与ControlTemplate.Triggers)的功能更强大,它们支持三种基本类型的 WPF触发器:属性触发器、数据触发器以及事件触发器。

  使用事件触发器是关联动画的最常用方式，但并不是唯一的选择。如果使用位于样式、数据模板或控件模板中的 Triggers 集合，还可创建当属性值发生变化时进行响应的属性触发器。例如，下面的样式复制了在前面显示的示例。当IsPressed 属性为true 时，该样式触发一个故事板:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<Window.Resources>
    <Style x:Key="GrowButtonStyle"
           TargetType="{x:Type Button}">
        <Style.Triggers>
            <Trigger Property="Button.IsPressed"
                     Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width"
                                             To="250"
                                             Duration="0:0:5" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <Button x:Name="cmdGrow"
            Width="160"
            Height="40"
            Padding="10"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="Click and Make Me Grow"
            Style="{StaticResource GrowButtonStyle}" />

</Grid>

  可使用两种方式为属性触发器关联动作。可使用Trigger.EnterActions 设置当属性改变到指定的数值时希望执行的动作(在上面的示例中，当IsPressed 属性值变为true 时)，也可以使用Trigger.ExitActions 设置当属性改变回原来的数值时执行的动作(当IsPressed 属性的值变回 false时)。这是一种封装一对互补动画的简便方法。

重叠动画

  故事板提供了改变处理重叠动画方式的能力–换句话说，决定第二个动画何时被应用到已经具有一个正在运行的动画的属性上。可使用 BeginStoryboard.HandofBehavior 属性改变处理重叠动画的方式。

  通常，当两个动画相互重叠时，第二个动画会立即覆盖第一个动画。这种行为就是所谓的“快照并替换”(由 HandofBehavior 枚举中的 SnapshotAndReplace 值表示)。当第二个动画开始时，第二个动画获取属性当前值(基于第一个动画)的快照，停止动画，并用新动画替换第一个动画。

  另一个 HandofBehavior 选项是 Compose，这种方式会将第二个动画融合到第一个动画的时间线中。例如，分析 ListBox 示例的修改版本，当缩小按钮时使用 HandofBehavior.Compose:

1
2
3
4
5
6
7
8
9
10
11

<EventTrigger RoutedEvent="ListBoxItem.MouseLeave">
    <EventTrigger.Actions>
        <BeginStoryboard HandoffBehavior="Compose">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="FontSize"
                                 BeginTime="0:0:0.5"
                                 Duration="0:0:0.2" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger.Actions>
</EventTrigger>

  现在，如果将鼠标移到 ListBoxItem对象上，然后再移开，将看到不同的行为。当将鼠标移开项时，项会继续扩展，这种行为非常明显，直到第二个动画到达其 05秒的开始时间延迟。然后，第二个动画会缩小按钮。如果不使用 Compose 行为，在第二个动画开始之前的 0.5 秒的时间间隔内，按钮会处于等待状态，并固定为当前尺寸。

  使用组合的 HandofiBehavior 行为需要更大开销。这是因为当第二个动画开始时，用于运行原来动画的时钟不能被释放。相反，这个时钟会继续保持存活，直到istBoxltem 对象被垃圾回收或为相同的属性应用新的动画为止。

1
2
3
4

private void WidthAnimation_Completed(...)
{
    cmdGrow.BeginAnimation(WidthProperty, null);
}

同步的动画

  Storyboard 类间接地继承自 TimelineGroup 类，所以 Storyboard 类能包含多个动画。最令人高兴的是，这些动画可以作为一组进行管理–这意味着它们在同一时间开始。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<Button Width="160"
        Height="40"
        Content="Click Grow">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width"
                                         To="300"
                                         Duration="0:0:5" />
                        <DoubleAnimation Storyboard.TargetProperty="Height"
                                         To="300"
                                         Duration="0:0:5" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Button.Triggers>
</Button>

  因为 Storyboard 类继承自 Timeline类,所以可使用Timeline鼠标表中描述的所有属性来配置其速度、使用加速或减速、引入延迟时间等。这些属性将影响故事板包含的所有动画，而且它们是累加的。例如，如果将 Storyboard.SpeedRatio 属性设置为2，并将 DoubleAnimation.SpeedRatio 属性设置为2，那么动画就会以4倍于正常速度的速度运行。

控制播放

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

  帮助文档中没有记载会妨碍使用这些动作的内容。为成功地执行这些动作，必须在同一个Triggers 集合中定义所有触发器。如果将 BeginStoryboard动作的触发器和 PauseStoryboard 动作的触发器放置到不同集合中，PauseStoryboard动作就无法工作。

  如下示例，白天到黑夜的切换：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<Window.Triggers>
    <!--启动动画-->
    <EventTrigger SourceName="cmdStart"
                  RoutedEvent="Button.Click">
        <BeginStoryboard x:Name="fadeStoryboardBegin">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="imgDay"
                                 Storyboard.TargetProperty="Opacity"
                                 From="1"
                                 To="0"
                                 Duration="0:0:10" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <!--暂停动画-->
    <EventTrigger SourceName="cmdPause"
                  RoutedEvent="Button.Click">
        <PauseStoryboard BeginStoryboardName="fadeStoryboardBegin" />
    </EventTrigger>
    <!--恢复暂停的动画-->
    <EventTrigger SourceName="cmdResume"
                  RoutedEvent="Button.Click">
        <ResumeStoryboard BeginStoryboardName="fadeStoryboardBegin" />
    </EventTrigger>
    <!--停止动画，重新设置会开始位置-->
    <EventTrigger SourceName="cmdStop"
                  RoutedEvent="Button.Click">
        <StopStoryboard BeginStoryboardName="fadeStoryboardBegin" />
    </EventTrigger>
    <!--设置到5秒位置-->
    <EventTrigger SourceName="cmdMiddle"
                  RoutedEvent="Button.Click">
        <SeekStoryboard BeginStoryboardName="fadeStoryboardBegin"
                        Offset="0:0:5" />
    </EventTrigger>

</Window.Triggers>
<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>

    <Image x:Name="imgNight"
           Source="/Images/night.png"
           Stretch="Fill" />
    <Image x:Name="imgDay"
           Source="/Images/day.png"
           Stretch="Fill" />

    <StackPanel Grid.Row="1"
                Orientation="Horizontal"
                HorizontalAlignment="Center"
                Margin="0 10">
        <StackPanel.Resources>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Padding"
                        Value="5" />
                <Setter Property="Margin"
                        Value="5 0" />
            </Style>
        </StackPanel.Resources>
        <Button x:Name="cmdStart"
                Content="Start" />
        <Button x:Name="cmdPause"
                Content="Pause" />
        <Button x:Name="cmdResume"
                Content="Resume" />
        <Button x:Name="cmdStop"
                Content="Stop" />
        <Button x:Name="cmdMiddle"
                Content="Move To Middle" />
    </StackPanel>

</Grid>

  当使用故事板动作时将遇到限制。它们提供的属性(如SeekStoryboard.Offset 和SetStoryboardSpeedRatio.SpeedRatio 属性)不是依赖项属性，这会限制使用数据绑定表达式。例如，不能自动读取 Slider.Value属性值并将其应用到 SetStoryboardSpeedRatio.SpeedRatio 动作,因为 SpeedRatio属性不接受数据绑定表达式。您可能认为可通过使用Storyboard 对象的SpeedRatio 属性来解决这个问题，但这是行不通的。当动画开始时，读取 SpeedRatio 值并创建一个动画时钟。此后，即使改变了SpeedRatio 属性的值，动画也仍会保持正常的速度。

  如果希望动态调整速度或位置，唯一的解决方法是使用代码。Storyboard 类中的方法提供了与上表中描述的触发器相同的功能，包括Begin()、Pause()、Resume()、Seek()、Stop()、SkipToFill()、SetSpeedRatio( )以及 Remove( )方法。

  要访问Storyboard对象，必须在标记中设置其Name属性：

1

<Storyboard x:Name="fadeStoryboard">

  现在只需要编写前档的事件处理程序，并使用Storyboard对象的方法(请记住，简单地改变故事板的属性(比如SpeedRatio)是没有任何效果的，它们仅配置当动画开始时将要使用的设置)

  当拖动Slider控件上的滑块时，下面的时间处理程序会进行响应。该事件处理程序获取滑块条的值(范围是0~3)，并使用该数值应用新的速率

1
2
3
4

private void sldSpeed_ValueCHanged(object sender,RoutedEventArgs e)
{
    fadeStoryboard.SetSpeedRatio(this,sldSpeed.Value);
}

  注意，SetSpeedRatio()方法需要两个参数。第一个参数是顶级动画容器(在这个示例中，是指当前窗口)。所有故事板方法都需要这个引用。第二个参数是新的速率。

监视动画进度

  显示动画的位置和进度。首先需要使用TextBlock元素显示时间，而后需要使用ProgressBar控件显示图形进度条。您可能认为，可使用数据绑定表达式设置TextBlock值和ProgressBar内容，但这是行不通的。因为从故事板中检索当前动画时钟相关信息的唯一方式是使用方法，如GetCurrentTime()和GetCurrentProgress()。无法成属性中获取相同的信息。

  这个示例需要使用CurrentTimeInvalidated事件，没吃向前移动动画时都会引发该事件（通常，每秒移动60次，当如果执行的代码需要更长事件，可能会丢失时钟刻度）
  当引发CurrentTimeInvalidated事件时，发送者是Clock对象(Clock类位于System.WIndows.Media.ANimation名称空间)。可通过Clock对象检索当前事件，当前时间使用TimeSpan对象表示：并且可检索当前进度，当前进度使用0~1之间的数值表示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<Window.Triggers>
    <!--启动动画-->
    <EventTrigger SourceName="cmdStart"
                  RoutedEvent="Button.Click">
        <BeginStoryboard x:Name="fadeStoryboardBegin">
            <Storyboard x:Name="fadeStoryboard"
                        CurrentTimeInvalidated="fadeStoryboard_CurrentTimeInvalidated">
                <DoubleAnimation Storyboard.TargetName="imgDay"
                                 Storyboard.TargetProperty="Opacity"
                                 From="1"
                                 To="0"
                                 Duration="0:0:10" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <!--暂停动画-->
    <EventTrigger SourceName="cmdPause"
                  RoutedEvent="Button.Click">
        <PauseStoryboard BeginStoryboardName="fadeStoryboardBegin" />
    </EventTrigger>
    <!--恢复暂停的动画-->
    <EventTrigger SourceName="cmdResume"
                  RoutedEvent="Button.Click">
        <ResumeStoryboard BeginStoryboardName="fadeStoryboardBegin" />
    </EventTrigger>
    <!--停止动画，重新设置会开始位置-->
    <EventTrigger SourceName="cmdStop"
                  RoutedEvent="Button.Click">
        <StopStoryboard BeginStoryboardName="fadeStoryboardBegin" />
    </EventTrigger>
    <!--设置到5秒位置-->
    <EventTrigger SourceName="cmdMiddle"
                  RoutedEvent="Button.Click">
        <SeekStoryboard BeginStoryboardName="fadeStoryboardBegin"
                        Offset="0:0:5" />
    </EventTrigger>

</Window.Triggers>
<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>

    <Image x:Name="imgNight"
           Source="/Images/night.png"
           Stretch="Fill" />
    <Image x:Name="imgDay"
           Source="/Images/day.png"
           Stretch="Fill" />

    <StackPanel Grid.Row="1"
                Orientation="Horizontal"
                HorizontalAlignment="Center"
                Margin="0 10">
        <StackPanel.Resources>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Padding"
                        Value="5" />
                <Setter Property="Margin"
                        Value="5 0" />
            </Style>
        </StackPanel.Resources>
        <Button x:Name="cmdStart"
                Content="Start" />
        <Button x:Name="cmdPause"
                Content="Pause" />
        <Button x:Name="cmdResume"
                Content="Resume" />
        <Button x:Name="cmdStop"
                Content="Stop" />
        <Button x:Name="cmdMiddle"
                Content="Move To Middle" />
    </StackPanel>

    <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="auto" />
            <ColumnDefinition  Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Horizontal"
                    Margin="10 0">
            <TextBlock Text="Speed:"
                       VerticalAlignment="Center"
                       Margin="5 0" />
            <Label x:Name="lblTime" />
        </StackPanel>
        <ProgressBar Grid.Column="1"
                     x:Name="progressBar"
                     Height="20"
                     Minimum="0"
                     Maximum="1" />
    </Grid>

</Grid>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

private void fadeStoryboard_CurrentTimeInvalidated(object sender, EventArgs e)
{
    Clock storyboardClock = (Clock)sender;

    if (storyboardClock.CurrentProgress == null)
    {
        lblTime.Content = "[[ stopped]]";
        progressBar.Value = 0;
    }
    else
    {
        lblTime.Content = storyboardClock.CurrentTime.ToString();
        progressBar.Value = (double)storyboardClock.CurrentProgress;
    }
}

动画缓动

  线性动画的一个缺点是，它通常让人觉得很机械而且不够自然。相比而言，高级的用户界面具有模拟真实世界系统的动画效果。例如，可能使用具有触觉的下压按钮，当单击时按钮快速地弹回，但是当没有进行操作时它们会慢慢地停下来，创建真正移动的错觉。或者，可能使用类似 Windows 操作系统的最大化和最小化效果,当窗口接近最终尺寸时窗口扩展或收缩的速度会加速。这些细节十分细微，当它们的实现比较完美时您可能不会注意到它们。然而，几乎总会注意到，粗糙的缺少这些更细微特征的动画会给人留下笨拙的印象。

  改进动画并创建更趋自然的动画的秘诀是改变变化速率。不是创建以固定不变的速率改变属性的动画，而是需要设计根据某种方式加速或减速的动画。WPF提供了几种选择。在下一章中，将学习基于帧的动画和关键帧动画，这两种技术都提供了更精细地控制动画的能力(需要做的工作显著增加)。但实现更趋自然的动画的最简单方法是使用预置的缓动函数(easingfunction)。

使用缓动函数

  动画缓动的最大优点是，相对于其他方法，如基于帧的动画和关键帧动画，这种方法需要的工作少得多。为使用动画缓动，使用某个缓动函数类(继承自EasingFunctionBase 的类)的实例设置动画对象的 EasingFunction 属性。通常需要设置缓动函数的几个属性，并且为了得到您所希望的效果，可能必须使用不同的设置，但不需要编写代码并且只需很少的 XAML。

  现在，动画使用线性插值，这意味着按钮以恒定的机械性的速度增长和收缩。为得到更趋自然的效果，可使用缓动函数。下面的示例添加了名为lasticEase的缓动函数。最终结果是按钮弹跳出其完整宽度，然后迅速弹回一点，接着再次摆动超出其完整尺寸(但比上一次稍少点)，再以稍小的幅度迅速弹回，等等，随着运动的减弱不断地重复这一跳动模式。之后逐渐进入缓和的 10次振荡。Oscilations属性控制最终跳动的次数。ElasticEase 类还提供了另一个属性Springiness，该属性的值越大，后续的每个振荡静止得越快(默认值是 3)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<Button x:Name="cmdGrow"
        Content="Grow Me"
        Width="100"
        Height="50">
    <Button.Triggers>
        <EventTrigger RoutedEvent="UIElement.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="cmdGrow"
                                     Storyboard.TargetProperty="Width"
                                     To="400"
                                     Duration="0:0:1.5">
                        <DoubleAnimation.EasingFunction>
                            <ElasticEase EasingMode="EaseInOut"
                                         Oscillations="10"
                                         Springiness="7" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="cmdGrow"
                                     Storyboard.TargetProperty="Width"
                                     To="100"
                                     Duration="0:0:1.5">
                        <DoubleAnimation.EasingFunction>
                            <ElasticEase EasingMode="EaseInOut"
                                         Oscillations="10"
                                         Springiness="8" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

在动画开始时应用缓动与在动画结束时应用缓动

  在继续分析不同的缓动函数前，理解缓动函数的应用时机是很重要的。所有缓动函数类都继承自 EasingFunctionBase类,并且继承了EasingMode 属性。该属性具有三个可能值:Easeln(该值意味着在动画开始时应用缓动效果)、EaseOut(该值意味着在动画结束时应用缓动效果)、EaselnOut(该值意味着在动画开始和结束时应用缓动效果——将 Easeln 用于动画的前半部分,将 EaseOut用于动画的后半部分)。

  在上面的示例中，growStoryboard 中的动画使用 EaseOut 模式。因此，逐渐减弱的跳动序列发生于动画的末尾。如果使用图形显示按钮宽度随动画进程的变化情况,就会看到类似下图的图形。

  如果将 ElasticEase 函数的缓动模式切换为 Easeln，跳动将在动画的开始部分发生。按钮收缩使其宽度比开始值更小一点，然后扩展宽度使其超过开始值，继而再稍多地收缩回一点，持续这种模式以逐渐地增加振荡直到自由振荡并扩展剩余的部分(使用ElasticEase.Oscilations 属性控制振荡次数)。下图显示了这种非常不同的移动模式。

  最后，EaseInOut模式创建更新颖的效果，在动画的前半部分是振荡动画的开始，接下来在动画的后半部分是振荡动画的结束。下图演示了该模式。

缓动函数类

  WPF提供了11可缓动函数类，所有这个写类都位于熟悉的System.Windows.Media.Animation名称空间中。下表描述了所有的缓动函数类，并列出了它们的重要属性。请记住，每个缓动函数类还提供了EasingMode属性，用于控制是影响动画的开始(EaseIn)、是影响动画的结束(WaseOut)还是影响动画的开始和结束(EaseInOut)

  许多缓动函数提供了类似但隐约不同的结果。为成功地使用动画缓动，需要决定使用哪个缓动函数，以及如何进行配置。通常，这个过程需要一点试错的体验。有两个资源可为您提供帮助。

• 首先，WPF 文档为每个缓动函数的行为提供了插图示例，显示动画如何随着时间修改属性值。查看这些插图是理解缓动函数作用的好方法。下图显示了最流行缓动函数的插图。

• 其次，Microsoft提供了几个范例程序，可使用这些范例播放不同的缓动函数，并尝试不同的属性值。最方便的范例之一是Silverlight应用程序，可通过浏览http://tinyurl.com/animationeasing 在浏览器中运行该应用程序。通过该应用程序可在正方形中观察任何缓动函数的效果，并会显示自动生成的复制该效果所需的XAML 标记。

创建自定义缓动函数

  通过从 EasingFunctionBase 继承自己的类，并重载 EaseInCore()和 CreateInstanceCore( )方法，可创建自定义缓动效果。这是一个非常专业的技术，因为大部分开发人员能通过配置标准的缓动函数(或使用将在下一章描述的样条关键帧动画)来获得所希望的效果。然而，如果确实决定创建自定义缓动函数，您将发现该过程出奇简单

  需要编写的几乎所有逻辑都在 EaselnCore()方法中运行。该方法接受一个规范化的时间值本质上，是表示动画进度的从0到1之间的值。当动画开始时，规范化的时间值是0。它从该点开始增加，直到在动画结束点达到1。

  在动画运行期间，每次更新动画的值时WPF都会调用EaseInCore()方法，确切的调用频率取决于斗篷话的频率，但可以预期每秒调用EaseInCore()方法的次数接近60

  为执行缓动，EaseInCore()方法采用规范化的时间值，并以某种方式对其进行调整。EaselnCore( )方法返回的调整后的值，随后被用于调整动画的进度。例如，如果 EaseInCore( )方法返回 0，动画被返回到其开始点。如果 EaselnCore()方法返回1，动画跳到其结束点。然而，EaselnCore( )方法的返回值并不局限于这一范围–例如，可返回 1.5 以使动画过渡运行自身50%。您已经看到过用于缓动函数(如 ElasticEase)的这类效果，

下面给出的EaseInCore()方法版本根本不执行任何工作。该版本返回规范化的时间，意味着动画均匀展开，就像没有缓动

1
2
3
4

protected override double EaseInCore(double normalizedTime)
{
    return normalizedTime;
}

下面的 EaselnCore()方法版本通过计算规范化时间值的立方，复制CubicEase 函数的效果。因为规范化的时间值是小数，其立方值是更小的小数;所以该方法的效果是最初减慢动画，并当规范化的时间值(及其立方值)接近于1时导致动画加速。

1
2
3
4

protected override double EaseInCore(double normalizedTime)
{
    return Math.Pow(normalizedTime,3);
}

  下面的示例中，自定义缓动函数——以一定的随机量偏移规范化的时间值，导致分散的抖动效果。可使用提供的Jitter依赖项属性(在一个较小的范围内)调整抖动的幅度，该属性接受从0到2000之间的数值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/// <summary>
/// 随机抖动
/// </summary>
public class RandomJitterEase : EasingFunctionBase
{
    // Store a random number generator
    private Random _rand = new Random();

    public int Jitter
    {
        get { return (int)GetValue(JitterProperty); }
        set { SetValue(JitterProperty, value); }
    }

    // Allow the amount of jitter to be configured.
    public static readonly DependencyProperty JitterProperty =
        DependencyProperty.Register("Jitter", typeof(int), typeof(RandomJitterEase), new PropertyMetadata(1000), new ValidateValueCallback(ValidateJitter));

    private static bool ValidateJitter(object value)
    {
        int jitterValue = (int)value;
        return ((jitterValue <= 2000) && (jitterValue >= 0));
    }

    // This required override simply provides a live instance of your easing function
    protected override Freezable CreateInstanceCore()
    {
        return new RandomJitterEase();
    }

    // Perform the easing
    protected override double EaseInCore(double normalizedTime)
    {
        // Make sure there's no jitter in the final value.
        if (normalizedTime == 1) return 1;

        // Offset the value by a random amount.
        return Math.Abs(normalizedTime - (double)_rand.Next(0, 10) / (2010 - Jitter));
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<Canvas>
    <Button x:Name="cmdGrow"
            Content="Grow Me"
            Width="100"
            Height="50"
            Canvas.Left="0"
            Canvas.Top="0">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="cmdGrow"
                                             Storyboard.TargetProperty="(Canvas.Left)"
                                             From="0"
                                             To="500"
                                             Duration="0:0:10">
                                <DoubleAnimation.EasingFunction>
                                    <local:RandomJitterEase EasingMode="EaseIn"
                                                            Jitter="1000" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Canvas>

动画性能

  通常，为用户界面应用动画只不过是创建并配置正确的动画和故事板对象。但在其他情况下，特别是同时发生多个动画时，可能需要更加关注性能。特定的效果更可能导致这些问题–例如，那些涉及视频、大位图以及多层透明等的效果通常需要占用更多CPU 开销。如果不谨慎地实现这类效果，运行它们时可能造成明显抖动，或者会从其他同时运行的应用程序抢占CPU的时间

  幸运的是，WPF提供了几个可提供帮助的技巧。接下来的几节将学习降低最大帧率以及缓存计算机显卡中的位图，这两种技术可以减轻 CPU的负担。

期望的帧率

  WPF 试图保持以60帧/秒的速度运行动画。这样可确保从开始到结束得到平滑流畅的动画。当然，WPF 可能达不到这个目标。如果同时运行多个复杂的动画，并且 CPU或显卡不能承受的话，整个帧率可能会下降(最好的情形)，甚至可能会跳跃以进行补偿(最坏的情形)。

  尽管很少提帧率，但可能会选择降低帧率，这可能是因为以下两个原因之一：

• 动画使用更低的帧率看起来也很好，所以不希望浪费额外的CPU周期
• 应用程序运行在性能较差的CPU或显卡上，并知道使用高的帧率时整个动画的渲染效果还不如使用更低的帧率的渲染效果

  调整帧率很容易，只需要为包含动画的故事板使用Timeline.DesciredFrameRate附加属性。下面的示例将帧率减半：

1

<Storyboard Timeline.DesiredFrameRate="30">

  下图显示了一个简单的测试程序，该程序为一个小球应用动画，使其在Cavnas控件上沿着一条曲线运动：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<Window.Resources>
    <BeginStoryboard x:Key="beginStoryboard">
        <Storyboard Timeline.DesiredFrameRate="{Binding ElementName=txtFrameRate,Path=Text}">
            <DoubleAnimation Storyboard.TargetName="ellipse"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="0"
                             To="300"
                             Duration="0:0:0.5" />
            <DoubleAnimation Storyboard.TargetName="ellipse"
                             Storyboard.TargetProperty="(Canvas.Top)"
                             From="300"
                             To="0"
                             AutoReverse="True"
                             Duration="0:0:0.25"
                             DecelerationRatio="1" />
        </Storyboard>
    </BeginStoryboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <EventTrigger.Actions>
            <StaticResource ResourceKey="beginStoryboard" />
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger SourceName="btnRepeat"
                  RoutedEvent="Button.Click">
        <EventTrigger.Actions>
            <StaticResource ResourceKey="beginStoryboard" />
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Canvas ClipToBounds="True">
        <Ellipse x:Name="ellipse"
                 Fill="Red"
                 Width="10"
                 Height="10" />
    </Canvas>
    <StackPanel Grid.Row="1"
                Orientation="Horizontal"
                HorizontalAlignment="Center"
                Margin="0 20">
        <TextBlock Text="Desired Frame Rate:"
                   VerticalAlignment="Center"
                   Margin="10 0" />
        <TextBox x:Name="txtFrameRate"
                 Width="100" />
    </StackPanel>
    <Button x:Name="btnRepeat"
            Grid.Row="2"
            Width="100"
            Height="30">Repeat</Button>
</Grid>

位图缓存

  位图缓存通知 WPF 获取内容的当前位图图像，并将其复制到显卡的内存中。这时，显卡可以控制位图的操作和显示的刷新。这个处理过程比让 WPF 完成所有工作要快很多，并且和显卡不断地通信。

  如果运用得当，位图缓存可改善应用程序的绘图性能。但如果运用不当，就会浪费显存并且实际上会降低性能。所以，在使用位图缓存之前，需要确保真正合适。下面列出一些指导原则:

• 如果正在绘制的内容需要频繁地重新绘制，使用位图缓存可能是合理的。因为每次后续的重新绘制将更快。一个例子是当其他一些具有动画的对象浮动在形状表面上时，使用BitmapCacheBrush 画刷绘制形状的表面。尽管形状没有变化，但是形状的不同部分被遮挡住或显露出来，从而需要重新绘制。
• 如果元素的内容经常变化，使用位图缓存可能不合理。因为可视化内容每次改变时，WPF需要重新渲染位图并将其发送到显卡缓存，而这需要耗费时间。该规则有些晦涩，因为某些改变不会导致缓存无效。安全操作的例子包括使用变换旋转以及重新缩放元素、剪裁元素、改变元素的透明度以及应用效果。另一方面，改变元素的内容、布局以及格式将强制重新渲染位图。
• 尽量少缓存内容。位图越大，WPF 存储缓存副本所需的时间越长，需要的显存越多旦耗尽显存，WPF 将被迫使用更慢的软件渲染。

  为更好地理解位图缓存，使用一个简单示例是有帮助的。在下列中，一个动画推动一个简单的图形——正方形——在Canvas面板上移动，Cavans面板包含一条具有复杂集合图形的路径。当正方形在Canvas面板表面上移动时，强制WPF重新计算路径并填充丢失的部分。这会带来极大的CPU负担，并且动画甚至可能看哦是变得断断续续

  可采用几种方法解决该问题。一种选择是使用一幅位图替换背景，WPF能够更高效地管理位图。更灵活的选择是使用位图缓存，这种方法可继续将存活的、可交互的元素作为背景。
  为启用位图缓存功能，将相应元素的CacheMode属性设置为BitmapCache。每个元素都提供了 CacheMode属性，这意味着您可以精确选择为哪个元素使用这一特征。

1

<Path CacheMode="BitmapCache"/>

  通过这个简单修改，可立即看到区别。首先，窗口显示的时间要稍长一些。但动画的运行将更平滑，并且CUP的负担将显著降低。可通过 Windows 任务管理器进行检——经常可以看到CPU 的负担从接近 100%减少到20%以下。

  通常，当启用位图缓存时，WPF采用元素当前尺寸的快照并将其位图复制到显卡中。如果之后使用 ScaleTransfomm 放大元素，这会变成一个问题。在这种情况下，将放大缓存的位图,而不是实际的元素，当放大元素时这会导致模糊放大以及色块。

  例如，设想一个修订过的示例。在示例中，第二个同步动画扩展Path 使其为原始尺寸的10倍，然后缩回原始尺寸。为确保具有良好的显示质量，可使用5倍于Path 原始尺寸的尺寸缓存其位图:

1
2
3
4
5

<Path...>
    <Path.CacheMode>
        <BitmapCache RenderAtScale="5"/>
    </Path.CacheMode>
</Path>

  这样可解决像素化问题。虽然缓存的位图仍比Pat的最大动画尺寸(最大尺寸达 10 倍于其原始尺寸)小，但显卡能使位图的尺寸加倍，从5倍到10倍，而不会有任何明显的缩放问题。更重要的是，这可使应用程序避免过多地使用显存。