如何制作简单动画使图形动态展示？
摘要：在可视化展现中，动画是强化数据表达，吸引用户的重要技术手段，本文将介绍动画的三种实现形式，以及如何具体地在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。