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

作为人类，我们习惯于看到世界在我们周围移动，如果任何软件具有连贯的动画，它就会感觉活泼自然。那么，假如你想开始学习动效设计，不如先从这9个步骤开始。

1.开始观察

培养动感。如果您看不到事物在移动，则将无法使用它们。在您使用自己喜欢的应用程序时，开始观察事物在屏幕上的移动情况。再看一遍，找到为什么喜欢它，然后尝试查找细节。观察所有变化—形状，大小，位置，颜色。不管是微小还是巨大，都应尝试找出运动在整个合成中所起的作用。

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

动效揭示了更深层的含义。作为创作者，您必须从一开始就自觉地考虑动效。如果您处于设计阶段，请对原型进行动画处理以增加时间维度。如果您处于开发阶段，请将代码分成模块化组件，以轻松地在UI中移动内容。

认真思考创作的动画个性将赋予它角色，并帮助您对尝试构建的作品有更深入的了解。

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

可以将运动引入产品的一些简单地方，可能是屏幕正在变化/当用户与元素互动或用户必须等待的时候。

4.Motion UX的类型

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

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

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

6.开始理解诸如持续时间，时序曲线，动画路径，初始和最终值之类的东西

从技术上讲，这些参数构成了动画片段。与他们一起玩耍并掌握这些控件。一旦控制了这些，就可以制作优秀的动效。

7.永远不要让人们在流程中间等待

切勿在流程中间放慢节奏，让他们等待动画完成。如果他们真的必须等待，那就用有意义的动画让他们高兴。始终要记住使用动效来解决问题，这是动画加载程序存在的原因。

使动画保持微妙并与产品的故事情节保持一致，以创造令人愉悦的体验。

8. 使用工具

Lottie，Adobe Animate CC，After Effects，Sketch2AE，Framer，Origami，Animatic App，UIDynamics（iOS）是用于动效设计的一些工具。查找它们。

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

9.捕获并保存您发现有趣的事物

保存您发现有趣的东西。一遍又一遍地看着它们，放慢它们，了解元素如何运动。通过复制学习。我的Mac充满了有趣的GIF动画。您还可以将GIF保存起来。

喜欢不如点个赞？

Powered by Froala Editor