WPF 之动画

前提概念

1）触发器，对触发器不熟的，可以先看 WPF之触发器

1. 类结构关系

本次章节，我们只讲动画中的 DoubleAnimation 动画。以此为基础，了解动画。
我们先来看看 WPF 实现动画时涉及到的类，以及他们之间的关系。

1.1 关系图如下：

1.2 图中关系解释：

1）闭合箭头表示继承，空心箭头表示关联；

这里用到单向关联比如：BeginStoryboard 单向关联 Storyboard，
即 BeginStoryboard 知道 Storyboard 的存在，可以调用 Storyboard 的方法和属性。

2）Trigger、DataTrigger、EventTrigger 都继承自 TriggerBase，他们拥有值类型为 TriggerActionCollection 的属性，这里暂时将 TriggerBase 单向关联到 TriggerAction；

TriggerActionCollection 是值为 TriggerAction 对象的集合。

3）BeginStoryboard 继承自 TriggerAction，因此可以作为 TriggerBase 中 EnterActions、ExitActions、Actions 的子项；
4）BeginStoryboard 用于启动 Storyboard 并将动画分发给动画的目标属性和对象；
5）Storyboard 是 TimelineGroup 的子类，拥有类型为 TimelineCollection 的属性 Children，因此可以往里添加继承自 Timeline 类的类的对象，例如 DoubleAnimation。
6）DoubleAnimation 表示在指定的时间内，使用线性内擦，对两个目标值之间的 System.Double 属性值进行动画处理。

简单地说：就是用动画展示某控件的属性值从一个 double 值变化到另一个 double 值的过程。
例如：用动画展示一个 Button 控件的 Width 从 100 放大的 200 的过程。

讲了这么多，放个代码上来，也许会更好理解：

// 代码：
<Button>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <EventTrigger.Actions>                               
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>
// 解释：
<Button>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                //事件触发器：当 window 加载时，触发
                <EventTrigger RoutedEvent="Window.Loaded">
                    <EventTrigger.Actions>                               
                        //往 Actions 这个 TriggerActionCollection 添加 一个或多个类为 BeginStoryboard 的对象
                        <BeginStoryboard>
                            //BeginStoryboard 有个属性为 Storyboard
                            <Storyboard>
                                //Storyboard 是 TimelineGroup 的子类，拥有类型为 TimelineCollection 的属性 Children，可以往里添加 Timeline 类的对象，例如 DoubleAnimation
                                <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

当然，你也可以用 DataTrigger、Trigger 的 EnterActions、ExitActions 来添加 BeginStoryboard。

2. 动画的分发

上述讲了 WPF 来触发动画的原理，接下来来看动画的分发。
即把这个动画给谁动，怎么动。

1. 我们再回过头看 BeginStoryboard、 Storyboard 和 DoubleAnimation 的解释：

1）BeginStoryboard：启动 Storyboard，并将动画分发给动画的目标对象和属性；
2）Storyboard：为容器的子动画提供对象和属性目标信息的容器时间线；
3）DoubleAnimation：在指定的时间内，使用线性内擦，对两个目标值之间的 System.Double 属性值进行动画处理。

2. 定义 DoubleAnimation 的代码

<DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:0.2"/>

1）Storyboard.TargetProperty 是附加属性，类似于 Grid 面板下的控件中的 Grid.Row；
这里把动画的属性绑定到 Width；
2）Form 表示起始值，To 表示目标值，Duration 表示时间；
3）Duration、From、To 结合起来，就是 DoubleAnimation 的功能：在指定的时间内，将属性值从一个 Double 值"变到"另一个 Double 值的动画处理。

内容将同步到微信公众号：广州 WPF 开发