今天我跟大家回顾包文奎的分享内容，他在阿里移动事业群RED第三工作室工作，主要负责动效制作。积累了丰富的相关经验，提升动效实力看这篇就够啦！

说包文奎大家可能不熟悉，但说到 Jadon7，哈哈，我们的七爷！说起来挺有意思的，他 dribbble 中国区排名第7，我们有次无意间聊起，你最近发的好像不那么勤了，他是我的幸运数字是7，正在严格控制。

能到中国区第7，作品质量当然没得说，很多作品都被 muzli 网站收录，他们专门收录优质作品。这样的成绩，按我们的话说就是：老铁非常之7

一、为什么做动效

现阶段，大家最关心的点是为什么做动效。这几年我们不难发现，那些深受用户喜爱的产品需要动效作为他的表现形式之一，动效设计不是只为了修饰，它用用户易于接受的方式解决了现有问题。

二、动效分类

从大类上，动效可以分为两类。一类是MG动效，增加产品魅力值和趣味性；另一类是交互动效，有效引导用户理解层次结构和空间关系，我们依次来说。

2.1 MG动效

这类动效在 UI 设计当中，大多数情况下都是为了增加产品魅力值和一些趣味性的点，可以帮助品牌在细节中流露出其特性，提升产品魅力值，表达应用情绪和气质，在产品内部以及产品之间形成完整并且统一的操作体验。

2.2 交互动效

交互动效可以非常有效的去引导用户进入下一个页面，可以把层次结构和空间关系再屏幕内外之间进行一个传达。用7爷公司的产品夸克浏览器产品做得一个动效延伸，可以在你触发一个行为之前预知到一个手势会触发的行为，以及它可以从好的方面去分散你的注意力。

三、如何提高

7爷能屡获 muzli 收录，凸显了他动效的高超水准，他是如何提高的呢？居然有一套方法论你敢信。平时大量收集优秀作品，在此基础上进行一定的归纳分类和学习总结，有了一定的积累之后再进行一个提炼，最后再到实战到落地。

大多数情况下收集素材的途径除了 dribbble 和 behance 之外，vimeo 这类比较偏向于影视动画类的网站也会经常去浏览，还有像 iOS 和 Android 设备当中默认的一些动效也会经常认真做一些拆解。

在此积累一定数量之后，进行一定的归类整理，细分归类到不同的一些文件夹，比方转场，微交互，特效，车载之类的。然后每一个具体的动效会加一些特定标签，方便在后期快速通过不同的关键词找到参考。具体怎么分类和整理呢，在这里7爷给大家抛砖引玉的示范一下。

特别是在 dribbble 上，有大量优质内容，7爷分享了一些他在 dribbble 上经常关注的设计师，大家是不是该关注一波啦～

除此之外呢，还有一些产品做的也非常棒，像uc浏览器、夸克浏览器，动效体验上做的都非常出色，以及Uber和Elevate这两款产品，强烈推荐大家下载体验。特别是最后推荐的是这款 App，被 App Store 连续推荐好多次，他是以动效著称，几乎每一个过渡和转场都会有一些动效。

四、动效设计原则

一个动效设计需要具备的条件有四个，分别是：快速反馈、符合自然规律、洞察其他元素、明确视觉引导。

4.1 快速反馈

快速反馈的指动效需要对操作快速做出反馈和响应。比如现在很多 App 的出现水波反馈，对卡片添加投影表示高度发生变化，还有像最近 iOS11 中 App Store 的卡片在按压状态下的缩放。

效果有了，时间也很重要，慢了用户会感到拖沓，快了用户又会感到不适。这里，7爷推荐大家做移动端动效的持续时间是在 300 到 350 毫秒之内。

超出这个时间就会给人的感受非常的慢，非常的迟钝。虽然慢状态下的作品能看到更多的细节和更细腻的过渡，但是实际落地的动效并不能因为这个成为他放慢的理由，下面就是个反例：

4.2 符合自然规律

（1）缓动

自然界中的动效一般都会受到各种各样外界力量的影响。而且通常状况下，没有任何物体会突然动起来或者突然停下来，通常都会有一段从动态到静止或者静止到动态的过渡过程，那么作为动效设计为了遵循这个规律，就需要我们对动效加上一定的缓动。

（2）缓入

一个元素从屏幕外进入屏幕，他一瞬间的加速发生在屏幕外边，你看不到他，他给人的感觉就是它从屏幕外边特别快速的进入，用户也不在乎他从哪儿来，只会留意它最后去了哪里，像这样的曲线我们就称之为缓入曲线。

（3）缓出

相反的，缓出曲线用在元素退出屏幕的时候，他的加速是递增的，但是他的减速是一瞬间的，相同的，减速的一瞬间发生在屏幕外边我们也就不会再去留意。

（4）弧形运动

动效除了基本的缓动之外，还需要另一个概念：弧形运动。为什么是弧线？自然世中就算是流星划过也是一条弧线，纯直线行走是没有的，它或多或少都会受到这个力那个力的影响，我们在做动效的时候也可以加一些曲线。

是理解动效符合自然规律后，这里的每一个元素在转场过渡中都考虑了不同重量会对外力做出的反馈，所以看起来会非常的顺滑而又恰到好处。

4.3 洞察其他元素

我们用 uigreat 团队中李超的作品跟大家演示下，表现动效在转场过程中的元素变换。当元素切换进入界面的时候，它会考虑与周围其他元素的关系，按照层次结构变化，解释这些元素从哪来，去理解 App 是如何构建的。

元素或者模块表面可以互相推开，在相同高度下的元素，一个元素展开就需要推开另一个元素或者模块。

另一种情况下当元素上升到了不同的高度，就不需要再去推开周围的元素了。

理解了他们之后，我们再看一下七爷的一个作品，前后元素在三个不同高度下跟周围其他元素的互相影响。

4.4 明确视觉引导

最近几年，苹果、安卓以及微软都在动效上大下功夫，并且动效设计现在越来越被受重视。

（1）共享元素

在页面动效有一个比较关键概念叫共享元素。共享元素就是共同出现在相关联的两个页面中，上个界面到下个界面的切换过中，共享元素不发生变化。

iOS 11 app store

但是注意，共享元素一般在界面中有一到两个就足够了，太多会导致用户无法辨别哪个才是共享元素，不知道该跟着哪个。虽然在 MG 里可以，很多元素都动，很酷炫，但 UI 动效不行。所以：共享元素一般不会超过两个。

（2）交错元素

还有一种视觉引导的方式叫做交错元素，利用每一个元素出现的先后顺序来引导视线，核心理念是把视觉引导到一条直线上，单列的交错一般情况下从上往下最为合适，会比不自然的出现和同时出现更容易引导用户去做一些操作。

（3）交错网格

交错网格会复杂一些，适合场景有限，一般我们把网格当做一个整体，再把他们沿一个对角线依次展现出来，会比逐行处理更容易引导用户去做一些操作，单列交错或者网格交错的错帧时间一般建议是在20-25毫秒之间。

（4）提前预知

除了转场动画中的视觉引导之外，在转场之前也可以通过一定的反馈提前预知操作的结果，比如这里一个简单的卡片右滑，在不能滑动的情况下加上一定的阻力，表现他的不可滑动，相反当我们遇到可以滑动的项的时候可以让他显得更容易滑动。

五、插件分享

在此基础上，7爷给大家推荐几款插件，帮助大家提升效率。

5.1 sketch 2 ae

这款插件是谷歌最近推出的一款插件，只需要简单的对 sketch 中的图层用插件做一个复制粘贴就能完成从 sketch 到 ae 的导入，并且支持 “组” 和 “组件” 的导入，以及对矢量图层的导入。

5.2 Trapcode

我们在 dribbble 上经常都能看到这样一些令人眼花缭乱的动效，像这样的动效大多数都是使用 Trapcode 插件制作的。功能及其强大，合理利用能做出非常炫酷和顺滑的效果，像下面这个我们 uigreat 成员做的效果。

5.3 Motion2

它主要用在 MG 动效领域，功能全面且十分实用。重点推荐三个功能：调节缓动、快速定位中心点、批量复制关键帧。AE 的操作虽然相当复杂，但是有了这款插件之后，就能大提高我们的效率。

5.4 Flow

我们在 AE 里调好的缓动，在和开发哥哥对接的时候他们是很头大的，因为开发程序里读取的是贝塞尔曲线，而非速度图表。那么针对这种情况，7爷推荐flow这款插件，提供了25中可以直接给到开发的曲线类型。还可以导出 css缓动代码，帮助团队完成缓动复用。

最后

在动效设计中需要持续不断的去吸收、借鉴新的动效灵感，大家也可以关注 7爷 的 dribbble bucket，他在里面对各类动效作品做了一些完整的收集，希望大家可以从中有所收获。

7爷的追波用户名：Jadon7