从手机端 H5 制做来看 WEB 动画的术与道

咱们在微信朋友圈里常常看到不少人分享 H5 的连接，有的科技感十足，有的展现炫目，有的很是有创意，各大公司也把H5做为他们品牌传播，活动预热的很好方式。企业商户对于这种方式也颇有好感，从而致使了 H5 制做行业涌进大批从业者。这几年作过几十个 H5 ，每一次都在思考动画与技术的关系，因而记录下来。

H5

当你拿到一个 H5 制做的需求的时候，你须要首先明确需求的目的是什么？按照目的大概能够分为活动营销，产品宣传，会议邀请，品牌推广，企业招聘等。不一样类别的 H5 有其自身的特色，但找准业务方的目的，就能抓住主题而不会跑题了。 接下来就是围绕这个主题思考创意。创意不少是来自于营销策略，方法以及对于人性的把握，这些偏软性的思考方式，咱们先不讨论，做为一个程序员，我首先想到的就是怎么经过技术带来创意。

在此以前，咱们先来看看制做一款 H5 有哪些「术」。

一个需求只要处在疯狂的爆炸成长期，行业看到了其巨大的市场，就必定会尽可能的下降成本和使用门槛，来尽快的吸引用户，因而一些低门槛的h5制做平台相继出现，不懂代码的人也能够来玩玩，若是你有必定的设计思惟和做图能力，也能作出很是好看的H5做品了。综合个人使用经验，大概总结以下：

国内比较成熟的 H5 制做平台有：

• 兔展：设计感和创意感最强的平台，可是制做相对复杂，须要设计基础。
• 易企秀：老牌的 H5 制做平台，不断迭代，有大量案例，使用别人作好的 H5 须要付费。生态圈还不错。
• 初页：手机 APP，手机端快速制做 H5 。适合我的用户快速制做。
• Epub360 意派：面向设计师，提供了不少创意的设计元素和案例。

易企秀 H5 制做后台

这些平台均可以让用户经过简单的拖拽来制做一个精美的 H5 ，这种打包预设好一些动画模式的方式，很是像咱们前端开发中的组件化思惟，他们将元素和数据分离，用数据模型来描述元素的位置和运动，同时开发出一套动画引擎，只要将模型数据输入，就能呈现出精美的动画。

我以为这些平台很是合适的 WEB 动画的学习，深刻探究其动画的实现思路，可让咱们快速的梳理出「动画」和「 WEB 动画技术」。

WEB 动画技术

你在作动画的时候，真的理解是什么是动画吗？维基百科告诉咱们，动画是由一帧帧的静态图片按照必定的顺序，必定的速度播放而产生的，是一种障眼法。然而我并不想这么生硬的去理解他，对于真实世界的观察或许能给咱们更为真切的体感。咱们想想人在运动的时候，咱们肢体动做包含哪些动画元素呢？

简单动画

• 移动 （水平，垂直）
• 旋转
• 缩放 （放大，缩小）
• 样式属性

身体的位移，骨骼的旋转，瞳孔的缩放，这些都是最基本的运动方式，样式的变化，则是元素自身属性的变化，例如颜色，边框，背景等，这写也是大部分动画编程最基本的要素。你彻底可使用 CSS3 来实现他。咱们知道一个动画要包含，元素和变化。CSS3 基于 DOM 元素，借助动画三剑客 Transition (过渡) Transform（变形） Translate （移动），实现变化。有一个很是好用的 CSS 动画库 —— Animate.css ，他预设了不少实用的动画模版，你只要在 DOM 节点上添加响应的 class 就能够了。

他们即简单又复杂，复杂在于这些运动的方式和速度、时间的结合诞生出了速度曲线，然而大天然中大多数的速度曲线来自于重力加速度 G ，因为他的存在，物体的运动不像真空中那种匀速直线的单调乏味。而充满了生机。

尤为是当你在作动画的时候，为何你作出的动画显得很是的生硬，让人看着不舒服，其实人早已习惯了大天然的动画方式，人对每一帧动画都有稳定的预期，当你的动画与现实物体的运动脱节，就会变得生硬。

基于上述简单动画催生了一种人体动画的形式---叫作「骨骼动画」。

复杂动画

骨骼动画的制做，属于一种相对复杂的动画形式，咱们经过代码一点一点的写会很是困难，幸运的是业界早就有了成熟的工具帮助你省去了复杂的编码过程，让你只去关注创做自己。有两款比较著名的 2D 骨骼动画制做软件：Spine 和 DragonBones 。

DragonBones 骨骼动画软件操做界面

咱们以 DragonBones 为例，咱们发现下面的有一部分，操做栏是「时间轴」，他能够描述咱们每一帧动画的状态，这里其实出现了两种与时间相关的动画形式。

• 逐帧动画
• 关键帧动画

做为一个前端工程师，咱们在作动画的时候每每不会去写每一帧的动画的状态，而是先去定义起始状态和中间动画的过渡方式，例如速度如何变化，路径如何变化。这是一种关键帧动画，在 CSS3 中咱们能够用 Animation 中的Keyframes 来实现关键帧动画，Keyframes 来定义关键帧的状态，Animation 来定义时间和速度变化。

而对于逐帧动画，则明显不是 CSS3 的强项，这里就要引出更为强大的武器 —— Canvas 了。

逐帧动画

在 Canvas 中，动画的元素能够由 Canvas 面板自定义的形状绘制，也能够加载图片来实现。元素的变化，则依赖 requestAnimationFrame(callback) 函数，推动时间的流逝，来重绘每一帧的画面。在逐帧动画领域有一个比较著名的框架，PixiJS 。

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

进入 Pixi 的世界，咱们欣喜若狂，终于能够实现像素级别的动画了，Pixi 提供的强大滤镜，也让咱们实现不少特效变得很是简单，然而做为一个渲染引擎，他很好的作到了高性能，而忽略了易用性，学习成本比较高，API比较复杂，尤为是逐帧动画的编码方式彷佛有点反常识，或者说写起来并非那么顺畅，而关键帧动画彷佛更符合咱们的编程习惯，毕竟 CSS 动画，咱们烂熟于心。

那怎么用 Canvas 实现关键帧动画呢？咱们为了实现某种目的，首先应该找的是方法，而方法每每已经被前人总结好，放在了你的面前，这里咱们来聊两个框架： CreateJS 和 GreenSock

关键帧动画

当咱们定义了关键帧和变化方式之后，算法会帮咱们计算出元素在每一帧的状态，咱们把这称之为补间动画。 CreateJS 和 GreenSock 都是实现补间动画的高手。

CreateJS 和 GreenSock 都是基于 HTML5 的一套模块化的库和工具。不只能够实现 Canvas 动画，也支持 DOM 动画，DOM动画的原理依然是基于 CSS3 的，因为 CSS 动画三剑客并不会引发浏览器页面内容的重排和重绘，甚至还能够开启 GPU 加速，性能比直接操做 DOM 的 width、left、margin 等属性要高的多。

其实 CSS 动画和 Canvas 动画的性能到底哪一个更好，并不能一律而论，这个依赖于你具体使用的场景和浏览器类型，具体的性能比较能够看 这里 ，而我认为促使咱们选择 Canvas 来作动画的一个关键点在于二者明显不一样的思考方式。

• 咱们把动画的主体叫作元素，在 DOM 上，元素是按照经典的「盒子模型」作组装和布局的，盒子模型自然具备父子关系和相对位置。当咱们实现一些局部动画的时候，是很是方便的。
• Canvas 并无盒子的概念，他只有一个画布标签，而这张画布被称为舞台，舞台上任何的元素均可以自由的运动，这更像真实世界的运做方式。
• 这两种思考方式可能正是UI设计师和前端工程师，在工做时的差别。当咱们用前端的「盒子」思惟开发一个拖拽式页面工具让设计师来用的时候，你就自然的在要求他们用本身不熟悉的方式去思考，画画和设计他们只有一张画板，他们先打上均匀的格子，而后找准方位，一鼓作气，他们在乎的是整理的美观性。

话说回来，咱们来看看，关键帧动画基本的实现形式是怎样的？CreateJS 中有一个专门实现关键帧动画的库——TweenJS，而 GreenSock 中也有一样功能的库—— TimelineMax。

// TweenJS 的 API
createjs.Tween.get(circle, { loop: true })
  .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
  .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
  .to({ alpha: 0, y: 225 }, 100)
  .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
  .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

// TimelineMax 的 API
var tl = new TimelineMax();
tl.to(element, 1, {left:100}).to(element, 1, {top:50}).to(element, 1, {opacity:0});
复制代码

咱们能够看到，二者 API 很是的类似，都采用了链式调用的方式，定义每个关键帧和时间，以及很是关键的运动曲线，区别在于 TweenJS 专一单个元素的运动，TimelineMax 更关注在一个时间线上，不一样元素的运动。

相比而言，对于动画的实现上，GreenSock 借鉴了不少 Flash 的实现方式，插件很是多，功能更全，效果更炫。其实当咱们在选择一门动画框架的时候，切记不要贪多，在知足需求的基础上，深刻去研究一种框架，达到熟练，才能作出更好的效果和创意。我一直认为，创新是创建在丰富的知识储备和见识之上的天然涌现，尤为要求对技术的深度，若是一直在尝试不一样的框架，就只能不停的学习各类 API ，而忘记了动画的本质并非技术，而是好的创意。

当咱们在实现动画的时候，慢慢会发现，大部分的元素都是图片，并且图片是提早预设好的，不能更改，只能用新的图片替换，例如当咱们要实现微笑动画的时候，须要画两张图，一幅是闭着嘴的，一幅是张嘴笑的，而后逐帧播放。这样的画面当你有足够多帧图片的时候，并不会看出生硬，一旦低于 24 帧就是变得不天然了，那怎么在不增长工做量的前提下，实现流畅的变化呢？咱们将关键帧动画的思惟嫁接到元素自身扭曲变化上，就催生出了「柔性动画」的概念。

柔性动画

从上图能够看出，元素之间是能够相互变化的，并且很是的流畅，这样的动画并不须要 Canvas 这种重武器，简单的 DOM 就能够实现，SVG 真的是一个神器，不只在实现图标，字体上特色鲜明，在实现柔性动画方面也独树一帜。SVG 依然是 DOM ，他有本身独有的 Animation 标签，但也支持 CSS 的属性，其实现动画的本质是依赖于线条和填充，线条的变化，致使填充区域的改变，从而引发形状的变化。而线条则依赖于路径和锚点，路径和锚点的改变，直接影响了线条的变化。

上面的案例，使用的是 GreenSock 的 SVG 动画插件 —— MorphSvgPlugin ，他能够实现不一样 SVG 元素之间的相互转换，过渡很是平滑。

SVG 实现的动画比较局部和小巧，使用范围也比较狭窄，可是当咱们实现复杂的柔性动画，甚至游戏的时候，就仍是须要用 Canvas 来实现。

从上图咱们能够看到龙的翅膀是一张图片，可是能够经过图片的局部的扭曲和变形，来实现煽动翅膀时带来的肌肉收缩和舒张。这样的动画是怎么实现的呢？这就要引出骨骼动画中，一个很是重要的概念：网格。

这里咱们比较浅显的讨论下这个概念，要实现图片的局部变化，咱们就要把图片分块，分的每一块就称为网格，每一个网格都有本身的顶点和边，顶点的位移会引发网格形状的变化，形状的变化就会带来所附属的图片的变化。网格的概念是否是很像路径和锚点，不论怎样的技术，在实现逻辑上都大同小异，重要的不是一直盯着不一样和变化的部分，而是发现那些不变的地方，才能达到举一反三的效果。

制做这样的动画并不复杂，你可使用相似 Spine 和 DragonBones 这样的工具，可是作动画真的是一个体力活，你须要不断的调试，以求达到一种让人看起来舒服的状态。

总结

在大前端概念下，WEB 动画是一个很是绚烂又深邃的领域，甚至不仅局限于前端，他更注重用户的交互体验，以及真实世界的虚拟化。这里咱们也只讨论了这座大山的冰山一角，还有不少动画形式须要进一步研究和思考，例如：

• 粒子动画
• 特效动画
• 3D动画
• 数据可视化动画 ...

当咱们更深刻研究，就会发现，数学的重要性，审美的重要性，创意的重要性。技术只是工具，他所涌现出来的是一种对于美的追求和体验。虽说的不明觉厉，可是真的值得好好思考一下。

参考

• 性能对比
• How Browsers Work

文章可随意转载，但请保留此 原文连接。

很是欢迎有激情的你加入 ES2049 Studio，简历请发送至 caijun.hcj(at)alibaba-inc.com 。