10 个原则让动画带你飞（转）

前言

周四晚是否被薛段子代言腾讯动漫的广告刷了朋友圈呢？在一些产品介绍中为了加强视觉效果，吸引用户注意，也会搞不少动画效果。那这些动画效果有没一些指导原则可让咱们在这块作的更好呢？今天由掘金翻译计划@王子建童鞋带来的翻译受权分享。

 

正文从这开始～

 

去年咱们发布了 Gyroscope 以来，许多人问过咱们作动画用的什么 JavaScript 库，咱们也曾想过将它公布于众，但实际上那并非奥妙所在。

 

咱们不想让大伙儿以为本身须要依赖特别黑魔法的 JavaScript 插件才能解决问题。大部分时候，咱们都只要对最新的浏览器和 GPU 的性能和 CSS3 加以利用就够了。

 

其实并无什么绚丽动画的武功秘籍，惟一的办法就是花大量时间测试和优化。可是，在通过多年的试验和浏览器性能的极限考验，咱们发现了一些设计和编码的原则能够有效地提高动画表现。这些技巧可以使你的页面流畅，而且可以运行在流行的台式和移动设备的浏览器上，最重要的一点，它们还很是易于维护。

 

技术手段和实现方式可能因人而异，可是通用性的原则几乎能无所不包。

 

什么是动画？

 

在互联网发明以前，动画就已经所处可见了，可能你须要穷尽毕生之力才能学会如何将动画作得绚丽辉煌。然而，在互联网中实现动画效果自有其独特的限制和挑战。

 

为了实现流畅的 60 帧的动画效果，每一帧都须要在 16 毫秒内完成渲染！时间很短，因此咱们须要找到最高效的方法去渲染每一帧内容，从而实现流畅的表现。

 

一些经典的动画设计原则

 

在网站上实现动画效果的方式多种多样。好比，在互联网出现以前随处可见的电影胶片，它利用手绘的渐变的胶片，每秒钟播放多帧来实现动画的错觉。

 

Twitter 在最近的心形动画中就利用了这种方法，经过胶片绘出一个转动的精灵。

 

这个效果也能够经过许多独立的小元素动画来实现，或者用 SVG 实现，可是那样会过于复杂，而且可能不会这么流畅。

许多时候，你会想要使用 CSS 切换属性来自动实现元素改变的动画效果，这种技术被称做“tweening”—因其是在两个不一样的属性值之间切换（译者注：tweening 来自 transitioning be_tween_ two different values）。它的好处是能够很是简单地取消或者替换掉而不用从新构造逻辑内容，这是完美的一劳永逸式的动画，像介绍序言等，或者如鼠标悬停等简单的交互。

 

更多资料: All you need to know about CSS Transitions

 

其余时候，基于关键帧的 CSS 动画属性会很是适合不断变化的背景元素。举个例子，陀螺仪中的圆环按会照预设持续转动，还有其余可以利用 CSS 动画的类型好比齿轮。

 

为了免于后顾之忧，但愿如下这些建议能极大地提升你的动画效果：

 

除了透明度（opacity）和切换（transform），不要改变任何属性！

 

即使你以为可行，那也别冲动！

 

动画中百分之八十的优化会用到这项基本原则，即便是在移动端也同样。你或许之前听过这个原则，这不是我提出来的，可是不多有人去遵照。这跟“管住嘴迈开腿”同样，建议很好却也最容易被忽略。

 

对已经习惯了这种思路的人来讲这很是简单，可是对那些习惯用传统的 CSS 属性去作动画的人来讲，这会是一次质的飞跃。

 

好比，你想让某个元素小，你可使用 transform：scale()，而不是改变宽度；若是你想移动它，你可使用简单的 transform：translateX 或者 transform：translateY，从而替代乱糟糟的外补白（margin）或者内补白（padding） — 那些须要重建每一帧的页面布局。

 

为何要这么作呢？

 

对人类来讲，改变宽度、外补白或者其余属性不是什么大事 — 甚至由于简单会更让人喜欢这么作 — 可是对电脑来讲，这事儿就像天塌了同样，甚至比这更糟糕。

 

浏览器投入了九牛二虎之力来优化这些操做，切换属性（transform）真的很是容易且高效，而且可以充分利用显卡，而且不用从新渲染元素。

 

第一次加载页面的时候，你可能会以为抓狂 — 处理全部圆角、引入图像、给一切添加阴影，若是你绝不在意那么甚至能够再作一个动态羽化。若是这种状况只会发生一次，多一些计算时间也不要紧。可是一旦内容渲染完成了，你绝对不会再想要从新加载！

 

更多内容: Moving elements with translate (Paul Irish)

 

用很是清楚的方式隐藏内容

 

使用 pointer-events 属性：仅仅利用透明度隐藏元素

 

或许会有跨浏览器的警示，可是若是你只是面向 webkit 和其余流行的浏览器，它将会让你如虎添翼。

 

好久之前，动画效果必须由 jQuery 的 animate() 方法来处理，许多复杂的淡入淡出效果的处理是经过 display 的属性值切换实现的。太早显示，那么动画还没完成，可是太晚的话就会在页面上显示一片空白，老是须要回调函数去给执行完的动画擦屁股。

 

CSS 中的 pointer-events 属性（尽管已经存在很长时间，可是不常用）只是让元素失去了点击和交互的响应，就好像它们不存在同样。它能经过 CSS 控制显示或隐藏，不会打断动画也不会影响页面的渲染或可见性。

 

除了将 opacity 设置为零，它和将 display 设置为 none 具备相同的效果，可是不会触发新的渲染机制。须要隐藏元素的时候，我会将它的 opacity 设置为 0 并将 pointer-events 设置为 off，而后就职由其自生自灭啦。

 

这样作尤为适用于绝对定位的元素，由于你可以自信满满地说他们绝对不会影响到页面中的其余元素。

 

它有时也会剑走偏锋，由于动画的时机并不总那么完美 — 好比一个元素在不可见状态下仍然能够点击或者覆盖了其余内容，或者只有当元素淡入显示彻底的时候才能够点击，可是不要灰心，会有办法解决的。（下文会提到解决办法，译者注）

 

不要一次给全部内容都设置动画

 

用动做编排加以替代

 

单一的动画会很流畅，可是和其余许多动画一块儿也许就彻底乱套了。编写一个流畅的全员动画的例子很简单，但当数量级上升到整个网站时性能就很难维持了。所以，合理安排好每一个元素很是重要。

 

你须要将全部的时间节点安排好，来避免全部的动画内容同时开始或进行。典型的例子，2 或 3 个动画同时进行可能不会出现卡慢的现象，尤为是在它们开始的时间略有不一样的状况下。可是超过这个数量，动画就可能发生滞缓。

 

理解动做编排这个概念很是重要，除非你的页面真的只有一个元素。它貌似是舞蹈领域的东西，可是在动画界它一样的重要。每一个内容都要在合适的方向和时机出现，即便它们相互分离，可是它们要给人一种循序渐进的感受。

 

谷歌的 material design 有几点关于动做编排的有趣建议，虽然这并非实现目标的不二法门，但总有一些是你应该去考虑和尝试的。

更多内容： Google Material Design · Motion

 

适当增长切换延时可以更简单地编排动做

 

动画的编排很是重要，同时也会作大量的试验和测试才能恰如其分。然而，动画编排的代码并不会很是复杂。

 

我一般会改变一个父元素（一般是 body）的 class 值来触发一系列的改变，这些改变有着各不相同的切换延时以便可以适时展示。单从代码来看，你只须要关心状态的变化，而不用担忧一堆时间节点的维持。

Gyroscope Chrome Extension 的动画

 

交错安排一系列的元素是动画编排的一种简单易行的方法，这种方法颇有效，由于它在性能良好的同时还好看—但请记住你本想让几个动画同时发生的。你想把这些动画分布开来，让每一个都表现地流畅，而不是一会儿太多动画从而显得特别慢。适当部分的重叠会看起来连续流畅而不是链式的单独动画。

 

代码示例

 

有一些很简单的技巧来错开你的元素—尤为是其中有很是多的内容。若是页面中有小于 10 项内容，或者元素数量可预估（好比静态页面），我一般会在 CSS 中指定特定的值。这是最简单易行的方法了。

 

一个简单的 SASS 循环

 

对更多的内容或者动态内容来讲，能够在循环中动态地给每项内容添加时间节点。

 

一个简单的 JavaScript 循环

 

有两个典型的变量：基本延时和各个项目的延时。它很难协调，但你一旦找到正确的值，效果将会很是完美。

 

在慢动做中使用增量设计

 

事后再加快动画的速度

 

动画设计中，时间节点就是一切。20% 的工做是用来实现效果，剩下的 80% 使用来寻找合适的参数和持续时间来让一切在同时发生时显得流畅。

 

尤为是在编排多个动画的时候，为了达到高性能和高共同性，观察动画的慢动做会让一切工做变得很是容易。

 

不管你用的是 JavaScript 仍是 CSS 预处理器好比 SASS（咱们很是喜欢它），都须要简单地作一些额外的计算而且须要声明一些有用的变量。

 

你必须确保它可以很是容易地尝试不一样的速度或时间节点。举个例子，若是一个动画效果在 1/10 的速度下还表现地结结巴巴，那么可能会有一些很是基础的错误。若是在放慢 50 倍的速率下表现流畅，假以时日定能找到运行流畅的最大速度。或许正常速度下 5 毫秒的差池很难被注意到，可是放慢速度，它就变得很是明显了。

 

尤为是作很是复杂的动画分析，或者解决很是棘手的性能瓶颈，慢动做查看元素会很是的有用。

 

重要的一点就是，在慢动做下你会将很是多的细节优化地完美，当动画加速以后它将会给人完美无瑕的感受。尽管这些都显得微不足道，可是用户会注意到动画效果的流畅和细节的。

 

只有 OS X 才有的功能—若是你 shift + 点击最小化按钮或者一个应用图标，你将会看见它在缓慢移动。基于这一点，咱们甚至在陀螺仪上实现了这个功能，当你按下 shift 键的时候将会激活慢动做模式。

 

给你的用户界面录个像，而且在重复播放中获得一个有价值的第三人视角的见解。

 

有时候不一样的视角可以帮助你对事物有更加清楚的认识，而录像则是一种很好的方法。

 

有的人会用 AE 作视频而后放到网站上，而我偏偏相反，我老是尝试将网站界面录制成很棒的视频。

 

发布视频其实门槛很高的。有一天我对作出来的东西感到很是激动，想记录下来和朋友们分享。

 

然而，当看第二遍的时候，我发现了一些瑕疵，时间节点设置得不那么恰当，而且出现了一个延迟尖峰。这让我有点打退堂鼓了，我发现还有不少的内容须要优化，因此我不能就这么把视频发送给朋友。

 

在使用过程当中这些瑕疵都很容易被掩盖，可是在视频中一次次地观看慢动做的动画可以让一切问题都暴露地很是明显。

 

有人会说拍摄出来和看起来的效果并不彻底相同，但也许它变动加精确了呢。

 

这已经成为我工做中很重要的一部分，我会观看慢动做的视频而且修改任何我以为不妥的地方。其实也能够很容易地将这类问题归咎于浏览器性能差，可是再多优化一点多测试一点，这些问题就可以获得解决。

 

等到你在视频中不会发现很是尴尬的延迟尖峰，而且感受视频挺好的能够晒出来了，这个时候你的页面就能够发布了。

 

网络活动可能会形成延迟。

 

你应该预加载或者延迟处理很是大的 HTTP 请求

 

图片即是其中一个元凶，不管是几个大图片（大的背景图）或者很是多的小图（五十个头像），或者很是多的内容（一个从头至尾有不少图片的长页面）。

 

页面首次加载的时候，许多的东西会被初始化并下载。其中内容解析、广告和其余第三方脚本会使性能变得更糟糕。有时候，将动画效果在页面加载后延迟零点几秒将会对性能有很大的提高。

 

若是没有必要的话，不要过分优化动画延迟，一个复杂的页面要求很是精确的延迟和时间节点才能运行流畅。一般你会想要在开始的时候加载尽量少的数据，当主要内容和介绍动画完成以后再继续加载其余的内容。

 

一个有不少数据的页面，须要深思熟虑地加载全部内容。一个在静态页面中表现良好的动画效果也许就会在实时数据的加载中变得缓慢。若是有些内容仿佛应该生效但却没有，或者不能一如既往地流畅表现，我建议检查一下网络活动，确认一下你是否也在同时处理其余的内容。

 

不要直接绑定滚动事件。

 

貌似是个好主意，其实否则

 

基于滚动的动画在前些年一段时间很是火爆，尤为是涉及视差或者其余特效的内容里。它们的设计模式是好是坏仍有待考证，可是在技术上有着参差不齐的实现方法。

 

基于滚动的动画中有一种很是流行的处理方式，即将滚动必定距离做为事件处理同时触发动画内容。除非你对本身的行为了如指掌，不然我会建议不要使用这种方式，由于它真的很容易出错而且很难维护。

 

更糟糕的状况是自定义滚动条功能，而不用默认的功能—又名 scrolljacking 。请不要这么想不开。

 

在这十项准则中，这项尤为适用于移动开发，另外可能也是理想用户体验的好的实践。

 

若是你确实要求独特的体验而且你但愿它基于滚动或者其余的特殊事件，我建议建立一个快速原型来实现，而不是费力不讨好地去设计事件形式。

 

尽早而且常常地在移动设备上的测试。

 

大多数的网站都是在电脑上搭建的，而且最经常使用本机作测试。所以，移动端体验和动画性能就被次要考虑了。一些技术（好比 canvas）或者动画技术可能在移动端表现地并很差。

 

然而，若是代码写得好优化也到位（参考规则 #1），移动端的体验甚至比电脑更加流畅。移动端的优化是一项很是棘手的事情，可是新的 iPhone 比手提电脑更快！若是你采用了前几项建议，你将会获得一个很是棒的移动端表现。

移动端访问网站将会变得很是很是的重要。我建议你专门拿一个星期的时间认真地用手机查看你的网站，这或许有些极端，你可能会感受像是在接受惩罚而被迫使用移动端版本，可是你应该调整好心态。

 

不断优化设计和提升性能，直到网站在移动端的表现和在电脑上同样优美和方便。

 

若是你坚持一周都用移动端来访问网站，你将会获得一个比电脑上更优化体验更好的网站。即便在使用过程当中遇到很是恼人的事情也是值得的，那意味着这些问题将在你的用户体验到以前就被解决掉了！

 

常常在不一样的设备上测试

 

不一样屏幕尺寸、分辨率，或者有着各类样式的设备

 

除了移动端和电脑以外还有不少因素可以对性能产生极大的影响，好比是不是 "retina" 屏幕、窗口的分辨率、硬件的老旧程度等等。

 

即便 Chorme 和 Safari 都是基于 Webkit 的浏览器而且有着类似的语法，可是他们也有各自的特色。每一次 Chrome 升级都会修复一些问题同时也会引入新的 bug，因此你必须时刻保持警戒。

 

固然，你不会只想着搭建一个对于全部浏览器放之四海而皆准的网站，因此寻找一个灵活的方法以便于你可以增长或者移除一些功能是很是有用的。

 

我一般会交替在较小的 MacBook Air 和大屏的 iMac 中使用网站，每次都会暴露出新的问题而后再修复 — 尤为是动画性能方面的问题，有时候也会有全局设计的题、信息密度、可读性的问题等等。

 

Media queries 是一款很是强大的工具，它典型的用处是定位因为高度或者宽度形成的样式差别，可是它一样可以用来根据分辨率添加目标内容或者其余属性。另外，识别系统和设备类型的功能也是很是有用的，由于移动设备的性能特征和电脑仍是有很大区别的。

 

原文：来自 前端早读课 微信号FeZaoDuKe