WPF 动画

Posted 2020-10-04 挨踢老干部的博客

1. 动画的基础

动画是WPF的核心部分，随着对窗体程序体验的要求增加，动画表现越来越重要，WPF天生就是基于图形的，所以天生具有动画的基因，我们常说的动画，无非就三种方式实现：

1. 逐帧动画

逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在"连续的关键帧"中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。这就和我们的动画片的原理差不多，假如做过FLASH的人，估计对这个比较熟悉。

1. 线性插值

线性插值，也就是给定初始点集合和终止点集合，然后给定一个映射关系。对一一对应的点的位置，即对坐标、尺寸等进行线性插值的动画。

1. 路径动画

路径动画也属于线性插值的一种特殊类型，只是其明确指定了一个运行路径

1. 时间轴Timeline

Timeline翻译过来就是所谓的时间轴，每个动画，都是在一定时间区间内运行，这个时间区间就是时间轴，时间轴能够控制动画的运行速度和运行长度等特征。

1. WPF简单动画

WPF比较简单的动画，就是线性插值动画，其主要是通过改变元素的依赖属性实现的动画，但是这里要注意一个问题，就是实现修改依赖属性的动画，需要注意这些属性所对应的类型动画类，例如Width属于双精度类型，那么对应的动画类即为DoubleAnimation。

所以有上面这个限制，就决定了，不是所有的依赖属性都可以实现动画，只有对应类型的动画类，才可以实现动画，比如我们常用的HorizonalAlignment是一个枚举类型，其没有对应的动画类，那么就无法形成对应的动画。

1. Animation

WPF中所有的动画类都继承自Animation,比如ColorAnimation和DoubleAnimation等，一般插值动画的命名规则就是"类型名+Animation"的方式，但是逐帧动画其主要的命名方式是"类型名+AnimationUsingKeyFrames"的形式进行命名。路径动画的主要命名规则是"类型名+AnimationUsingPath"。我们查看MSDN的System.Window.Media.Animation命名空间，可以知道WPF的动画中类繁多，如何能系统的学习这么多呢，其实只要我们掌握一个简单的DoubleAnimation，其他的基本的大同小异，记住一些基本的区别即可。因为XAML对泛型的支持不是很好，所以会造成这么多功能比较相似的动画类。我们编写第一个动画：

代码1-1_1

<Window x:Class="Ani.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Ani"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Button Content="动画" x:Name="btn1"  Canvas.Left="122" Canvas.Top="69" Height="73" Width="139" Click="Button_Click"></Button>
    </Canvas>
</Window>

我们定义了一个按钮，按钮触发一个点击事件，在对应的代码中，我们编写如下：

代码1-1_2

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Ani
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {

            DoubleAnimation witdhAnimation = new DoubleAnimation();
            witdhAnimation.From = 100;
            witdhAnimation.To = 200;
            witdhAnimation.Duration = TimeSpan.FromSeconds(5);
            this.btn1.BeginAnimation(Button.WidthProperty, witdhAnimation);

        }
    }
}

点击按钮，就可以看到按钮从尺寸100，缓缓变成200。我们看看DoubleAnimation的几个关键属性：

From：动画的开始值，设置完成后，不管动画执行多少次，都是以动画总是以设置值开始动画。假如不想使用固定的From，可以通过编码的方式赋值，如From=this.Width等等等，读取当前的宽度，也可以赋值，忽略此属性，那么From会自动读取当前的值为起点值。

To：动画的结束值，设置完成后，动画会执行到To指定的值。To也可以为空，为空的情况下，当前动画会变化到初始化值，比如按钮宽度是50，From设置为30，To没有设定，那么动画就是从30变为50。

By：代表变化值，可以是正负，代表To-From的值，所以可以看出，By属性只适用数值类型的动画。

Duration：代表动画的运行时间，Duration是一个Duration对象，你查看其定义，就可以知道，其内部有一个隐式转换TimeSpan，所以通过TimeSpan赋值

public static implicit operator Duration(TimeSpan timeSpan);

FillBehavior：代表动画运行的行为，其有两个选项HoldEnd和Stop,HoldEnd动画结束后，控件保留To所指定的值，Stop的话，动画结束，控件会回到From指定的值。

RepeatBehavior：动画是否重复执行，其只有一个选择Forever，要么重复，要么不重复，这里属性有点鸡肋，假如我们想重复3次，就麻烦。

BeginTime：表示开始的时间，可以实现延迟执行的效果

SpeedRatio：设置动画的速度，动画的速度可以通过Duration的设定改变，为什么又要不这个属性呢。其实在有些情况还是比较有用的，比如改变动画速度，但不影像动画总时间的情况。

AccelerationRatio和DecelerationRatio ：改变动画的线性运行方式，AccelerationRatio代表开始的速度，DecelerationRatio代表结束的速度，可以设置开始和结束实现线性的动态效果，AccelerationRatio和DecelerationRatio的值相加不能超过1，他们主要是设置在整个动画过程中的比例。

AutoReverse：设置动画是否反向播放，假如设置true,动画会返回到初始化值，但动画的时间同时会增加两倍。