如何选取合适的前端动效方案？

1、缘由

• 前端动画场景需求多
• 对众多动画场景的技术实现方案选择上比较模糊
  • 各动画方案的优劣及适用场景认识模糊
• 现有动画库太多，不知道选哪一个
  • 主流动画库的适用场景认识模糊

2、分类

动画用途

1. 展现型的动画，相似于一张GIF图，或者一段视频
2. 交互型的动画：用户自已参与的

绘制技术

1. Canvas
2. div
3. SVG

PS:为了简单也能够用视频，但除非动画的播放场景固定，否则移动端视频在不一样app、不一样机型、不一样系统的播放显示都不太同样，容易踩很多坑。

动画类型

1. Tween动画
2. 序列帧动画
3. 骨骼动画
4. SVG动画
5. 3D动画

维度

1. 2D
2. 3D

3、绘制技术的差别

无论采用什么方式来制做动画，最终呈现到前端页面的无非三种形式：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 引擎的速度。

4、动画实现方式

前端动效开发，首先应该肯定的是动画用途->确认动画类型->确认绘制技术->确认动画的实现方式。

虽然最终呈现动画的载体（绘制技术）就三种，但实现动画的方式却不少，得从动画类型出发讨论动画的实现方式：

• Tween。补间动画，涉及到一些缓动函数（如：经常使用的缓动函数）
  1. CSS实现（transition、animation等）
  2. Js实现
• 序列帧动画
  1. CSS实现（animation）
  2. JS+DOM实现
  3. JS+canvas实现
• 骨骼动画
  1. 通常采用Spine、DragonBones等工具导出相应资源图片和JSON动画配置资源后使用。
• SVG动画
  1. 使用 XML 格式定义图形
  2. 能够用AI等SVG编辑工具生成SVG图片后，配合anime.js等现有库进行动画制做
• 3D动画
  1. DOM操做用CSS 3D实现。（perspective属性等）
  2. 场景搭建用webGL(Three.js等)
  3. 3D模型动画用Blender或maya等制做完成后导出使用

上面列出的动画类型对应的实现策略，从开发角度来说，能够：

1. 本身实现
2. 选择现有轮子：
   • 动画库
   • 游戏引擎、渲染引擎

本身实现

为了减小外部依赖，简单的不复杂的动画通常选择本身实现。可参考下面的实现方式选择思路：

动画库

这边尽量的收集了网上的动画库，并对其信息进行了简单介绍，篇幅问题，另起一篇文章：多是最全的前端动效库汇总

游戏引擎/渲染引擎

动画从维度上分，3D动画通常采用诸如Three.js的渲染引擎或者游戏引擎来实现。2D动画在某些场景也会采用引擎。

• 常见游戏引擎
  1. Cocos
  2. Egret
  3. LayaAir
  4. Phaser
• 常见渲染引擎
  1. Pixi.js(2D动画渲染引擎)
  2. Three.js(3D渲染引擎)
  3. Babylon.js(3D渲染引擎)

如今都有些什么游戏框架能够看这里：游戏/渲染框架导航

5、主流动画解决方案

• Tween动画

  • 比较简单，通常本身实现。
  • Tween.js（提供了一些常见的缓动函数）
  • Animate.css(一个跨浏览器的动效基础库，是许多基础动效的解决方案。)

• 序列帧动画

  • 本身实现（CSS、JS+canvs、JS+DOM）
  • SVGA
  • Lottie（AE制做完动画后经过Bodymovin导出使用）
  • apng配合控制库(如：apng-js)

• 骨骼动画

  • Spine
  • DragonBones

• SVG动画

  • snap.svg
  • GSAP
  • anime.js

• 3D动画

  • DOM操做的话本身用CSS 3D实现
  • Three.js

• 经常使用动画库(适用、强大)

  • Animate.css
  • GSAP
  • anime.js
  • snap.svg

• 经常使用渲染引擎：

  • Pixi.js

6、主流产品动画方案

• 网易哒哒工做室H5：序列帧动画->cavans实现
• 各类“一镜到底”类H5:序列帧动画->canvas实现

参考文档

1. W3school--HTML 5 Canvas vs. SVG
2. 前端动画技术的研究和比较
3. 阿里巴巴 前端专家金擘(渚薰) - 渐进式动画解决方案
4. canvas和svg性能方面选择