[译] 开始设计动画的九个步骤：为做品赋予生命力

• 原文地址：Get started with motion design in 9 steps: Start breathing life into your creations
• 原文做者：Arpit Agarwal
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：reid3290
• 校对者：Starriers，Xekin-FE

动画创造生命

动画意味着充沛的活力与激情，它给静止的事物以生命。在软件应用中，动画不只是为了取悦人们，而更是为了解决问题。

做为人类，咱们习惯于世界围绕着咱们运转；若是软件的每一部分也都能有着连贯的动画，那就会让人感到天然而又充满活力。

科技行业领导者不断推进其产品朝着更为天然的方向发展，诸如动画设计、动画用户体验、用户体验编排等复杂的概念日趋流行。

请记住：动画就像布局、间距、排印和颜色同样，能在潜意识中构建你应用软件的个性。

不知你是否留意过，当在 iPhone 中将某个东西滑动到最顶端或最底端时，它就会出现一种回弹效果。这些细节看似微不足道，却在构建苹果产品的个性上发挥了举足轻重的做用。

酷，让咱们开始使用动画吧

1. 开始观察

学会关注动画：若是你不可以觉察到事物的移动，也就没法创造出动画。在使用你最喜好的应用程序时，观察屏幕上的东西是如何移动的；反复观察，注意细节，找出它令你喜欢的缘由。留意全部发生变化的元素——形状、尺寸、位置、颜色等等。不管变化是小是大，努力找出动画在整个构图中所起到的做用。

2. 动画不只是一层颜色

动画揭示了一种更深层的意义：做为一名创造者，你必须从一开始就有意识地将动画考虑在内。在设计阶段，为原型添加动画使其具备时间上的维度；在开发阶段，将代码模块化从而更简便地实现 UI 中的动画。【有关模块化参见】(https://medium.com/@acyoo/architecting-ios-development-at-zomato-cf894a7fa5e3)

提示：谨慎思考产品的动画特色，这将为产品赋予一种角色，而且可以帮助你从更深的层面上理解你所想要构建的东西。

3. 在何处引入动画？

可是要在哪里引入动画呢？

简单的例子有，当屏幕正在变化时、当用户正在与界面元素交互时或者当用户不得不等待时。

4. 动画分类

你能够将产品中的动画分为三类：切换（内容变化/页面切换）、微观互动（例如推特的点赞按钮）、图形动画（例如 Zomato 的购物 App 的启动界面上跳跃的小摩托车）。

动画分类

5. 用动画提供空间信息

动画可以传达空间信息

若是某个 UI 元素从屏幕的右侧进入，用户心理上会将那个元素的放在右边。例如，若是一个汉堡菜单按钮处于屏幕的左上角，那么该菜单的入场动画就必定要从屏幕左侧开始。将动画展现给他人观看并听取他们的意见，从而肯定动画所传达的空间信息是否准确。这是避免困惑的最简单方法。

6. 开始理解像持续时间、时间曲线、动画路径、初值和终值等概念的含义

这些参数从技术层面上构成了动画。使用这些参数并熟练掌控它们，一旦你可以控制这些参数，你就可以创造出杰出的动画做品。在 UI 方面，谷歌提供了一些很好的指导资料。

学习动画参数——这两个箱子的动画除了时间曲线以外其它参数所有同样，请探究其中奥妙

7. 毫不能让用户在某个流程的中间等待

毫不能为了等待动画完成而在某个流程中间故意放慢速度。若是必需要用户等待，那就用一些有意义的动画来达到娱乐的效果。请记住，在任何什么时候动画都是用来解决问题的。加载动画的存在是有其合理性的。此外，不要在软件中滥用动画，软件不是电影！

专家提示：保持动画的微妙性并使之与产品故事线相吻合能带来愉悦的用户体验。

8. 相关工具

Lottie，Adobe Animate CC，After Effects，Sketch2AE，Framer，Origami，Animatic App，UIDynamics(iOS) 等工具均可以用来作动画设计，不妨一试。

我会建议使用纸和笔来完成构思，以后再使用其余数字化软件。好比在这篇文章中的动画中，我就是先用 Animatic App 画的草图。一份无缺的草稿会使后续的工做显得简单而明确。

从笔和纸开始

9. 捕捉并保存你以为有趣的动画

保存你以为有趣的动画。放慢速度，反复观察，理解元素的运动机制。经过模仿来进行学习。个人 Mac 里存满了我以为有趣的 GIF。你也能够在 dribbble 上保存 GIF。另外，Giphy Capture 是在 Mac 屏幕上捕捉和记录动画的优秀工具。

无所畏惧

💥 额外福利——对恐惧说再见

还畏惧开始吗？坐下，放松，吃些甜点，放首音乐。关上手机，将纸笔放在身旁。或许能够小憩一会，尽可能让本身感到温馨自在。取白纸一张，拿起笔来，随意涂写。再取一张白纸，继续涂写着，线条、形状、故事。放空本身，感觉笔尖的移动。开始，一切只须要开始，看它带你去向何方。

比画画更难的是开始动笔。一旦你开始在白纸上动笔，不管你画出了什么，你便具备了创造力。

---

感谢阅读！

请欣赏一些个人动画做品——

• 个人动画墙：我作的一些 GIF 及其相关故事。medium.com

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。