如何制作简单动画使图形动态展示？
摘要：在可视化展现中，动画是强化数据表达，吸引用户的重要技术手段，本文将介绍动画的三种实现形式，以及如何具体地在HTMLCSS和Shader中去实现动画。
大家好，本文分享的是如何生成简单动画让图形动起来。
在可视化展现中，动画它是强化数据表达，吸引用户的重要技术手段。
在具体实现动画之前，我们先来了解一下动画的三种形式，分别是固定帧动画、增量动画和时序动画。
graph LR
A[动画的三种形式] --> B[固定帧动画]
A --> D[增量动画]
A --> E[时序动画]
B --> F[使用已生成的静态图像，将图像依次播放]
D --> C[动态绘制图像]
E --> C
固定帧动画的实现，是使用已生成的静态图像，然后将这些图像依次播放，而后面两种，增量动画和时序动画，都是需要动态绘制图像。可想而知，后面这两种动画形式会更灵活一些。
接下来，我们就来了解如何在HTML/CSS和Shader中实现动画效果。
HTML/CSS
首先，我们来了解如何在HTML/CSS中实现动画。
固定帧动画
先来看固定帧动画的一个例子，这个代码实现的是一个飞动的小鸟。
e.g.动态的小鸟
<!-- 固定帧动画 -->
<div v-show="checkedTab === 0" style="position: relative;">
<div class="fixed-frame"></div>
</div>
/*固定帧动画*/
.fixed-frame {
position: absolute;
left: 100px;
top: 100px;
width: 86px;
height: 60px;
zoom: 0.5;
background-repeat: no-repeat;
background-image: url("@/assets/bird.png");
background-position: -178px -2px;
animation: flappy .5s step-end infinite;
}
@keyframes flappy {
0% {background-position: -178px -2px;}
33% {background-position: -90px -2px;}
66% {background-position: -2px -2px;}
}
很显然，在实现这个固定帧动画之前，我们需要预先准备好静态图片，这个例子中我们使用的是雪碧图，也叫CSS精灵，是将小图合并在一起形成的图片，在这里我们设置background-image来指定背景图，然后通过animation动态修改background-position来逐帧切换，最终形成一个动态的效果。当然如果我们使用的是多张图片，直接切换background-image也是可以的。
其中step-end 会使 keyframes 动画到了定义的关键帧处直接突变，没有变化的过程。
通过这个例子我们能发现，固定帧动画实现起来非常简单，比较适合的场景是提供现成图片的动画帧图像，如果要去动态绘制图像，就不太合适。如果要生成动态绘制的图像，也就是非固定帧动画，通常会使用另外两种方式。
增量动画
先来看增量动画，其实从名称上看，我们就能有一个大致的概念，增量嘛，就是增加数量，所以增量动画就是在动画的每一帧给属性一个增量。
下面是一个简单的旋转方块的动画例子，是一个旋转的蓝色方块。
<!-- 增量动画 -->
<div style="position: relative;">
<div class="increase-frame" ref="increaseRef"></div>
</div>
/*增量动画*/
.increase-frame {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: blue;
transform-origin: 50% 50%;
}
let rotation = 0;
requestAnimationFrame(function update() {
increaseRef.value.style.transform = `rotate(${rotation ++}deg)`;
requestAnimationFrame(update);
});
以上动画实现的关键逻辑就在于修改rotation的值，在每次绘制的时候将它加1。
这种绘制方式实现起来也比较简单，但是它不太容易去控制动画的细节，比如动画周期、变化率、轨迹等等；而且它定义的是状态变化，也就是根据上一刻的状态来计算得到下一刻的状态，这种方式在Shader中实现起来并不太方便，需要像上篇所提到的那样，去使用后期通道来进行处理，很显然，这样做会比较繁琐。
所以如果是比较复杂的动画，我们一般通过定义时间和动画函数来实现，也就是通过时序动画的方式来实现动画效果。
时序动画
关于如何去实现时序动画，我们也直接来看个例子。
e.g.旋转的蓝色方块
const startAngle = 0;
const T = 2000; // 周期。旋转这一周的时间
let startTime = null;
function update() {
startTime = startTime === null ? Date.now() : startTime;
const p = (Date.now() - startTime) / T;
const angle = startAngle + p * 360;
timeOrderRef.value.style.transform = `rotate(${angle}deg)`;
requestAnimationFrame(update);
}
update();
这段代码中，我们定义了三个变量，startAngle是起始旋转角度，T是旋转周期，代表完成一次动画、一次旋转需要的时间，startTime表示每一次动画的开始时间。
在update函数中，我们通过Date.now() - startTime去得到当前经过的时间，然后除以周期T，就能得到旋转进度 p ，最后根据起始旋转角度和进度 p，计算得到旋转角度angle，并且赋值给transform属性，这样就实现了旋转动画。
根据这个例子，我们可以将时序动画的实现总结为三个步骤：
第一步，定义初始时间和周期；
第二步，在update中计算当前经过的时间和进度；
第三步，通过进度来更新动画元素的属性。
时序动画的优点是，可以更直观、精确地控制动画的周期（也是速度）等参数；它的缺点就是写法相对比较复杂，但是因为它的优点、可以更好控制动画的效果，所以在动画实现中最为常用。
标准动画模型
既然时序动画是最常用的动画实现形式，那么我们可以把它的三个步骤抽象成标准的动画模型，来方便后续的动画实现。
首先，定义一个类、Timing用于处理时间
/**
* 用于处理动画的时间
*/
export class Timing {
constructor({duration, iterations = 1} = {}) {
this.startTime = Date.now();
this.duration = duration; // 周期
this.iterations = iterations; // 重复次数
}
/**
* 动画经过的时间
* @returns {number}
*/
get time() {
return Date.now() - this.startTime;
}
/**
* 动画进度
* @returns {number|number}
*/
get p() {
// 动画持续了几个周期
const progress = Math.min(this.time / this.duration, this.iterations);
// 动画已结束：进度1
// 动画未结束：0~1
return this.isFinished ? 1 : progress % 1;
}
/**
* 动画是否已结束
* @returns {boolean}
*/
get isFinished() {
// 动画持续了几个周期是否已达到指定次数
return this.time / this.duration >= this.iterations;
}
}
这几个方法都很容易理解。
然后，实现一个Animator类，用于控制动画过程。
export class Animator {
constructor({duration, iterations}) {
this.timingParam = {duration, iterations};
}
/**
* 执行动画
* @param target
* @param update
* @returns {Promise<unknown>}
*/
animate(target, update) {
let frameIndex = 0; // 帧序号
const timing = new Timing(this.timingParam);
return new Promise(resolve => {
function next() {
// 通过执行update更新动画
if(update({target, frameIndex, timing}) !== false
&& !timing.isFinished) {
requestAnimationFrame(next);
} else {
resolve(timing);
}
frameIndex ++;
}
next();
})
}
}
animate方法，会在执行时创建一个timing对象，最后返回一个promise对象。这里通过执行update更新动画，在动画结束时，resolve这个promise。
现在我们就可以使用这个模型，来尝试实现动画效果了。来看下面这个例子。
在这个例子中，我们让每个方块转动的周期是1秒，一共旋转1.5个周期（也就是540度）。
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
const blocks = document.querySelectorAll('.block');
const animator = new Animator({duration: 1000, iterations: 1.5});
(async function() {
let i = 0;
while(true) {
await animator.animate(blocks[i++ % 4], ({target, timing}) => {
target.style.transform = `rotate(${timing.p * 360}deg)`;
});
}
}());
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 300px;
}
.block {
width: 100px;
height: 100px;
margin: 20px;
flex-shrink: 0;
transform-origin: 50% 50%;
&:nth-child(1) {background-color: red;}
&:nth-child(2) {background-color: blue;}
&:nth-child(3) {background-color: green;}
&:nth-child(4) {background-color: orange;}
}
可以看到，这个效果我们很方便地通过前面定义的Animator实现了。
插值与缓动函数
在前面的例子中，我们看到的动画效果都是匀速运动的，图像是匀速变化的，显然在实际中这是不够满足需求的，既然时序动画可以让我们更容易地控制动画的细节，所以它也可以让我们实现一些不规则的运动。
假设已知元素的起始状态、结束状态和运动周期，如果想要让它进行不规则运动，我们可以使用插值的方式来控制每一帧的展现。
下面我们来看一个动画：这是一个匀速运动的方块，我们用Animator实现，让这个方块从100px处匀速运动到400px。
const block = document.querySelector('.block');
const animator = new Animator({duration: 3000});
document.addEventListener('click', () => {
animator.animate({el: block, start: 100, end: 400}, ({target: {el, start, end}, timing: {p}}) => {
const left = start * (1 - p) + end * p;
el.style.left = `${left}px`;
});
});
这里我们用了一个线性插值方法：left = start * (1 - p) + end * p。线性插值可以很方便地实现属性的均匀变化，所以用它来让方块做匀速运动是非常简单的。
如果要让方块进行非匀速运动，比如匀加速运动，我们仍然可以用线性插值的方式，只不过要对参数 p 做一个函数映射。比如要让方块做初速度为0的匀加速运动，我们可以将 p 映射为p 的平方；如果要让方块做末速度为0的匀减速运动，可以将p映射为p*(2-p)。那为什么是这样映射呢？
这就要提到匀加速和匀减速的物理计算公式了。有些小伙伴很久没接触物理公式，可能会有些遗忘，这里简单回顾一下。
假设，某个物体在做初速度为0的匀加速运动，运动的总时间为T，总位移为S。那么，它的加速度和在 t 时刻的位移的计算公式是这样的：
\[a = \frac{2S}{T^2} \\
S_t = \frac{1}{2}at^2 = S(\frac{t}{T})^2 = Sp^2
\]
所以在匀加速运动中，我们把 p 映射为 p 的平方。
同样的，如果物体在做匀减速运动，那么，它的加速度和在 t 时刻的位移的计算公式是这样的：
\[a = -\frac{2S}{T^2} \\
S_t = \frac{2S}{T}t - S(\frac{t}{T})^2 = Sp(2 - p)
\]
所以在匀减速运动中，我们把 p 映射为 p*(2 - p)。
在实际应用中，我们还可以对p 应用更多映射，来实现不同的动画效果，为了方便实现更多的效果，我们可以抽象出一个函数来专门处理p的映射，这个函数就叫做缓动函数。
我们可以在Timing类中直接增加一个缓动函数easing，在获取p 的时候，直接用 this.easing(progress % 1)取代progress %1。
现在我们可以来尝试使用下缓动函数。
const animator2 = new Animator({duration: 3000, easing: p => p ** 2});
document.addEventListener('click', () => {
animator2.animate({el: block, start: 100, end: 400}, ({target: {el, start, end}, timing: {p}}) => {
const left = start * (1 - p) + end * p;
el.style.left = `${left}px`;
});
});
缓动函数有很多种，实际中比较常用的是贝塞尔曲线缓动，我们可以使用现成的JavaScript库bezier-easing来生成贝塞尔缓动函数，比如：
const animator3 = new Animator({duration: 3000, easing: BesizerEasing(0.5, -1.5, 0.5, 2.5)});
document.addEventListener('click', () => {
animator3.animate({el: block, start: 100, end: 400}, ({target: {el, start, end}, timing: {p}}) => {
const left = start * (1 - p) + end * p;
el.style.left = `${left}px`;
});
});
贝塞尔缓动函数有很多种，大家可以参考easing.net这个网站，尝试利用里面提供的缓动函数。
看到这里，关于如何去实现动画，相信大家都有一定的思路了。那么现在我们也可以尝试在Shader中去实现动画效果。
Shader
固定帧动画
首先我们还是先来看固定帧动画的实现。
直接来看具体的例子，还是之前那个飞动的小鸟的例子。
// 片元着色器
varying vec2 vUv;
uniform sampler2D tMap;
uniform float fWidth;
uniform vec2 vFrames[3]; // 3个二维向量，二维向量表示每一帧动画的图片起始x和结束x坐标
uniform int frameIndex;
void main() {
vec2 uv = vUv;
for (int i = 0; i < 3; i ++) {
// 纹理坐标ux.x的取值范围
// 第0帧：[2/272, 88/272] 约等于 [0.007,0.323]
// 第1帧：[90/272, 176/272] 约等于 [0.330,0.647]
// 第2帧：[178/272, 264/272] 约等于 [0.654,0.970]
uv.x = mix(vFrames[i].x, vFrames[i].y, vUv.x) / fWidth; // vUv 到 uv的映射
if(float(i) == mod(float(frameIndex), 3.0)) break; // frameIndex除3的余数：0-循环一次；1-循环两次；2-循环三次。（渲染第几帧）
}
vec4 color = texture2D(tMap, uv); // 按照uv坐标取色值
gl_FragColor = color;
}
我们在片元着色器中获取纹理，通过纹理坐标读取图像上的像素信息。
vFrames是一个重要的参数，包含3个二维向量，每一个二维向量表示一帧图片的起始x和结束x坐标。
for循环是main函数中的关键部分，在循环内部，我们用二维向量中的两个坐标，来计算插值，最后除以图片的总宽度，得到一个 vUv 到 uv 坐标映射。
在对纹理进行采样时，我们就用这个uv的坐标值去进行颜色提取。
然后看JavaScript部分的代码：
(async function() {
renderer.uniforms.tMap = await renderer.loadTexture(birdpng);
renderer.uniforms.vFrames = [2, 88, 90, 176, 178, 264];
renderer.uniforms.fWidth = 272;
renderer.uniforms.frameIndex = 0;
setInterval(() => {
renderer.uniforms.frameIndex ++;
}, 200);
// 顶点坐标（WebGL画布绘制范围）
const x = 43 / glRef.value.width; // 每帧的宽度（86/2）
const y = 30 / glRef.value.height; // 每帧的高度(60/2)
renderer.setMeshData([{
positions: [
[-x, -y],
[-x, y],
[x, y],
[x, -y]
],
attributes: {
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0]
]
},
cells: [
[0, 1, 2],
[2, 0, 3]
]
}]);
renderer.render();
}());
我们按照每帧图片的宽高比例设置了顶点坐标的范围，vFrames数组存储的是每一帧图像对应的x坐标范围，动画切换的关键代码就是setInterval中的frameIndex ++。
可以看到在Shader中实现固定帧动画也是比较简单的。
非固定帧动画
对于非固定帧动画，因为时序动画是最常用的实现形式，所以我们直接看时序动画。
大家都知道，在WebGL中有两类着色器，那么对动画的实现应该写在哪类着色器中呢？答案是，两个都可以。
顶点着色器
我们先来看顶点着色器的例子。
attribute vec2 a_vertexPosition;
attribute vec2 uv;
uniform float rotation;
void main() {
gl_PointSize = 1.0;
float c = cos(rotation);
float s = sin(rotation);
mat3 transformMatrix = mat3(
c, s, 0,
-s, c, 0,
0, 0, 1
);
vec3 pos = transformMatrix * vec3(a_vertexPosition, 1); // 映射新的坐标
gl_Position = vec4(pos, 1);
}
这段代码中我们要实现的是一个旋转的红色方块。在这里我们用到了旋转矩阵，对于transform不熟悉的小伙伴可以参考我之前的文章《CSS transform与仿射变换》。
在Shader中会绘制出一个红色的正方形，然后三维的齐次矩阵会让这个红色方块旋转起来。我们可以直接通过下面这段JavaScript去动态更新旋转的角度rotation，就能看到动画效果了：
// ...
renderer.uniforms.rotation = 0.0;
requestAnimationFrame(function update() {
renderer.uniforms.rotation += 0.05;
requestAnimationFrame(update);
});
// ...
我们也可以使用前面定义的Animator对象去更精确地控制图形的旋转效果。
// ...
renderer.uniforms.rotation = 0.0;
const animator = new Animator({duration: 2000, iterations: Infinity});
animator.animate(renderer, ({target, timing}) => {
target.uniforms.rotation = timing.p * 2 * Math.PI;
});
// ...
可以看到，这里更新uniform属性和前面更新HTML元素的属性，这两种操作从代码上看很相似。
片元着色器
接着我们来看片元着色器的例子。
varying vec2 vUv;
uniform vec4 color;
uniform float rotation;
void main() {
vec2 st = 2.0 * (vUv - vec2(0.5));
float c = cos(rotation);
float s = sin(rotation);
mat3 transformMatrix = mat3(
c, s, 0,
-s, c, 0,
0, 0, 1
);
vec3 pos = transformMatrix * vec3(st, 1.0); // 坐标系旋转
float d1 = 1.0 - smoothstep(0.5, 0.505, abs(pos.x)); // abs(x)<0.5 d1=1
float d2 = 1.0 - smoothstep(0.5, 0.505, abs(pos.y)); // abs(y)<0.5 d2=1
gl_FragColor = d1 * d2 * color;
}
这段代码中，我们通过距离场着色的方式绘制了正方形，同样传递了rotation来控制方块的旋转角度。
我们能很明显的发现，片元着色器和前面顶点着色器的实现，最终实现的效果上，两个方块的旋转方向不一致。顶点着色器中是逆时针旋转，片元着色器中是顺时针旋转，这是因为在顶点着色器中，我们是直接改变了顶点坐标，通过旋转矩阵的处理映射到了新的顶点，而在片元着色器中的坐标变换，相当于是把坐标系做了旋转，最终绘图的图形是相对于新的坐标系去计算距离场的距离，所以最终就呈现了相反的旋转效果。
选择
那么既然两类着色器都能实现动画效果，在实际使用中我们要怎么选择呢？一般来说，动画如果能使用顶点着色器实现，会尽量在顶点着色器中实现。因为在绘制一帧画面的时候，顶点着色器的运算量会大大少于片元着色器，所以使用顶点着色器消耗的性能更少。
但是假如我们需要绘制更复杂的效果，比如运用大量的重复、随机、噪声，那么使用片元着色器更合适。
所以具体的，还是要根据我们最终想要达到的效果、去选择合适的实现方式。
Shader缓动函数
和HTML/CSS中的例子一样，如果我们想要在Shader中实现非匀速运动，也可以直接使用Animator对象，在JavaScript中使用缓动函数，但是在WebGL中除了这种方式之外，我们也可以选择直接把缓动函数写在Shader中，比如下面这个例子：
// vertex
attribute vec2 a_vertexPosition;
uniform vec4 uFromTo;
uniform float uTime;
float easing(in float p) {
// return smoothstep(0.0, 1.0, p);
// return clamp(p * p, 0.0, 1.0); // 匀加速
return clamp(p * (2.0 - p), 0.0, 1.0); // 0->1->0 // 先减速后加速
// if(p < 1.0) return clamp(p * (2.0 - p), 0.0, 1.0);
// else return 1.0;
}
void main() {
gl_PointSize = 1.0;
vec2 from = uFromTo.xy;
vec2 to = uFromTo.zw;
float p = easing(uTime / 2.0);
vec2 translation = mix(from, to, p);
mat3 transformMatrix = mat3(
1, 0, 0,
0, 1, 0,
translation, 1
);
vec3 pos = transformMatrix * vec3(a_vertexPosition, 1);
gl_Position = vec4(pos, 1);
}
可以用smoothstep(0.0, 1.0, p)来让方块做平滑变速运动；也可以替换缓动函数，使用比如clamp(p*p, 0.0, 1.0)或clamp(p*(2.0-p), 0.0, 1.0)来实现匀加速、匀减速的运动效果。
总结
以上就是关于动画实现的分享，主要介绍了动画的三种实现形式和具体操作，本文中都是比较简单的一些动画例子，希望能给到大家一些启发，去实现更复杂、更有意思的动画效果。
参考代码-HTML/CSS
参考代码-Shader
效果预览-HTML/CSS
效果预览-Shader