邂逅

动画用途

展示型的动画，类似于一张GIF图，或者一段视频。比如在我们信息流业务中，从下拉页面到进入活动页这个过程中，我们完全可以用一个展示型的入场动画代替原本可能只有一个小圆圈的的loading页

交互型的动画：用户自已参与的。

动画类型

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

特点比较

• canvas
  • 效率高、性能好、可控性高，只能处理位图，内存占用恒定
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
• SVG
  • 处理矢量图，不失真
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用
• div
  • 包括CSS控制的DOM动画、JS控制的DOM动画
  • 比较适合简单的数量较少的复杂度较低的动画

游戏引擎/渲染引擎

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

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

现在都有些什么游戏框架可以看这里：游戏/渲染框架导航

主流动画解决方案

• 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

主流产品动画方案

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

动画使用到的技术

• CSS3 Animation
• canvas
• SVG
• WebGL
• 利用JavaScript驱动的动画

现有的几种方案

AE + bodymovin + Lottie

适用场景：主要还是展示型动画

简介：通过 AE 上的 Bodymovin 插件 将 AE 中制作好的动画导出成一个 json 文件，通过Lottie 对JSON 进行解析，最后以SVG/canvas/html 的方式渲染动画。

官方文档：http://airbnb.io/lottie/
codepen仓库：https://codepen.io/collection…
优点：

• 跨平台，一次绘制、一次转换、随处可用
• 文件更小，获取AE导出的JSON，最后通过lottie渲染为canvas/svg/html格式
• 可以通过api操纵动画的一些属性，比如动画速度；添加动画各个状态的回调函数
• 动画都是在After Effects中创建的，使用Bodymovin导出，并且本机渲染无需额外的工程工作。
• 解放前端工程师的生产力,提高设计师做动效的自由度

缺点：

• Bodymovin插件待完善，仍然有部分 AE 效果无法成功导出
• 对于交互方面支持的还不是很好，更多的是用来展示动画
• Lottie 对 json 文件的支持待完善，目前有部分能成功导出成 json文件的效果在移动端上无法很好的展现
• 很多AE的效果是不支持的 查看支持的特性：Supported Features

  Anime.js

  适用场景： 强展示+弱交互性动画

  简介：Anime.js是一个轻量级的js驱动的动画库，主要的功能有

- 支持keyframes，连接多个动画
- 支持Timeline，为实现更为复杂的动画提供了可能
- 支持动画状态的控制playback control，播放，暂停，重新启动，搜索动画或时间线。
- 支持动画状态的callback，在动画开始，执行中，结束时提供回调函数
- 支持svg动画
- 可以自定义贝塞尔曲线
- 任何包含数值的DOM属性都可以设置动画

GitHub：https://github.com/juliangarn…
codepen仓库：https://codepen.io/collection…
文档演示：http://animejs.com/documentat…
功能介绍：

• 一定程度上，anime.js也是一个CSS3动画库，适用所有的CSS属性，并且实现的@keyframes能更方便的实现帧动画，替代CSS3复杂的定义方式。使用对象数组的形式定义每一帧
  戳我：keyframes实例

  anime({
    targets: 'div',
    translateX: [
        { value: 250, duration: 1000, delay: 500, elasticity: 0 }, //第一帧
        { value: 0, duration: 1000, delay: 500, elasticity: 0 }    //第二帧
    ]
  })  //这个例子实现了目标元素在两帧中实现水平位移

• 提供的Timeline能实现更为复杂的动画效果，通过这个Timeline，我们可以维护不同的动画之间的关系，进而通过多个不同的动画组成一个更为复杂的动画。
  戳我：Timeline实例

  var myTimeline = anime.timeline();
  //通过.add()方法添加动画
  myTimeline
  .add({
    targets: '.square',
    translateX: 250
  })
  .add({
    targets: '.circle',
    translateX: 250
  })
  .add({
    targets: '.triangle',
    translateX: 250
  });

• 动画播放的控制，常见的有暂停，重播，继续，动画状态的跟踪，自动播放，循环次数，抖动效果
  戳我：playback controls实例

• 为动画提供了回调函数，在动画或时间线完成的开始，期间或之时执行回调函数。
  戳我：callback实例

  var myAnimation = anime({
    targets: '#begin .el',
    translateX: 250,
    delay: 1000,
    begin: function(anim) {   //        callback
        console.log(anim.began); //     true after 1000ms
    }
  });

• 支持promise，动画结束后，调用anime.finished会返回一个promise对象。
  戳我：promise实例

• 支持svg绘制路径，目前不支持canvas绘制
  戳我：SVG实例

• 对于input这样带有数值的元素标签，也可以通过anime实例来设置动画
  戳我：DOM ATTRIBUTES实例
  

  anime({
    targets: input,
    value: 1000, // Animate the input value to 1000
    round: 1 // Remove decimals by rounding the value
  });

  优点：

• 显而易见，anime.js不仅实现了CSS3动画的深度封装，更多的是通过js驱动来实现操作动画的状态，timeline实现了对于多个分支动画的管理，对于实现更为复杂的动画提供了可能

• 通过anime.js提供的playback controls和callback，同时对于promise的支持，让我们对于动画的简单交互有了操作的空间
• 虽然不支持canvas，但是支持svg绘制路径，我对svg还不是很了解，待之后深入学习后，在做一个补充。
• 浏览器兼容性比较好，Android 4以上全部支持

缺点与不足：

• anime.js做展示型动画是可以胜任的，在做交互性动画方面还是需要看场景，它更多适合做一些小型的交互动画，类似于通过触摸屏幕踢足球这种强交互的，anime.js就不是很有优势了。

  PixiJs

  适用场景：交互性动画，动画小游戏

  简介：PixiJS是一个2D 渲染引擎， Pixi 主要负责渲染画面。可以创建丰富的交互式图形，动画和游戏，而无需深入了解WebGL API或处理浏览器和设备兼容性的问题。与此同时，PixiJS具有完整的WebGL支持，如果需要，可以无缝地回退到HTML5的canvas。PixiJs默认使用WebGL渲染，也可以通过声明指定canvas渲染，WebGL在移动端Android 4.4 browser并不支持，不过可以使用canvas优雅降级。

Github: https://github.com/pixijs/pix…
官方文档： http://pixijs.download/releas…
官方网站：http://www.pixijs.com/
Examples：https://pixijs.io/examples/#/…
特性（摘自官方DOCS）：

• 支持WebGL渲染
• 支持canvas 渲染（官方称PixiJS在canvas渲染方面现在是最快的）
• 非常简单易用的API
• 丰富的交互事件，比如完整的鼠标和移动端的触控事件
• Pixi使用和 Canvas Drawing几乎一致的 api，但不同于Canvas的绘画 api，使用 Pixi 绘制的图形是通过WebGL在 GPU上渲染
• 还有一系列特性需要在学习PixiJs之后了解

优势：

• 最大优势莫过于通过WebGL来调用GPU渲染动画，这样极大的提升了性能
• 无需深入了解WebGL API或者是浏览器兼容性（因为下面这条原因）
• 支持canvas回退，当前设备不支持WebGL时，PixiJs会使用canvas渲染动画
• 完整的DOCS，比较活跃的社区，有利于深入的学习。不过我感觉PixiJs学习成本相对来说还是很高的

缺点：

• 首先是兼容的问题，WebGL在Android 4.4是不支持的，只能使用canvas进行降级
• Pixi 主要负责渲染画面，很多其它功能开发者得自己写或搭配其它库来使用，不过按照目前来看，是满足我们的需求的。

性能：

• 对于手机版本Android4.4 以上的手机，除了代码层面造成的性能不足，通过WebGL调用GPU渲染，性能还是有保障的。然而对于Android4.4只能使用canvas渲染，性能还是要看动画的复杂度，以及代码的优化