[动图] 前端动图实现方式整理

前端如果想在页面某个区域实现动图效果可以使用下面四种方式。
1、mp4
2、gif
3、帧序列(png/jpg + css)
4、lottie-web + json

1、mp4视频方式实现。(绝大多数场景都不推荐)
将动画制作为mp4视频文件，然后在网页上使用<video>标签嵌入视频播放器来显示动画。这是一种简单的方法，也能够实现相当复杂的动图，视频的分辨率一旦很高，视频的文件会变得很大，这会导致页面加载较慢，因为整个视频文件需要下载。

2、gif动图实现。gif是一种常见的文件格式，支持多帧动画(一个.gif文件本身就是一个多帧动画)。那么将动图制作为gif文件，用<img>标签放入网页中，也是可以实现动图功能的。但gif文件会在颜色和图像质量上受限，如果是高分辨率的gif图，gif图的体积也会很大，在高分辨率场景及需要自适应的场景都不是个好的实现方式。

3、帧序列实现。帧序列的实现原理是不断切换视觉内图片内容，利用视觉滞留生理现象来实现连续播放的动画效果。

帧序列动画的实现又可以细分为：
3a.多张同尺寸图片 + js; 3b.雪碧图 + js 3c.雪碧图 + css三种方式。
只推荐3c这种方式。

将多个同尺寸的图像(图像item)合并为一张长图，这张长图可以是宽度很宽的(多张图横向排列)，可以是长度很长的(多张图纵向排列)，其中每个图像item都是动画的一帧，合并出来的长图就是雪碧图了。

雪碧图用img标签放置到页面中，img标签的尺寸是一个图像item的尺寸。用CSS让图像每隔一个时间间隔(如1/24秒)平移一个固定距离，一秒钟内多次平移固定距离，就可以实现动图效果。

帧序列实现可以用于手机app，在物理尺寸比较小的设备上，可用性相当高。

4、lottie-web + json实现。 lottie-web是一个开源库，允许在网页上播放由Adobe AE(Adobe After Effects)制作的动画。AE制作的动画以JSON格式导出，并通过lottie-web库在前端解析和播放。这种方法可以在网页上实现复杂的矢量动画，同时保持较小的文件大小和较好的性能。

lottie-web渲染可以选择renderer: "svg" 用矢量动画的方式来渲染，这样渲染的效果，对4K显示屏甚至更高分辨率的适配都没问题，动画画面十分细腻。如果有高分辨率设备自适应的场景，十分推荐用lottie-web。

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/btvlupklawpir1dt