前端动画调研-V1

时间 2019-11-07

标签前端动画调研 v1 繁體版

原文原文链接

动画调研-V1

前言：动画从用途上能够分为两种，一种是展现型的动画，相似于一张GIF图，或者一段视频，另外一种就是交互性的动画。这两种都有具体的应用场景，好比在咱们信息流业务中，从下拉页面到进入活动页这个过程当中，咱们彻底能够用一个展现型的入场动画代替本来可能只有一个小圆圈的的loading页。javascript

展现型动画： css

交互性动画（能够看到屏幕那个小手势）： html

一. 展现型动画 VS 交互性动画

展现型动画在实际使用的场景中，实现的方法不少，好比用gif图，canvas，css3动画等，可是最终输出的结果是不带有交互的，也就是从动画起始状态到结束状态一鼓作气，这个过程用户能够感知，可是没法参与。对于交互性动画而言，咱们能够在动画播放的某个时间节点触发相应的操做，进而让用户参与到其中，最多见的例子好比红包雨，或者是咱们世界杯踢足球的动画，不只仅能提高用户的体验，还能提高咱们的产品的多元性。然而交互性动画常常面临的一个问题就是，经过原生代码实现交互动画是很复杂的，同时性能和兼容性是不得不认真考虑的问题，比较好的解决方案仍是寻求相关的框架。前端

二. 动画使用到的技术

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

伴随着CSS3的发展，利用CSS3的transform和动画的@keyframes就能够完成不少酷炫的动画，可是CSS3的动画应用场景仅仅是展现型动画，只要动画开始，咱们就没法控制动画的状态，并且对于复杂的动画，CSS3就显得很无力了。对于JavaScript驱动的动画，在必定程度上就能够弥补这些缺点，好比anime.js增长的timeline的概念，经过将各部分动画链式执行，从而完成更为复杂的动画，同时动画执行的各个阶段提供的回调函数也能让咱们更方便的控制动画执行的状态，为交互提供了可能。对于canvas，在 canvas上绘制的图形自身不支持 DOM 事件，只有canvas标签自身支持 DOM 事件监听。所以须要对 canvas 容器的事件进行处理，实现相对应事件的监听及处理。WebGL能够为canvas提供硬件GPU加速渲染，借助使用系统GPU能够在移动端中更流畅的展现动画.java

三. 相关技术的兼容性

对于CSS3的animation，兼容性以下:
canvas 兼容性以下：
WebGL 兼容性以下：

能够看到,CSS3的animation和canvas支持性比较好，只有WebGL在Android 4.4 Browser 彻底不支持，后续咱们会提到PixiJs库，能够采用WebGL渲染，也能够优雅降级采用canvas渲染css3

四. 现有的几种方案

1. AE + bodymovin + Lottie

适用场景：主要仍是展现型动画git

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

官方文档：airbnb.io/lottie/ codepen仓库：codepen.io/collection/…web

优势：json

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

缺点：

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

2. Anime.js

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

简介：Anime.js是一个轻量级的js驱动的动画库，主要的功能有 - 支持keyframes，链接多个动画 - 支持Timeline，为实现更为复杂的动画提供了可能 - 支持动画状态的控制playback control，播放，暂停，从新启动，搜索动画或时间线。 - 支持动画状态的callback，在动画开始，执行中，结束时提供回调函数 - 支持svg动画 - 能够自定义贝塞尔曲线 - 任何包含数值的DOM属性均可以设置动画

GitHub：github.com/juliangarni… codepen仓库：codepen.io/collection/… 文档演示：animejs.com/documentati…

功能介绍：

必定程度上，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就不是颇有优点了。

3. PixiJs

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

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

Github: github.com/pixijs/pixi… 官方文档： pixijs.download/release/doc… 官方网站：www.pixijs.com/ Examples：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渲染，性能仍是要看动画的复杂度，以及代码的优化

五. 总结

针对不一样的动画需求，我总结了三种不一样场景下的动画库。对于展现性的动画，咱们彻底可使用第一种方案，让设计同窗提供动画，咱们利用动画导出的JSON，将动画还原为svg/canvas/html。若是场景是交互型或者须要作一个小游戏，能够采用第三种方案PixiJs，经过WebGL来渲染，利用硬件资源，极大的提高性能，在兼容性方面，对于不支持WebGL的浏览器，可使用canvas渲染来平稳回退。最后一种场景就是弱交互强展现，这种场景每每就是用户点击一下暂停执行相应操做，待操做完成继续播放动画，交互方面比较偏弱，这种场景下能够采用第二种方案 Anime.js，Anime.js不只仅支持全部的css 属性，并且能够经过Timeline，callback， playback controls来控制动画执行的各个状态。并且兼容性知足咱们的需求，在性能方面，只要不过多的形成页面回流，多使用transform操做复合层，性能仍是能够的（待多多尝试，就我看的几个例子性能仍是不错的）。最后，从需求角度分析以后，从学习成本作个简单的小排名：PixiJs > Anime.js > lottie

前端动画调研-V1

动画调研-V1

一. 展现型动画 VS 交互性动画

二. 动画使用到的技术

三. 相关技术的兼容性

四. 现有的几种方案

1. AE + bodymovin + Lottie

2. Anime.js

3. PixiJs

五. 总结

六.动画性能分析参考

七. 参考连接