动效是这个扁平化时代，交互设计必然的一个出口。ui动效设计能让用户体验更加舒适顺畅，一直都非常受设计师欢迎。
现在扁平化来临的这几年我们不难发现，动效越来越深入人心，那些深受用户喜爱的产品都在把动效作为app的表现形式之一。
动效设计并不只是为了修饰，他的重要性是在用户在遇到问题时候，动效能够用易于用户接受的方式帮助用户解决。能站在解决问题的立场上给我们提供一种新的方式。
动效可以表现app的质量，并且可以提供和完善信息的关联形式，还可以与用户互动，产生共鸣
那我们聊聊关于动效设计这点事，图片较多，建议先马后看。
首先动效设计分为两种类型
1，mg动效类
mg动效类
mg动效在大多数交互设计里，都是充当了增加产品魅力值，增加趣味性的作用。
这类的小动效还可以帮助品牌在细节中流露出它的特性，还能表达应用的情绪和气质，在产品内部以及产品之间形成完整并且统一的操作体验。
2，交互动效
交互动效
我们可以看到动效在浏览器里面，非常有效的去引导用户进入下一个页面，并且把层次结构和空间关系在屏幕内外之间进行一个传达。
在触发一个动作之前，用户可以提前预知到接下来的反馈，并且可以从好的方面去分散用户的注意力。
动效设计的原则
我们先看一个在交互设计里面第一个明确动效表意的官方设计规范。
在谷歌的基础上进行了延伸和概括，可以总结出一个好的动效设计，需要具备四个条件：
快速反馈符合自然规律洞察其他元素明确视觉引导
1，快速反馈
天下武功，唯快不破。
快速反馈的指动效需要对操作快速做出反馈和响应。
快速反馈里，时间很重要，慢了用户会感到拖沓，快了用户又会感到不适。这里，推荐动效的持续时间在300到350毫秒之间，这个时间是比较舒服的。
超出这个时间就会给人的感受非常的慢，非常的迟钝。虽然慢状态下的用户能看到更多的细节和更细腻的过渡，但是这只是交互设计师的一厢情愿，用户只想以最快的速度完成自己在app里面的任务。
正确案例：
反面案例：
2，符合自然规律
人们总会习惯把大自然里面看到的东西带入到电子屏幕世界，这就需要我们在做动效时候一定要符合自然运动规律。
自然界中的运动一般都会受到各种各样外界力量的影响，比如空气阻力，惯性，摩擦力等等。
没有任何物体会突然动起来或者突然停下来，通常都会有一段从动态到静止或者静止到动态的过渡过程，那么身为交互设计师为了遵循这个自然运动规律，就需要我们对动效加上一定的缓动。
缓动分为以下几种情况：
（1）缓入缓出
案例：
（2）缓入
一个元素从屏幕外进入屏幕，他一瞬间的加速发生在屏幕外边，你看不到他，他给人的感觉就是它从屏幕外边特别快速的进入。
用户也不在乎他从哪儿来，只会留意它最后去了哪里，像这样的曲线我们就称之为缓入曲线。
案例：
（3）缓出
相反的，缓出曲线用在元素退出屏幕的时候，他的加速是递增的，但是他的减速是一瞬间的，相同的，减速的一瞬间发生在屏幕外边我们也就不会再去留意。
案例：
（4）弧形运动
动效除了基本的缓动之外，还需要另一个概念：弧形运动。
为什么是弧线？流星划过是一条弧线，人挥手是一条弧线，风吹树枝的摇摆也是弧线，纯直线运动的物体是没有的，它或多或少都会受到这个力那个力的影响，所以我们在做动效的时候要加一些曲线运动。
案例：
总结：
当你做的动效符合自然规律后，界面里每一个元素在转场过渡中都考虑了不同重量会对外力做出的反馈后，你的动效才会看起来无比的顺滑又恰到好处。
3，洞察其他元素
下面这张图片表现了动效在转场过程中的元素变换。
当元素切换界面的时候，它会考虑与周围其他元素的关系，按照层次结构进行变化，解释这些元素从哪里来，到哪里去。
元素或者模块表面可以互相推开，在相同高度下的元素，一个元素展开就需要推开另一个元素或者模块来展现层级。
当元素上升到了不同的高度，就不需要再去推开周围的元素了。
4，明确视觉引导
（1）共享元素
在动效设计里有一个比较关键概念叫做共享元素。共享元素就是共同出现在相关联的两个页面中，上个界面到下个界面的切换过中，共享元素内容不发生变化。
如下如的app store：
但是注意，共享元素一般在界面中有一到两个就足够了，太多会导致用户无法辨别哪个才是共享元素，不知道该跟着哪个。会产生干扰，得不偿失。
（2）交错元素
还有一种视觉引导的方式叫做交错元素，利用每一个元素出现的先后顺序来引导视线，核心理念是把视觉引导到一条直线上，单列的交错一般情况下从上往下最为合适，会比不自然的出现和同时出现更容易引导用户去做一些操作。
（3）交错网格
交错网格会复杂一些，适合场景有限，一般我们把网格当做一个整体，再把他们沿一个对角线依次展现出来，会比逐行处理更容易引导用户去做一些操作，单列交错或者网格交错的错帧时间一般建议是在20-25毫秒之间。
（4）提前预知
除了转场动画中的视觉引导之外，在转场之前也可以通过一定的反馈提前预知操作的结果，比如这里一个简单的卡片右滑，在不能滑动的情况下加上一定的阻力，表现他的不可滑动，相反当我们遇到可以滑动的项的时候可以让他显得更容易滑动。
插件分享
1，sketch 2 ae
这款插件是谷歌最近推出的一款插件，只需要简单的对 sketch 中的图层用插件做一个复制粘贴就能完成从 sketch 到 ae 的导入，并且支持 “组” 和 “组件” 的导入，以及对矢量图层的导入。
2，trapcode
我们在 dribbble 上经常都能看到这样一些令人眼花缭乱的动效，像这样的动效大多数都是使用 trapcode 插件制作的。功能及其强大，合理利用能做出非常炫酷和顺滑的效果。
3，motion2
它主要用在 mg 动效领域，功能全面且十分实用。
重点推荐三个功能：
1，调节缓动
2，快速定位中心点
3，批量复制关键帧
ae 的操作虽然相当复杂，但是有了这款插件之后，就能大大提高我们的效率。
4，flow
我们在 ae 里调好的缓动，在和开发哥哥对接的时候他们是很头大的，因为开发程序里读取的是贝塞尔曲线，而非速度图表。那么针对这种情况，flow这款插件，提供了25种可以直接给到开发的曲线类型。还可以导出css缓动代码，帮助团队完成缓动复用。
以上的分享就到这里。