线性插值与矢量线性插值动画_看完这篇文章，不要再说不懂动画了

动画是WebGL的心脏。正是因为有了动画，一个静态的WebGL场景才会变成栩栩如生的真实体验，让场景更加生动形象。WebGL并没有太多预置制作动画的方法，然而Three.js拥有一些非常专业的动画库弥补Three.js的不足。总的来说，动画就是屏幕上的物体随着时间的变化而发生改变，比如汽车行驶、灯光闪缩、面部表情的变化。这些都是不同的动画效果，通过不同的动画技术实现，但究其原理，这些都是随着时间改变场景渲染的结果。

帧动画

电脑动画可以溯源于电影卡通动画。电影胶片的动画效果实际上是由一系列的静态图片串联而成的，每张图片被称为帧，当这些图片按照顺序呈现在人们眼前时，视觉暂留将会欺骗大脑，形成一个流畅的运动场景。在卡通片中，人们使用一系列的透明蒙板叠加在静态的背景上，创造出蒙板内容相对于背景运动的视觉效果。这种按照每秒固定速率、按顺序连续播放独立帧的动画技术，被称为帧动画

早期的影片拍摄中，电影的拍摄和回放速率是每秒播放24张静态图片，也就是说帧率为24帧/秒(FPS)。 这一速度完全可以胜任微光情况下的大屏幕投影。但是在电脑动画和3D游戏中，现在会使用更高的帧率，一般是30FPS到60FPS。Adobe Flash是我们常用的一个动画系统，它使用的是24FPS的帧率，这是为了照顾到传统动画设计师的习惯。

常见的gif动态图，就是一种很典型的帧动画，使用PhotoShop打开gif图片，你会发现它实际上是有很多张图片组合而成的。

帧动画

时间动画

帧动画有一个很大的缺陷：因为指定了一个固定的速率，所以动画播放器会认为永远不会以更高的速率播放该动画，即使电脑支持更高的速率。这对于胶片电影来说不是什么大问题，因为电影工业中的硬件还是有统一标准的。但是在电脑动画业界，各个设备的性能可以说是千差万别。如果你用24FPS创建了一个动画，但是你的电脑其实可以处理60FPS，你实际上就等于剥夺了用户观察更高分辨率和更高平滑度动画的权利。

而时间动画就是为了解决这个问题诞生的。在时间动画中，一系列的矢量图都与某个时间点关联，而帧率则并不固定。在这种情况下，电脑可以一次呈现这些矢量图并尽量频繁地在帧与帧之间进行插值，这样就可以实现最好的图形质量和最平滑的变换效果。

插值与补间动画

矢量图与位图有着根本的区别。相比于在屏幕上显示一张位图，矢量图则是由程序调用绘制图库并使用线和多边形等图形基元来绘制的。因此，动画生成器可以利用一个被称为补间动画的动画技术来节省绘制时间。补间动画实际上是生成一对矢量值的中间值的过程。在补间动画中，动画生成器不需要为每一帧提供图形的矢量值，而是每隔0.5秒或在预定位置提供这些值，这被称为关键帧，电脑会负责生成中间值。

补间动画使用了一种叫做插值的技巧。插值是已知两个值然后根据一个标量生成一个中间值。

插值

如上图所示，对于任意A和B，以及一个介于0到1之间的分量u，插值P等于

P(u)=A+u(B−A)

这时最简单的线性插值，另外还有复杂的样条插值(曲线插值)、多项式插值等等。在3D动画中，插值用于计算3D空间中的位置、旋转、颜色、透明度等等属性的中间值。

关节动画

关节动画有一个显著的特点：物体的运动是围绕着一个或多个相对固定的点来运动的。现实生活中，机器人、汽车、自行车等这些非生命体的运动，往往属于关节动画。

比如我们想要创建一个机器人动画，它可以行走并挥舞手臂。那么可以这样设计一个层级结构：机器人的身体包括上半身和下半身，上半身包括手臂和躯干，手臂又包含上臂和下臂，下臂又包含手掌和指关节。依次类推。通过正确地构造层级并为相应的部分制作动画。这种通过构建层级让各自独立的局部分别运动最终组成整体动画的技术，被称为关节动画。

关节动画

蒙皮动画

对于自然界的生物来说，它们的运动可以理解为蒙皮动画。比如马的奔跑、植物被风吹动摇曳等等，这些动作往往不是局部运动，而是牵一发动全身。换句话说，需要改变网格的几何形状，如皮肤表面的褶皱、凸起的肌肉等等。这种情况下使用关节动画几乎是不可能的了，蒙皮动画技术将是最好的选择。

蒙皮动画又叫单一网格动画，它专注于对网格顶点的变形，也就是所谓的蒙皮。这里需要介绍另外一个动画效果中的基本层级——骨骼。骨骼相当于机器人的身体，但它只是用来制作动画效果的理论对象，并不会直接显示在用户的显示屏上。通过改变骨骼属性，并设定好骨骼是如何改变蒙皮的，二者结合起来就形成了蒙皮动画。

蒙皮动画

目标变形动画

目标变形动画主要是通过对网格顶点的插值计算来实现变形动画效果。通常会先将网格顶点的一个子集连同索引存储起来，作为变形目标，用于生成补间动画。补间动画会对变形目标中的顶点值进行插值，然后动画系统会使用插值之后的顶点值改变网格属性。

变形目标对于面部表情变化和其他使用蒙皮动画很难表现的细微效果来说非常使用。

目标变形动画

关键帧动画

常常都能听到“关键帧动画”术语，但关键帧动画并不是一种动画类型，我们可以在帧动画中使用关键帧，也可以在时间动画中使用关键帧。换句话说，关键帧动画是适用于帧动画和时间动画的处理技术。但为什么关键帧动画是经常出现在人们的口中呢？

普通、简单的动画效果，往往使用简单的插值技巧就能实现。但实际工作当中，我们往往面临的是繁琐而又复杂的动画制作挑战。而正是这种更复杂的动画效果，也推动了关键帧动画这种术语的频繁出现。

相对于仅仅指定一对值来进行插值的简单动画而言，关键帧动画中包含一系列值，每个连续值之间可以有不用的持续时间，插值方法既有简单的线性插值，又有复杂的样条插值。

因此，涉及到复杂动画效果的帧动画或者时间动画，都可以叫做关键帧动画。