最近XD更新了一个大版本，前阵子偶然用用发现有很多有趣的新交互功能，整理了下发出来！可以先预览它最后的效果：

放一下录制的讲解视频：超人的电话亭公开课 - XD高级交互动画详解​www.bilibili.com

从 Adobe 发布 XD 到现在，已经快三年了，作为一款针对 UI 领域的后起之秀，XD 的更新一直是很稳定的，从 18 年起官方的大力支持开始，它的影响力已经越来越大。

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

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

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

XD 的动画功能

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

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

交互方式

交互方式就是我们对屏幕操作的方式目前主要只提供了：点击：点击屏幕触发

拖拽：滑动屏幕触发

时间：进入该页面以后多少时间自动跳转

语音：通过指定语音(英文)触发

动画类型

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

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

动画：动画的类型

下面，我们将所有动作和对应动画做一次梳理：

1.过渡

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

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

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

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

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

2.自动制作动画

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

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

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

3. 叠加

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

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

4.语音播放

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

5.上一个画板

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

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

缓动

最后，我们再简单讲解下缓动的效果。

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

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

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

渐出

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

渐入

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

渐入渐出

在开始时较慢，执行到一半时加速到最快，并在这时候减速至结束

对齐

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

卷紧

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

弹跳

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

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

案例演示

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

结尾

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

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

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