流畅web动画的十个法则

   <p>自从我们去年登陆了 <em>Gyroscope</em> ，许多人都问我有关用在我们网站上的javascript动画库。我们考虑过将此开源，但是这不是魔法真正实现的地方。</p>    <p>我不希望大家认为我们是依靠特殊的javascript插件来解决这些问题的。对于大部分人来说，我们只是充分利用了近来浏览器性能的提升，GPU和CSS3规格.</p>    <p>对于良好的动画性能没有高招，除了将大量的时间放在测试和优化。然而，过了许多年的实验和撞击浏览器性能的极限，我们发现了一系列的设计和代码准则，看上去似乎是良好动画可靠的结果。这些技术让你的页面，在现代桌面和手机浏览器上变得流畅，运行良好。最重要的是，易于维护。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/cf8712225e32d3fb216db77221e717dd.gif"></p>    <p>对每个人来说，技术和实现方式都有所不同，但是大体上的规则对大多是情况都会有帮助。</p>    <h3>什么是动画？</h3>    <p>动画在互联网出现之前就已经饱经世故了，并且如果你想做好它，这会是你一生的课题。然而对于应用于互联网的动画，有一些特别的约束和挑战。</p>    <p>对于60帧的流畅动画，每一帧都需要在16ms内渲染！这并没有多少时间，因此为了流畅的性能，我们需要找到非常有效的方法来渲染每一帧。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/5eb3980d42c2a9db3b988a06b9859187.gif"></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/7081e2a111329888b2b4a5fa382bd7a0.gif"> <img src="https://simg.open-open.com/show/34b6829513e8de524051762fe9db3104.gif"></p>    <p><a href="/misc/goto?guid=4959728075681784940" rel="nofollow,noindex">一些经典的动画规则</a></p>    <p>T 在web上有一打方法做动画。比如，幻灯片是一种方法，在互联网之前就已经流行，通过轻微不同的手绘帧，在一秒内多次置换，来创造运动的视觉效果。</p>    <p>最近推ter使用这种简单的方法，制作了新的爱心动画，通过切换一组雪碧图切换实现。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/040d881d1641added6abfb3d5c3cbdec.png"></p>    <p>这个效果不能用一堆小元素单独做动画，或者做一个SVG，但是那样会产生十分不必要的复杂以及可能会不流畅。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/b710200be3ce947e16a698002e560ba6.gif"></p>    <p>在许多例子中，你会想用CSS transition属性来做自动动画。这个技术也同样以“补间动画”闻名，在两个不同的值之间的过渡。这个好处就是，你可以轻易地取消，而不需要建立所有的逻辑。这个对于“一劳永逸”样式的动画是理想的解决方式，就像介绍序列，等等，或者简单如悬停的交互。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/7ba308b4705a240acb99bd6f67529249.gif"></p>    <p>在其他例子中，关键帧为基础的CSS动画属性也许对于不间断运行的背景细节是非常理想的。举个例子，在Gyroscope logo上的戒指计划是不间断地旋转。其他受益于CSS动画语法的是齿轮速比。</p>    <p>因此，事不宜迟，这里有些建议能够帮助你很大程度上地提高你的动画性能……</p>    <p>#1</p>    <h3>不要改变除了opacity和transform之外的参数！</h3>    <p>即使你觉得这样ok，也不要这么做!</p>    <p>仅仅这一个基本的准则能帮你解决80%的问题，即使是在手机上。你可能在之前听过这个——这不是最初的主意，但是是很少被跟随。这相当于是web的“吃的健康和运动”的相同法则，这个听上去是一个好的建议，但是你可能会无视。</p>    <p>一旦你如此想了，你会发现这个相对简单，但是可能会是一个大跳跃，对这些习惯传统CSS属性的动画。</p>    <p>举个例子，如果你想让元素变小，你可以使用 <em>transform: scale()</em> ，而不是改变他的宽度。如果你想移动他，不同于用外边距或者内边距混在一起——你可以仅仅使用一个简单的 <em>transform: translateX</em> 或者 <em>transform: translateY</em> 。</p>    <p>为什么这个是有效的？</p>    <p>对于人类来说，改变宽度，外边距或者其他属性，看上去不是很大的交易——因为它更简单，看上去更好——但是电脑需要做的事情和人类比起来简直是天壤之别，他要做的更加多更加槽糕。</p>    <p>浏览器团队花费了很大的力气在优化这些操作。Transforms真的很简单就能提高效率，并且经常能够充分利用你的图形界面，而不用重新渲染元素。</p>    <p>第一次载入页面的时候，你可能会抓狂——在所有的角落，使用图片，在每个元素上加上阴影，如果你觉得特别粗糙，你甚至可以加上一个动态模糊。如果这只发生一次，一些额外的毫秒时间计算并不影响。但是一旦内容重新渲染，你不会想重新计算所有的内容。</p>    <p>#2</p>    <h3><em>将内容藏在不起眼的地方</em></h3>    <p>使用pointer-events:通过透明度为0来隐藏元素</p>    <p>这个属性也许会有浏览器兼容的问题，但是如果你只是为webkit或者其他现代浏览器做东西，这会让你的生活更美好。</p>    <p>过去很长一段时间，当动画需要通过jQuery的animate()处理的时候，许多渐变元素的复杂来自切换“display“属性实现的：在一个合</p>    <p>CSS的pointer-events属性（这已经存在了很长时间了，但是不经常用），让元素不回应任何点击和交互，就像他们不在那边一样。它可以简单地通过CSS切换开启和关闭，而不通过打断动画或者以任何方法影响渲染/可见性。</p>    <p>与opacity为0结合使用，他基本上和display：none是一样的效果，但是不触发新的渲染而影响性能。当隐藏元素时，我可以常常只设置opacity为0，并且关闭pointer-events，然后遗忘元素，他会自己照顾自己。</p>    <p>这和绝对定位的元素一起工作地特别好，因为你会十分有信心，它对页面其他的元素完全没有影响。</p>    <p>这也给你更多的回旋余地，因为定时并不完美——这不是世界末日，如果一个元素是可点击的或者在其他元素上遮盖一秒或者更长，或者如果这仅仅能被点一次，然后就隐藏起来了。</p>    <p>#3</p>    <h3>不要同一时间所有元素都做动画</h3>    <p>除非使用编排</p>    <p>一个单独的动画自己是流畅的，但是同一时间许多元素都做动画，就会扰乱他们。创建单个的流畅动画很简单——但是一个数量级的动画就很难确保性能达到满分。因此，合理地规划特别重要。</p>    <p>将时间分开，那么所有的元素都不在一个相同的时间开始。典型的是，2，3个可以在同一时间运行，而不需要减速，特别是如果他们在稍不同的时间开始动画。</p>    <p>除非你的页面上只有一个元素，不然理解 <em>编排</em> 是很重要的。这可能看上去像一个舞蹈编排，但事对于动画接口来说是同样重要的。元素需要在一个合适得位置合适的时间进入。及时他们都是分开的，他们必须感觉是设计好的的一个单元。</p>    <p>Google素材设计在这个主题上又很有意思的建议。这不仅仅是做事的正确方式，也是你需要考虑的事情和测试。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/fbce758d6a6c5fd162411b7def489567.png"></p>    <p>#4</p>    <h3>轻微地增加延迟，让编排动作变得简单_</h3>    <p>编排动画真的十分重要，并且需要十分多的实验和测试才能找到感觉。然而，他的代码并不十分复杂。</p>    <p>我通常会改变父元素上的一个Class（通常是在body上），来触发一系列变化，每一个在特定的时间有自己的过度延迟。从代码观点来说，你只需要关心状态改变，并且不需要在javascript中维护一堆定时。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/f3b7ea77776a8a5efa9071b16c021b84.gif"></p>    <p><a href="/misc/goto?guid=4959728075779773343" rel="nofollow,noindex">Gyroscope Chrome 扩展</a> 的动画</p>    <p>交错安排一系列元素，是最简单的编排你的元素的方法。这很强大，因为这同时看上去很好，同时也带来了珍贵的性能——记住只有一小部分元素在同一时间开始。你会将他们分开直至感觉足够流畅，但是不要分得太开，导致整体看上去太慢。足够应该是重叠，这感觉像一个不间断的流，而不是一系列独立的个体元素。</p>    <p>代码样例</p>    <p>这里有一系列简单的技巧，交错排序你的元素——特别是如果是一长串元素。如果有少于10个元素，或者有一个不可估量的数量（就像在静态页面），然后我通常在CSS指定值。这是最简单的便于维护的方法。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/574fb0cc1d50181cdd3d9ea3c30f6746.png"></p>    <p>一个简单的SASS循环</p>    <p>对于很长的元素列表或者一个动态的内容，定时器可能需要通过循环每个元素动态设置。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/4a3b0c7b3504cb190b0ceac0ea2ef134.png"></p>    <p>最简单的javascript循环</p>    <p>这里有两个常用变量：你的基本延迟和每个元素之间的延迟。这是一个需要寻找的微妙的平衡，但是当你敲击正确的数字集，这会感觉非常好。</p>    <p>#5</p>    <h3>使用全局倍数来设计慢动画</h3>    <p>然后加速之后所有的元素</p>    <p>对于动画设计，定时就是一切。20%的工具是实现他们，并且其他80%是找到正确的参数&让一切同步的间距，以及感觉流畅。</p>    <p>特别是在编排一系列元素的时候，尝试压榨性能和页面并发性，看看所有的元素在慢动作下会让事情变得简单。</p>    <p>无论你是否用javascript，或者一些CSS预处理器，如Sass（我的最爱），这都需要直接做些额外的算数，和创建变量。</p>    <p>你必须确认尝试一些不用的速度或者定时是很方便的。比如，如果一个动画在十分之一的速度下都很卡顿，那么有可能从根本上就有问题。如果将它调至50倍速度依然流畅，那么问题就是要找到他所能达到的最快的速度。在全速之下，5毫秒的问题很难察觉，但是如果你降低了整体的速度，那么他们就会变得特别明显。</p>    <p>特别对于十分复杂的动画，或者解决棘手性能的瓶颈，在慢动作下查看元素的能力可能十分有用。</p>    <p>最主要的问题是，你想包装许多完美的细节，当它变得慢的时候，然后提高整体的速度，因此这感觉是十分棒的。这十分微妙，但是用户会察觉流畅以及细节。</p>    <p>这些特性只是OS X的一部分——如果你点击shift按钮来减小按钮或者一个app图标，你会看到他在慢速运行。在这一点上，当你按shift按钮的时候，我们甚至可以在Gyroscope实现激活慢动画。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/3c5036ce44738e62403956603a14a458.jpg"></p>    <p>#6</p>    <h3>拍下你的UI，并且重放他们，以获取有价值的第三方关点。</h3>    <p>有时候一个不同的关点，能帮助你看事物更透彻，并且视频是一个极佳总这件事的方法。</p>    <p>一些人在AE中创建视频，并且尝试将他们在网站上实现。我经常换做其他的方式，然后尝试做一个来自网站的UI好视频。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/11cdabc6ff0734abce0d85560c1bae8f.jpg"></p>    <p>能够发表vine或者一些video，是十分高杆的。有一天，我十分激动于我做的东西，并且尝试做成视频，分享给一些小伙伴。</p>    <p>然而，当我再看一次的时候，我发现有一堆东西不够完美。有一个大的滞后阻碍了之后的动画，并且所以的定时器都有一些问题。这让我有些担心，我最后没有发表它而是意识到我还有许多工作要做。</p>    <p>当要在正式环境使用它的时候粉饰这些很容易，但是看在视频上的动画——一遍又一遍或者在一个很慢的速度——让所有的问题都变得十分明显。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/abb3db669a009b0a65f0eb9bac85caca.jpg"></p>    <p>他们说相机加了10磅。也许这也增加了10帧。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/221ae785ba9e9b2ac408ddbfdacf5326.jpg"></p>    <p>I 这现在也变成了我工作流中重要的一部分，查看页面慢动画视频，以及如果有任何帧让我感觉不对，就马上做些改变。要怪罪于慢浏览器很容易，但是在一些更加优化的浏览器上，测试，有可能解决了所有的问题。</p>    <p>一旦你在视频上捕捉滞后停顿不觉得尴尬的时候，并且感觉视频够好，能够分享了，那么页面差不多就可以准备上线了。</p>    <p>#7</p>    <h3>网络活动导致滞后</h3>    <p>你需要提前或者滞后加载大的http请求</p>    <p>图片是这个问题的最黑祸首们，是否一些大家伙（也许是一个大的背景）或者大量地小图片（想象50个表情符加载），或者仅仅有许多内容（一个很长的到底都有图片的页面）。</p>    <p>当页面第一次加载，大量的东西初始化和下载。有统计，广告和其他的第三方脚本让事情变得更糟糕。有时候，延迟所有的动画到加载完几百毫秒之后对性能有极大的帮助。</p>    <p>除非必要，不要过度优化，但是一个复杂的页面也许需要十分准确的延迟和内容定时，然后才能运行路畅。通常上来说，你想要在开始加载尽可能少的内容，一旦重的部分和简介动画做完之后，不断地加载页面其余的部分。</p>    <p>有许多数据的页面，加载所有的元素的工作量似乎是巨大的。一旦在做动画的同时开始加载真实数据，一个动画和静态页面运行地很好也许看上去是分开的。如果一些东西看上去应该工作或者有时候工作地流畅其他时间不流畅。我建议减产网络活动，确认你没有在同一时间做其他事情。</p>    <p>#8</p>    <h3>不要直接绑定滚动</h3>    <p>看上去是一个很酷的主意，但实际上不是。</p>    <p>在过去几年中，滚动为基础的动画很受欢迎，特别是在视差或者其他特殊效果中。是否是好设计，有待辩论，但是有一些好或者槽糕的方法去实现他们。</p>    <p>在这个类别中，适度的优化做些的事是将达到滚动到一定距离作为一个事件——并且仅仅运行一次。除非你真的了解你在做什么，我会建议避免这个类别，因为这很容易出问题而且真的很难维护。</p>    <p>更加糟糕的是，创建你自己的滚动条功能，而不是用默认的——也就是 <em>scrolljacking</em> 。请不要做么做！</p>    <p>这条建议对手机来说特别有用，但是也可能是用户体验的好实践。</p>    <p>如果你确实有一个特别的体验，你想专注在滚动或者其他特殊事件，我会建议创建一个快速原型，以确保这在花费大时间设计的时候，能够运行良好。</p>    <p>#9</p>    <h3>尽早&经常在手机上测试。</h3>    <p>大多数网站是在电脑上创建的，并且很有可能在他们创建的相同机器上运行测试。因此手机体验和动画性能经常是后知后觉的。一些技术（比如canvas）或者动画技术在手机并没有运行地这么好。</p>    <p>然而，如果编写&优化适当（看规则#1），一个手机体验可能会比电脑体验还要好。手机优化是一个非常棘手的课题，但是新的iPhone现在比大多数手提都要快！如果你按照之前的建议编写，你会发现你做的东西在手机上有着极佳的性能。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/ddacf516a75fea5cac2404d419dc9423.jpg"></p>    <p>手机用法会是对于大多数网站都是一个非常大而且重要的部分。这看上去和极端，但是对于一整个项目，我会建议将手机从你的项目中分离出来。这不应该感觉像是一个惩罚去做手机版本，虽然经常会这样。</p>    <p>保持设计进步&性能加强，知道这感觉被打磨流畅已经像网站的大版本那样方便。</p>    <p>如果你强迫自己只用手机网站一个礼拜，你很可能就会将它优化得向大型网站一样，有着的极佳体验。经常懊恼地使用是值得的，这意味着在你的用户体验之前解决问题。</p>    <p>#10</p>    <h3>在不同的设备上经常测试</h3>    <p><em>屏幕大小，像素，或者设备都有着极大的暗示</em> . 除了手机vs桌面，有许多关键点会彻底影响性能，就像是否屏幕是“retina”屏，窗口的总像素，硬盘多老了，等等。</p>    <p>即使Chrome和Safari都是webkit的浏览器，有着相同的语法，他们也都有各自怪异行为。每一次chrome更新都会修复一些东西以及引入新的bug，因此你需要一直保持警觉。</p>    <p>当然，你不仅仅只希望创建最低水准的性能，因此找到最机智的方法来渐进添加或者移除增强功能会十分有用。</p>    <p>我经常在我的小Macbook和大的iMac之间切换，并且每次切换都引出了一些小问题并且做些改进——特别是依据动画性能，但是对于总体设计，信息密度，可读性，等等。</p>    <p>媒体查询，常常是强大的工具来处理这些不同环节样式，通过不同的高度或者宽度是最基础的媒体查询的用法。找出OS和设备的类型会很有用，因为手机性能特性和电脑很不一样。</p>    <p><img src="https://simg.open-open.com/show/6755e39976cda34f83f0a297c9145e2c.gif"></p>    <p>我希望你在你的下一个项目中，会找到有用的技巧。好运！</p>    <p> </p>    <p>来自：http://www.zcfy.cc/article/10-principles-for-smooth-web-animations-gyroscope-1765.html</p>    <p> </p>