前言
恰到好处的动画效果能提高用户的交互意愿与留存时长……本文总结时下流行的动画方案，如有补充，择日更新。
一、动态图片
| 技术方案 | 兼容性 | 色彩表现 | 压缩率 |
|---|---|---|---|
| GIF | 优秀 | 色彩表现差、不支持半透明 | 一般 |
| 🌟APNG（推荐） | Chrome 59、Safari 8 | 优秀 | 对于颜色信息多的图片（如照片）不能大幅压缩 |
| 🌟WEBP（推荐） | Chrome 32、Safari 14 | 优秀 | 好 |
| AVIF | 仅 Chrome 95 以上 | 优秀 | 更好 |
| JPEG XL | 都不支持！未来可期 | 据说更优秀 | 据说更更好 |
小结：前端开发成本低，但是动态图片无法交互，如需要控制播放则应该采用下面的方案。
Tips：AE 导出 Apng、WebP 格式动画插件Export webp and apng
二、帧动画
1. CSS3 实现
通过
animation配置动画时间、时长以及其他动画细节和@keyframe关键帧定义动画细节样式，以达到动画效果。
- 设置
animation-timing-function属性为：steps(n,[ start | end ]) - 精灵图（可以是组合在一张大图，配合
background-position；也可以分割成小图配合多个<img>标签和transform:translate()属性）
2. JS 实现
通过 JS 的
setTimeout、setInterval和requestAnimateFrame等 API 控制动画素材替换或位移，以达到动画效果。
- JS API +
<img> 位移(或者background-position更新)
小结：可控制播放，开发成本一般；图片体积大，无法做到帧间压缩
三、CSS3 属性动画
改变元素自身属性，配合关键帧
@keyframe与animation达到动画效果，或者配合transition实现过渡动画效果。
关键属性：width/height、position:absolute/fixed + left/top/right/bottom、transform、transition 、animation
小结：适用于简单动画，可控制播放；开发成本和动画效果复杂成正比
Tips：推荐一些生成序列帧动画的工具，AE 插件：CSS-Sprite-Exporter、Node 库：GKA
四、SVG 动画
可以使用 CSS，JS，或者直接使用 SVG 中自带的 animate 元素添加动画
优点：矢量图，不失真
缺点：上手成本高，需要先了解 SVG 的 API
五、动画 SDK
Spine、Lottie、SVGA、VPA、PAG
- 彻底改变前端动画开发格局，由前端CSS书写动画改为动效设计师直接使用设计工具生成对应的动画，通过插件完成动画导出；
- 性能好，资源体积小，开发成本低；
- 前端可以通过 JS 控制动画播放，包括开始、暂停、播放片段、速率甚至动态替换文本、图片等等。
Spine
zh.esotericsoftware.com/spine-in-de… Spine 骨骼动画，适合有主体的、类似人物的动画。
优点：可控制；性能优异；三端可用
缺点：1. 多用于游戏的动画，需要引入游戏引擎cocos等 2. 研发成本比较大 3. web端只支持canvas渲染
Lottie
github.com/airbnb/lott… 使用 AE 软件制作 Lottie 动画，使用 bodymovin 导出，方便简单。
优点：1. 可控制 2. 性能不错 3. 三端可用 4. web端支持svg、canvas渲染 5. 支持二次编辑
缺点：1. AE特性支持不全面 参考 2. 粒子效果渲染不理想
SVGA
github.com/svga/SVGAPl… 优点：1. 资源包小
- 测试工具齐全
- 三端可用
- Protobuf 序列化结构数据格式，序列化的数据体更小，传递效率比xml,json 更高。
缺点：1. AE特性支持不全面 2. web端只支持canvas渲染 3.不支持二次编辑
VPA
- 支持视频 alpha 透明通道；
- 相比Webp, Apng动图方案，具有高压缩率(素材更小)、硬件解码(解码更快)的优点
- 相比Lottie，能实现更复杂的动画效果(比如粒子特效)
PAG
- AE特性支持更加全面
- 性能更好，功能更加强大
五、总结
- 动态图片开发成本低，但是动态图片无法交互；
- 帧动画控制性一般，开发成本一般。但图片体积和动画帧数成正比，无法做到帧间压缩；
- 属性动画控制性高，开发成本随动画复杂度成正比；
- 使用动画 SDK 可以做到动画效果的极致还原，前端开发动画成本低，可操控性非常高，素材体积低。
其他链接:
GIF vs APNG vs WebP：littlesvr.ca/apng/gif_ap… \
