《Programming WPF》翻译 第8章 1.动画基础

原文:《Programming WPF》翻译 第8章 1.动画基础

动画包括在一段时间内改变用户界面的某些可见的特征，如它的大小、位置或颜色。你可以做到这一点，非常困难的通过创建一个timer并在每一个timer_tick句柄中修改用户界面的外观。当然，这是动画在Win32或Windows Forms中典型的做法。幸运的是，WPF照顾到这些低级别的细节。动画，就像WPF中的其他特征，简单的要求我们声明想要做的。系统会为我们照顾它的实现。

所有的WPF动画支持归结为，在一段时间内改变一个或多个属性。这意味着有很多限制在WPF动画系统能为你做些什么上。例如，可视化树全部保持着同样的结构。一个动画不可能为你添加或移除元素（虽然为动画设置属性使元素可见是可能的）。没有办法提供一个“before”和“after”的场景，或者使WPF在这两者间添加新场景。这意味这没有一种自动的方法——做一个动画，从一种外观转换到另一种，其程度足以使某个元素从起始位置滑动到终止位置。

了解什么动画可以或不可以实现的关键是，理解它的聚焦属性的天性。它只是改变了你通知的无论任何属性。当决定任何给一个UI设计动画时，问一下自己你想要确切地看到什么——经由动画的中途，以及计算出如何设置需要的属性——从而可以捕获中途的点。如果你把这应用到动画进程：从一个水平的StackPanel转换为垂直的，这明显会有一个问题。你不能在StackPanel上设置一个属性，使得它在水平布局和垂直布局的中途显示什么。如果你不能这么做，那么动画系统也不能！（如果你想达到这种类型的效果，你可以使用Canvas，它允许在任意位置放置的元素。你可能需要手动的为每个元素设置动画中的位置和大小。）

在我们详细看到动画的任意部分之前，让我们检查一个简单的例子。示例8-1显示了包含一个单独的红色椭圆的窗体标记。这个椭圆元素的Height被设置为100，但是他没有直接声明一个Width属性。替代的，Width属性由一个动画决定。椭圆会在一段时间内改变它的宽度。

示例8-1

<Window Text="Simple Animation" Width="320" Height="150"

    xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"

    xmlns="http://schemas.microsoft.com/winfx/avalon/2005">



    <Window.Storyboards>

        <SetterTimeline TargetName="myEllipse" Path="(Ellipse.Width)">

            <DoubleAnimation From="10" To="300" Duration="0:0:5"

                             RepeatBehavior="Forever" />

        </SetterTimeline>

    </Window.Storyboards>



    <Ellipse x:Name="myEllipse" Fill="Red" Height="100" />



</Window>

动画声明在Window.Storyboards属性中。Storyboard时一个动画的集合，用于调整多个动画。当动画定义在标记中时，它们总是出现在Storyboard中，尽是在简单的例子中——Storyboard中只有一个动画。

这个示例中的动画包含两部分，SetterTimeline和DoubleAnimation。SetterTimeline决定了通过TargetName属性设计了什么样的动画，这就涉及了椭圆的x:Name属性。它的Path属性指出了椭圆的Width是有动画效果的。

#Path属性需要被设置动画的属性和定义了该属性的类的名称。这是因为属性并不总是必须被它们应用到的类定义，你可能想要为附属属性设置动画，如Canvas.Left。为了一致性，你可能需要总是详细的指明类和属性，即使属性是目标对象的一个成员。

内嵌到SetterTimeline的DoubleAnimation决定了被设置动画效果的属性在一段时间内如何改变。“Double”在DoubleAnimation中的意义是，被设置动画效果的属性是Double类型的，而不是Int32、Point、Size或其它类型。并不是所有的类型以相同的方式设置动画效果。例如，Point是一个二维的值，意味着我们可能想要控制它的动画外观——这对于一个一维的类型如Double是没有意义的。Ellipse.Width属性——我们在这里为它设置动画——是Double类型的，因此我们必须使用DoubleAnimation。

示例8-1设置了From属性为10，To属性为300，以及Duration属性为0:0:5。正如你可能猜到的，这意味着Width起始于10，并且逐渐改变到300，在5秒的时间里。RepeatBehavior属性被设置为Forever，指出一旦动画到达了终点，它应该回到起点并且不确定的重复。图8-1显示了这个椭圆在动画中是如何显示各种形状的。

图8-1

确保你在动画中详细指定了任意Duration的所有3个部分的值。值2被解释为2小时。如果你的意思是2秒，你必须使用0:0:2，意味着0小时0分2秒。

正如我们看到的，这里有很多正确选择属性是如何改变的方式，确保它是如何直接支持曲线运动以及速度上的改变，但正是这些方式，需要WPF在正确时间设置正确的值。

8.1.1可设置动画效果的属性

大多数可以影响元素外观的属性都可以设置动画效果。这里有三种需求，是一个属性能够被设置动画效果：属性必须是一个依赖属性，一个合适的动画类型必须是可利用的，以及目标元素必须派生于FrameworkElement。

动画系统依赖于依赖属性系统——可以自动更新属性值。第9张详细描述了依赖属性。大部分WPF元素属性都是依赖属性。

第二个需求是，属性的类型必须有一个相应的动画类型，涉及到像DoubleAnimation或PointAnimation的类型。WPF为大多数使用属性影响外观的类型提供了动画类型。唯一的例外是枚举类型。例如，StackPanel使用的Orientation类型，就没有相应的动画类型。这是有意义的——当你认为这个枚举只支持两个值，Horizontal或Vertical。这里没有办法表示两种选择之间的中间值，因此动画并不被支持。

你可以编写自己的动画类型。如果你写一个控件——属性中包含这些自定义的可以被设置动画效果的类型——这通常是有用的。技术上讲，没有什么可以阻止你为不支持动画效果的系统类型写一个动画类型。例如，理论上你可以写一个OrientationAnimation。然而，它在使用上是有限制的，因为在动画期间任意给定的时刻，是不能要求设置属性为这两个被支持的值：Horizontal或Vertical。没有办法在两个值之间设置平滑的动画，因此你能做到的最好是在图画的中途从一种转换到另一种。

上面列出的最后一个需求是，动画的目标元素必须是一个FrameworkElement。这通常不是一个问题，因为WPF的用户界面元素都派生于这个类。然而，这有时是你可能希望设置动画的数量，实际上不是FrameworkElement的属性，而是属性的内嵌属性。例如，示例8-1中的椭圆是红色的，但是我们可能想要为这个颜色设置动画。Fill属性的类型是Brush，xaml编译器解释这个Red值作为SolodColorBrush属性的简写。示例8-2显示了这个标记的完整版本。这是准确等价于在示例8-1中声明的单线条的Ellipse。

示例8-2

<Ellipse x:Name="myEllipse" Height="100">

    <Ellipse.Fill>

        <SolidColorBrush Color="Red" />

    </Ellipse.Fill>

</Ellipse>

这个完整的扩展版本使得在一定时间内改变一个椭圆的颜色更加清晰，我们需要为SolodColorBrush属性设置动画。但这里有个问题。SolodColorBrush不是一个FrameworkElement，因为笔刷并不是用户界面树的一部分。笔刷是非常轻量的描述元素外观的对象，而不是作为凭借自身能力的可见元素。你不能为Brush分配一个x:Name，同时它不能作为一个动画的直接目标。

这可能看起来是一个相当严格的约束。幸运的是，存在一种解决方案。动画可以把内嵌属性作为目标。SetterTimeline的Path属性可以影响到属性内部的子对象，我们可以使用它来为笔刷或其它类似的轻量类型的属性设置动画。

示例8-3显示了任何为椭圆的颜色设置动画。

示例8-3

<Window.Storyboards>

    <SetterTimeline TargetName="myEllipse"

                    Path="(Ellipse.Fill).(SolidColorBrush.Color)">

        <ColorAnimation 

 Duration="0:0:7" From="Red" To="Purple"

                        RepeatBehavior="Forever" AutoReverse="True" />

    </SetterTimeline>

</Window.Storyboards>

这个动画需要一个FrameworkElement作为它的目标，因此它的TargetName再一次指向了椭圆。SetterTimeline.Path属性唯一标志了Ellipse.Fill属性，以及指出了它想要深入到这个SolodColorBrush属性，以及设置了内嵌的Color属性。这个ColorAnimation接着详细指定了每7秒颜色会在红色和紫色之间渐变。

如果你使用了低级别的几何体类型（见第7章）来生成绘图，你就需要使用示例8-3中显示的技术，因为Geometry并不是直接派生于FrameworkElement的。你可以在Path的Data属性中为几何体设置动画——通过为Path指定动画目标和使用SetterTimeline的Path属性来详细指定内嵌在Path中的几何体的属性。同样的技术还用于为3-D基础设置动画。

SetterTimeline和各种动画类型都是timeline的例子。Timeline是动画的基础，因此我们将要详细的看一下这些技术。