如何选取合适的前端动效方案
分类
动画用途
- 展示型的动画，类似于一张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