哈标题是翻译完顺手起的，这篇文章讲的是网页动画效果，包括动画原理和实践指导，文字比较多哈，但总结得很充分，需要耐心地看。水平所限，欢迎阅读原文《Web Animation at Work》。

我去年四月份辞职了，打算进纽约的一间机构，将我有趣的CSS3动画技巧运用到前端领域里去。但后来我考虑了许久，面了很多公司，发现我还是不甘心于做一个传统的前端开发者。因为我不会为Angular.js而感到兴奋，我也不想做一个只是看守着一个超大样式表仓库的“看门人”，我更不会一整晚熬夜去写Sass拓展。（当然，除了我写来用于计算CSS动画关键帧的拓展。）

只有一个开发领域真正能打动我：交互。Canvas，SVG，Web Audio API，webGL——而CSS3动画只是我为此着迷的一个开端。我开始，不再把浏览器看作是一个文档阅读器，互联网也不是指一堆链接起来的文档。

我们知道使用HTML语言去讲故事，去传达大量的信息——但这些动画都可以帮我们做得更好。就好比层级能指导用户贯穿内容，动画则可以指导用户贯穿交互，帮助他们理解其中的关系、结构、因果和影响。动画不应该是“最好就有”的。动画就是传达过程中的关键！

动画表达信息的另一个层面

动画效果（动效）运用起来可以十分强大，因为它让事物产生了“具有生命力的错觉”。这要求你要考虑到重力、引力、速度、压缩、拉伸、时间等物理因素的计算。这就是为什么迪士尼的动画巨作看起来就明显感觉比那些渣渣的山寨作品更好。事实上是因为他充满了性感丰富的表现元素，可以告诉我们的大脑我们在哪里以及有什么在我们周围，让人身临其境。甚至两场景间转换的镜头，也能帮助用户推导出更多他们寻找的信息，以及连接到它所存在的信息系统中。

如今扁平化设计十分流行啊，但其用户体验缺陷也被提出了，要知道从一个网页成分里脱去视觉外衣，其危险性也是十足的。动画正好相反。通过适当的应用，动画效果可以很好地表达以下关系：

因果：

当一件事物发生在另一件事物之前，我们的大脑会认为这两件事物是有关连的且第一件导致第二件。例如，我们点击一个提交按钮后表格消失，你会认为是你的点击引起表格的反应，而不是设置好定时消失的表格恰好在你点击按钮后消失。

反馈：

在没有用户输入时看到某动画效果也能推断出两件事物的因果关系（如在视频缓冲时的Loading小菊花，就预示着片子将要播放），这就是反馈，反馈是向用户表示他们的动作已经产生了反应的东西，就像按钮被激活时看上去像被按下一样。这种对用户输入拟物化动画反馈，十分形象地告诉用户，“你按了这个按钮”（你见过谁会一次又一次地按下付款按钮吗？）。

关系：

动画效果能加强事物与另一个事物的层级和空间关系，你在哪，你能做什么。例如，当你在运行iOS7系统的iPhone手机上打开一个app，你会看到这个图标放大成app界面而不是像iOS6那样直接跳转界面。这时候你应该清楚这个app的图标在你主屏幕的位置，下次会更容易找到哦。

过程：

动画能够通过一个线性动画为你展现你的进程，再一次对前后关系起到关键作用。我们最熟悉的是经典的进度条。还有GPS导航或地图app里的定位标注，表示你在一条路上的进程。而假如是一系列一卡卡的静止的快照图片，想想就让路痴感到难受啦。

物理：

动画效果可以展现真实的世界里视觉元素如何反应，这是一种动态的拟物化。举个“栗子”，当某物从屏幕“下降”，如果动画会随着时间加速，这将更具真实性，因为降落物体在重力作用下有加速度。让一个动作“感觉”是真的用户才会认可你的拟物化。

转换：

这一定算是一个伟大的人类发明：在没有合适的转场方式时就用“淡入淡出”！（做过视频剪辑的都懂的~）。但转场对于表明心理、环境或事情变化相当重要，要合理运用。如今大部分人已经被训练到，看着电视和电影事物，就会跟随一个过渡或多或少地无意识地联想到后面的事物。

动画增强用户体验

当Coin上线了它的新引导页，成千上万的用户就打开他们的钱包欢迎它啦。在各种分辨率中享受这个网站的动画展示后，我发现到很少市场推广去山寨它——因为，这仅仅使用了一些动画和视频区展示而不是直接描述。这里山寨不了的是精挑细选的精简情怀和不降低体验的流畅感。相比视频，CSS动画要求更少的带宽去加载，对观看者更少要求：没有按钮需要点击；只要一直滚动鼠标就好了。

这种交互并不限制体验场景，如最新的Mac Pro和FiftyThree's Pencil页面。甚至在不停复制元素情况下，如在Polygon的review of the X-Box 360页面，附加的动画通过简单的线条艺术绘画，让内容“活跃起来”了。导航细微的动画可以帮助你清楚知道在文章哪里及与其他章节的关系。纽约时报已经勇敢地进军“交互式讲故事”啦，从它深入的2012年奥运会报道到“鲨鱼和小鱼”的游戏可以看到。 

桌面和触摸屏中穿梭的动画

在内存还是按兆算的时代，除游戏以外，动画效果还没有普遍地运用（即使是有，也会是粗糙低端的）。用户能够本能性地感觉“之前”和“之后”的图片而做出动作，如打开一个菜单，然后他们的大脑会快速地思考按下鼠标按键和菜单出现之间发生了什么。但这种轻微的打断有时也会让用户从想象到实际任务完成的转换过程中丢失方向（迷航），尤其是随着界面越来越复杂，这种打断就越来越严重。这时候动画就可以帮助连接那些状态之间的点。人机交互研究员Scott E. Hudson和John T. Stasko曾在1993年指出：

通过减去转换感知系统的判断，动画让用户能够持续思考事情任务，而不需要转换思考内容到界面领域。通过消除视觉上的突变，动画减少了用户感到惊讶的几率。[注]

如今，小而强大的触摸屏设备正迫使我们将界面强塞到这么小的屏幕里——而且要流畅的。这就是为什么我们越来越依赖于Z轴：图层，滑动面板，侧边，缩放。但这样的空间关系很难在心里用旧式的“快照对比”计算出，所以这时候要“插入补间”——前后状态之间的动画，就能让用户不会感到困惑和沮丧。

随着小型设备的数量增长，这种设计模式不太可能会很快过时。而实际上，大屏幕上的体验也正在采用它，在三维上铺盖和处理信息——可以看到最新的Famo.us框架的Demo。

铺就Web动画前程需要：技术支持，设备性能和责任

这三者一起做到是很难的。开发者们需要花时间和钱力来开发和支持。不是所有的浏览器都支持CSS动画，SVG动画，canvas元素。即使浏览器都支持了相关的特性，设备运行它们也难以做到流畅的体验。供应商的支持可能十分缓慢，没有一个一蹴而就的解决方案。你要做充分研究，选择适合你的“战场”，同时采用缓解策略。

最重要的是了解和学会使用最有效的动画技术和在真实设备上测试。可以的话，分类获取浏览器和设备的通信量数据。不要花时间去关注不适合互动的用户受众，那是没有意义的。

在某种程度上，我们可以依靠老的成熟技术，渐进性改善。使用工具如Modernizr，可以对不支持你的动画效果的目标浏览器，给他们加载polyfill或静态内容取代它。

但性能是一个大问题，特别是在配备高清显示屏的低端设备。往往就是他们头太大了，而身体——他们的处理器不够强大来快速重绘屏幕，以做到Jank-Free（无卡顿）。卡顿啊——这样就扼杀了那仅有的栩栩如生的假象。此时此刻，你仅能作如下选择：

1. 优化你的动画。如果动画卡顿，那就拿出你的开发工具来，分析时间线问题在哪，或许还要改变你的设计来使重绘更容易（渐变和阴影是出了名的高成本动画）。
2. 提供一种替代。如果你尽可能地优化了，但还是有一些设备和浏览器组合，那可怜的动画支持而造成的体验不佳，那么你就要考虑用设备检测来单独提供这些组合的最优选择，给他们提供无动画替代方案。
3. 满足特定的细分市场。一些开发者会使用只服务于特定数量的设备和浏览器的华丽动画效果，而不用太过担心少数用户。例如，开发者为Firefox OS或Kindle Fire开发HTML5应用就不需要担心IE8的流量；但开发者开发在访问受限的内部局域网使用的安全浏览器时，就不需要先考虑Android这种开放平台。这个时代，给大多数人提供更好的体验，远胜过给少数人优质服务，这也是要求知道你的流量的重要原因。但是，如果你有一大群的稍显不同的受众，“少数”也可以成为大多数。
4. 应需而作。有时快感来得太快了（嗯...），我们回顾以前对浮夸内容的不屑，那些客户委托的复杂的、毫无意义的小网站，你妈妈可能都知道这叫“无脑钱多”，而且每次他们都有充分的理由哦。这很容易陷入让网站十分生动的眩晕快感中，认为越酷炫越好，而我们忽视了房间里最重要的人：观众。当我们优先关注我们的用户，他们的需求，和他们潜在的设备局限性，我们才会做出明智的决定。推动Web动画大军前进时，不要忘记：我们会，但不意味着我们就应该这样做。

所以你想成为一个（网页）动效设计师？

不管你是一个网页设计师还是一个前端开发者，投身于动画技巧和理论将帮助你更好地完成设计和界面。还好，以前的学院式动画经历数十年成长为一门充满教育资料的艺术和大师流传下来的技术。

其中之一就是故事板（Storyboard）。在大项目里，你需要鸟瞰式地观看能完成一个交互用到的各种路径。迪士尼动画工作室首先会制作故事板——巨大、可移动的软木板，在上面动画师可以钉上带插画的场景来展示一个故事沿时间线的发展进程。随着故事的发展，插画可以移走或添加，而且这块板可以带到不同的地方给不同的团队工作使用。对于网站，你通常希望构建一个非线性的交互故事板，包含不同的动画效果分支，是一个交互中可能会用到的。可以用不同的板来布置不同的动作和反应。

故事板提高协作性，通过沟通时明确动画什么时候和怎样发生。这是是完美的前期探索阶段，如果你不想让人太过纠结到一个详细的设计中去的话。他们也能帮助人们更早地思考画面如何运动。这时候动画效果就是直接画在板上带颜色的箭头和欢快卖萌的描述性短语如“跟随（pan）”和“放大！”。关于这个话题有很多书可以推荐大家看看，我（作者）最喜欢的是Storyboard设计课程：原理，实践，和技术。同时Skillshare网站常常会有由世界级的故事版艺术家教授的课程（需付费）。

学习动画理论本身也是有趣的。（这也是一个很好的借口坐下来看一下经典的“有教育意义的”动画片！）建议大家可以开始学习Tezuka School of Animation Volume 1: Learning the Basics，它很简洁，基本涵盖了最重要的概念，又不会占用很多时间。有更多的时间？那就看看我在Goodreads上动画书籍吧（会持续补充）。如果有一部真正对你说话的动画电影，试着找到......一本书吧——书上通常有很多故事板，动画细节，和设计决策的艺术。（嗯我说的就是《The Art of Frozen》！冰雪奇缘画册，中亚链接）即使你不认为你是一个动画设计师，熟悉这些术语也会让你的工作更容易。

让自己尽可能地多使用CSS动画和过渡，SVG，canvas，Web API的Web动画，音频和视频，甚至WAI-ARIA（无障碍网页应用）。当没声音时的动画要怎么处理？网站MDN做出很详尽的参考材料，而HTML5 Rock也包含了许多知之甚少的API。Codrops也有很多动效实验，同时Kirupa.com涵盖了比别人都更深刻的CSS动画哦。O'Reilly的书籍是黄金标准，而且它也有助于大家按照公认的名字去使用、说、和写，在交互设计和HTML5游戏开发领域中，像 Val Head, Pasquale D’Silva, Jesse Freeman, Seb Lee-Delisle，甚至是你自己。

很多开发者和设计师也经常使用动画事件框架如angular.js，以及创建动画原型时用的工具如Framer。D3这样的库可以很容易地生成SVG图表和转换它们。对基于页面的动画，有几家公司提供了可视化用户界面，轻易的实现时间线上的处理响应，从Sencha的Animator 到 Adobe的Edge Animate 以及 Google免费的（虽然有广告) Web Designer.

你不需要每次都使用所有这些技术和工具，你只需要知道哪些是更适合当前任务的。例如，Canvas是一个可以接受的耗能大鳄，因为它本质上是一种图像标签，只要你想你可以操纵这些图片变换。但Canvas并不适合图表或交互，所以SVG和CSS动画仍然可以用于需要定义值的页面元素中。如果觉得你需要声音和动画结合起来，那考虑一下<Video>标签吧。但如果你需要这些元素独立分开，Canvas和Web Audio结合可能是要选择的方向。

不要试图掌握所有你发现的API，你要学会花一些时间，去做一些事情。想办法把它们运用到项目中去，同时了解许多技术宽泛的知识。然后自然而然的你就可以针对不同的情况使用正确的工具。你不必去看任何一本大部头技术书籍。堪堪一本小但权威的书，像Boris Smus的Web Audio API，就可以教你很多知识，以及加强你已了解的知识。

去吧，皮卡丘运用动效！

生动的用户界面可以是强大的，强大到可以为产品提供一个极具竞争力的优势，不管在什么平台。我确信这个未来，所以我决定把钱投资在我所说的，开始拥有自己的公司——Tin Magpie，致力于创建惊艳的交互和用代码讲述更好的故事。我希望更多的人能加入我，我已经迫不及待了，想看到你们所创造的！

备注

出自 “Animation:From Cartoons to the User Interface,” 发表于《UIST’93 : Proceedings of the 6th annual ACM Symposium on User Interface Software and Technology》p45-55。PDF电子版可以购买到。

关于作者

Rachel Nabors是一个交互开发者，屡获殊荣的漫画家，还是Infinite Canvas Screencast的主持人。她巧妙地将传统讲故事的艺术和数字媒体结合起来，“用代码讲述更好的故事”，在她的交互工作室—— Tin Magpie。你可以通过Twitter@rachelnabors和rachelnabors.com联系她。.

终于完成很久以前答应了@MartinRGB （偶像大神）的译文啦！翻译过程中十分感慨，处女座做翻译这行真痛苦哈：这里漏了个词没翻译出来吖！哎，意思到了就行了~常常大脑是这样子的。

还觉得不够？欢迎看看它的搭配篇《UI动画和UX：一段不再是秘密的基情》（未译= =）