一、原因
- 前端动画场景需求多
- 对众多动画场景的技术实现方案选择上比较模糊
- 各动画方案的优劣及适用场景认识模糊
- 现有动画库太多，不知道选哪个
- 主流动画库的适用场景认识模糊
二、分类
动画用途
- 展示型的动画，类似于一张GIF图，或者一段视频
- 交互型的动画：用户自已参与的
绘制技术
- Canvas
- div
- SVG
PS:为了简单也可以用视频，但除非动画的播放场景固定，不然移动端视频在不同app、不同机型、不同系统的播放显示都不太一样，容易踩不少坑。
动画类型
- Tween动画
- 序列帧动画
- 骨骼动画
- SVG动画
- 3D动画
维度
- 2D
- 3D
三、绘制技术的差异
不管采用什么方式来制作动画，最终呈现到前端页面的无非三种形式：canvas、div、SVG。
特点比较
- canvas
- 效率高、性能好、可控性高，只能处理位图，内存占用恒定
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
- SVG
- 处理矢量图，不失真
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
- div
- 包括CSS控制的DOM动画、JS控制的DOM动画
- 比较适合简单的数量较少的复杂度较低的动画
性能差异
- 一般情况下：JS+Canvas > CSS + DOM > JS + DOM
- canvas和svg比较：
- 一般情况下，随着屏幕大小的增大，canvas将开始降级，因为需要绘制更多的像素。
- 随着屏幕上的对象数目增多，SVG 将开始降级，因为我们正不断将这些对象添加到 DOM 中。
- 这些度量不一定准确，以下方面的不同一定会引起变化：实现和平台、是否使用完全硬件加速的图形，以及 JavaScript 引擎的速度。
四、动画实现方式
前端动效开发，首先应该确定的是动画用途->确认动画类型->确认绘制技术->确认动画的实现方式。
虽然最终呈现动画的载体（绘制技术）就三种，但实现动画的方式却很多，得从动画类型出发讨论动画的实现方式：
- Tween。补间动画，涉及到一些缓动函数（如：）
- CSS实现（transition、animation等）
- Js实现
- 序列帧动画
- CSS实现（animation）
- JS+DOM实现
- JS+canvas实现
- 骨骼动画
- 一般采用Spine、DragonBones等工具导出相应资源图片和JSON动画配置资源后使用。
- SVG动画
- 使用 XML 格式定义图形
- 可以用AI等SVG编辑工具生成SVG图片后，配合anime.js等现有库进行动画制作
- 3D动画
- DOM操作用CSS 3D实现。（
perspective属性等） - 场景搭建用webGL(Three.js等)
- 3D模型动画用Blender或maya等制作完成后导出使用
- DOM操作用CSS 3D实现。（
上面列出的动画类型对应的实现策略，从开发角度来讲，可以：
- 自己实现
- 选择现有轮子：
- 动画库
- 游戏引擎、渲染引擎
自己实现
为了减少外部依赖，简单的不复杂的动画一般选择自己实现。可参考下面的实现方式选择思路：
动画库
这边尽可能的收集了网上的动画库，并对其信息进行了简单介绍，篇幅问题，另起一篇文章：
游戏引擎/渲染引擎
动画从维度上分，3D动画一般采用诸如Three.js的渲染引擎或者游戏引擎来实现。2D动画在某些场景也会采用引擎。
- 常见游戏引擎
- 常见渲染引擎
- (2D动画渲染引擎)
- (3D渲染引擎)
- (3D渲染引擎)
现在都有些什么游戏框架可以看这里：
五、主流动画解决方案
-
Tween动画
- 比较简单，一般自己实现。
- （提供了一些常见的缓动函数）
- (一个跨浏览器的动效基础库，是许多基础动效的解决方案。)
-
序列帧动画
- 自己实现（CSS、JS+canvs、JS+DOM）
- SVGA
- （AE制作完动画后通过Bodymovin导出使用）
- apng配合控制库(如：)
-
骨骼动画
-
SVG动画
-
3D动画
- DOM操作的话自己用CSS 3D实现
-
常用动画库(适用、强大)
-
常用渲染引擎：
六、主流产品动画方案
- H5：序列帧动画->cavans实现
- 各种“一镜到底”类H5:序列帧动画->canvas实现