从 Adobe 发布 XD 到现在，已经快三年了。作为一款针对 UI 设计领域的后起之秀，XD 的更新一直都非常稳定，如今它的影响力也已经越来越大了。

注：

除文章外，我同时还录制了一份视频讲解，链接在下面：

https://www.bilibili.com/video/av41378467

一方面，Adobe 选择将 XD 免费，我们不用再使用盗版也可以持续获得最新版本更新；另一方面，开放了对第三方插件的支持，用传闻 1000 万刀的奖励来鼓励第三方开发者开发插件，力求弥补了面对 Sketch 时最大的软肋。

在去年 10 月份的更新中，XD 重点更新了关于交互动画方面的支持，包括语音、自动生成动画、拖动手势、导出到 AE 等。这个功能一上线，XD 的原生功能就足以覆盖大多数轻量化应用从原型、界面到动画上的一条龙操作。尤其是对 Windows 用户来说，在没有 Flinto、Framer、Principle 的情况下，也可以快速做出可以操作和演示的交互动画，而无需使用更吃配置和资源的 AE 来实现。

下面，我们就要详细讲解 Adobe XD 的动画功能，看看这些一直没怎么被人重视的功能可以帮我们实现什么效果。

XD 的动画面板在 “原型” 模式中，通过连线后点击角标就可以弹出，动画面板主要分成 3 个部分，交互方式、动画类型以及动画属性。

简单来说，就是通过设置指定操作触发对应属性的交互动画。

一、触发方式

触发方式就是我们平时对屏幕操作的交互方式，目前只提供了四种基础触发方式：

点击：点击屏幕触发

拖拽：滑动屏幕触发

时间：进入该页面固定时间之后自动触发

语音：通过指定语音（现只支持英文）触发

二、动画类型

动画类型，就是动画的形式，它的类型会根据我们选择的触发方式有所变动，主要的可设置选项包含：

动作：动画的动作形式

目标：从当前页面跳转到的目标页面

动画：动画的类型

下面，我们将所有动作和它所包含的动画类型做一次梳理：

1.过渡

过渡可以触发的动画选项有 10 个，除了“无”以外，其实只有三个大类：

溶解：很多工具会把这个动画翻译成 “渐隐渐现”，即当前页面慢慢隐藏，下一个页面慢慢出现。

滑动：目标页面可以从上下左右四个方向平移进来，并覆盖到当前页面上方。

推出：目标页面从上下左右四个方向平移进来，并同时将当前页面“挤出”画布。

滑动和推出效果非常接近，但应用上有一点小差异，滑动是在一般页面跳转中使用的效果，推出更多在类似引导页中平级滚动的场景下使用。

2.自动制作动画

自制动画的逻辑，就是在页面1和页面2中包含了相同的图层，并且图层的属性（位置、大小、圆角）不同，那么页面1中的这些图层就会逐渐过渡（移动、缩放、变形、旋转等）到页面2。

说白了，这就是 Keynote 中的神奇移动，只要 Keynote 用的比较多的同学一定不会陌生，再换个说法，它也叫关键帧动画，不同的页面就是不同的关键帧。

这个功能为 XD 制作动画带来了非常大的扩展性。

3.叠加

叠加就是将目标页面置于当前页面上方的效果，和滑入类似，但是原页面并不会移走。

应用叠加的场景，主要可以集中在类似弹窗、浮层这类非独立页面的效果中，我们只要在目标页面使用空白或带有透明度的背景即可。

4.语音播放

语音播放这个比较有意思，它不带任何动画效果。实际上它的作用是播放一段音频，而音频的内容则是在下方输入的英文文本。这个功能目前没有太大的用处，相信在后续如果支持自定义音效，才能发挥出更好的作用。

5.上一个画板

这个功能即自动返回之前跳过来的页面，通常添加在该页的返回按钮上，不用我们每次都重新定义一遍返回动画。

值得注意的是，这个动作会根据上一个页面跳转过来的动画，反向执行一遍。

三、缓动

我们再简单讲解下缓动。

在真实世界中，大多数物体发生的位移都不会是匀速的，比如自由落体、抛物线、车辆启停等等。这导致我们对元素产生的动画效果也有一样的期待，如果所有元素发生的变化全是匀速的，那会让我们觉得很 “反常”，这就是我们需要去应用缓动的动机。

于是，业界就发明了用来描述进程和时间的坐标轴，用线条来反应它们的关系，如下图所示。当然，这类信息在网上已经非常充足了，XD 目前页不支持曲线的自定义，所以这部分就不展开讲了。

目前，XD 中之提供了最常见的几种缓动类型，我们可以通过下面的对比图例了解一下。

1.渐出

进程由快到慢的过程，即结束的时候速度越来越慢。

2.渐入

进程由慢到快的过程，在开始时较慢。

3.渐入渐出

在开始时较慢做加速运动，到一半时速度达到最快，并在这时候减速至结束。

4.对齐

对齐就是先应用渐出，然后在结尾处超出原本的范围之后再缩回，即一个轻微的抖动效果。

5.卷紧

相当时对齐反过来的效果。

6.弹跳

弹跳则和名字一样，再结束的时候有几次幅度比较大的抖动。

最后，我们再在一张图里查看它们的对比，有个更直观的印象。

好了，相关的功能解释完了，现在就要拿些真家伙出来演示一下。下面，我通过之前做过的一个 APP 案例，来完整应用一遍 XD 的动画功能，先看一看完整的效果。

PS：页面案例直接设计出来的，没有太充足的时间，大家先看着就行。

第一步，实现基本的跳转。

我们先简单的将页面用过渡效果以及返回上一页串联起来。

第二步，制作首页幻灯效果。

先复制2个首页出来，然后移动幻灯片编组到 2 和 3 的对应位置。

通过选中画板拖动连线，将这 3 个页面首位衔接，选择动作为时间，2s，然后应用，自动设置动画。

于是，幻灯片就可以自动播放了。

第三步，分类页实现拖动卡片的效果。

先做出拖动卡片后的效果页面。

然后将两个画板相互链接起来，使用拖移和自动制作动画效果。

于是，我们就可以通过拖动的交互让卡片进行位移，遗憾的是目前只支持一个方向的拖动。

第四步，实现分类到详情的过度动画

要让分类页面能直接过度到详情页面而不是翻页跳转，就要让两个页面中有相同的元素，详情页的图片，我们可以直接从分类页中复制过去再重新定义尺寸。而详情页中底部的卡片，则要复制到详情页中并移动到屏幕底部。

然后选择图片链接到详情页，使用自制动画，并将缓动改成对齐，就可以实现元素的位移和缩放组成下一个页面的动画效果。

第五步，实现通知弹窗的移入

新建一个弹窗页，背景用一个黑色透明度矩形。在首页上创建一个热点区域，链接到弹窗页，设置对应的参数为点击、叠加、下滑、渐出。

然后，我们就可以通过在首页点击这个热点区域触发弹窗的叠加滑入。

当然这个效果还可以换种思路，即使用自动制作动画的方式实现。这就要先设计好弹出的样式，然后将多出来的图层复制回首页，对它们进行缩小和透明度修改（看似没有实则隐藏）。

当然，这个过程我们还可以更改一些参数，使得动画效果更有趣一点，比如下图所示。具体操作方法可以参考视频。

结尾

了解好 XD 的这些基础功能，那么制作一些简单的动效已经不成问题了。它真正优势是在于，设计一整套应用以后，我们可以轻易的制作出一套相对完整的动画原型出来，直接进行操作和演示，无需再导入到其它动画软件中制作。

虽然目前的功能还很简陋，有不少逻辑上的问题没有给出更好的解决方案，但是已经可以窥见 Adobe 对 XD 未来发展的定位了。相信在 2019 年，一定会上线对动画支持更充分的更新。

感谢大家的收看，希望对大家有所帮助。

最最后再厚颜无耻地安利一波我的公众号：超人的电话亭，之前我爆肝整理了一份超全超详细的 UI 设计组件库 (XD文件)，如果有需要的同学也可以关注公众号回复“UIkits”获得：

你想要的设计干货这儿可能全都有，欢迎大家关注。