Adobe XD 自动制作动画功能使得Adobe XD制作微交互动画有了更多的可能，Adobe XD 的自动制作动画要求第二个画板是第一个画板复制过来的，第二个画板中的内容做了改动，可以完成自动补间。类似于keynote里面的神奇移动，或者之前flash中的补间动画。

我们先看一下最终效果

打开Adobe XD，我们开始吧！

1、新建画布、拖入图片

这里我新建的画布尺寸是1920*1080像素。然后在画布中，画两个矩形框。红色矩形尺寸和画布尺寸一样，蓝色矩形我用的是200*1080像素。

2、处理图片，导入画板

照一张照片，拖入PS，裁剪成画布尺寸，然后分别保存一张正常色彩的和去色黑白的。然后把黑白的拖入红色矩形，正常颜色的图片拖入蓝色矩形。双击正常颜色的图层，调整图片的位置，让图片最右侧和矩形右侧对齐。

3、添加手柄

这一步可以发挥自己的设计能力，设计一个好看的手柄，我自己添加了一个简单的手柄，然后给手柄打组。

4、复制画板、调整图层

做好的画布进行复制，然后调整右侧正常颜色图片图层的宽度为1720，然后双击调整图片位置，最后调整手柄位置。

5、自动制作动画

终于到了最重要的一步了，前面的素材做好了以后，点击XD左上角的原型按钮，对第一个画板手柄添加触发方式为拖移，连接目标为下一个画板，类型选择自动制作动画，具体参数如下图。另一个画板的手柄也用相同的方式连接到第一个画板，参数相同即可。到这一步就大功告成了，具体的操作步骤可以看视频教程，第一次录屏讲课，不足之处还请见谅。

Powered by Froala Editor