动态效果意味着充满生命和兴奋，为静态事物增添生命。然而，在软件方面，动态效果不仅是为了获得乐趣，也是为了解决问题。

作为人类，我们习惯于看到世界在我们周围移动。如果任何软件有连贯的动画，它都会感到活泼和自然。所以，如果你想开始学习动态设计，最好从这9个步骤开始。

​1.开始观察

培养活力。如果你看不到东西在移动，你就不能使用它们。当你使用你最喜欢的应用程序时，开始观察屏幕上东西的移动。再看一遍，找出你为什么喜欢它，然后尝试找到细节。观察所有变化-形状、大小、位置和颜色。无论是小是大，都要努力找出运动在整个合成中的作用。

2.动效不仅仅是一层涂料

动态效果揭示了更深层次的含义。作为一个创造者，你必须从一开始就有意识地考虑动态效果。如果您正处于设计阶段，请动画原型以增加时间维度。如果您正处于开发阶段，请将代码分为模块化组件，以便轻松处理UI中移动内容。

认真思考创作的动画个性会给它一个角色，帮助你对尝试构建的作品有更深的了解。

3.思考在哪里引入产品的运动？

当用户与元素互动或用户必须等待时，可以将运动引入产品的一些简单位置。

4.MotionUX的类型

您可以将产品中的运动分类为“过渡”(内容更改/用户移动到另一个屏幕)，“微交互”（例如Twitter的“赞”按钮)、图形动画(例如，踏板车在Zomato的“订购”应用程序的启动屏幕上跳转)。

5.通过动效提供空间信息

如果UI如果元素从屏幕右侧输入，用户将在心理上组织元素在右侧。例如，如果在屏幕左上角放置菜单按钮，菜单必须从左侧进行动画处理。检查您的动画是否正确地传达信息，请向人们展示并听他们说什么。这是避免任何可能混淆的最简单的方法。

6.开始理解持续时间、时序曲线、动画路径、初始和最终值等

从技术上讲，这些参数构成了动画片段。和他们一起玩，掌握这些控件。一旦控制了这些，就能产生出色的动态效果。

7.永远不要让人过程中间等待

不要放慢过程中间的节奏，让他们等待动画完成。如果他们真的必须等待，那就用有意义的动画让他们快乐。永远记住用动态效果来解决问题，这就是动画加载程序存在的原因。

让动画保持微妙，与产品的故事情节保持一致，从而创造愉悦的体验。

8.使用工具

Lottie，AdobeAnimateCC，AfterEffects，Sketch2AE，Framer，Origami，AnimaticApp，figma一些用于动效设计的工具。找到它们。figma相关技巧可以参考：https://js.design/special/figma/

我建议先用笔和纸开始你的想法。完成此操作后，继续使用任何数字软件。对于本文中的动画，我在这里AnimaticApp手绘帧被绘制在上面。动画有助于使事物简单而集中。

9.捕获并保存你发现的有趣的东西

保存你发现的有趣的东西。一遍又一遍地看着它们，放慢它们，了解元素是如何运动的。通过复制学习。Mac充满乐趣GIF动画。你也可以GIF保存在盘球上。