前几期，我们教大家如何使用Photoshop将一系列静止图像合成简单的GIF动画图像。常言道，温故而知新，学会了也要记得勤加练习和复习！

本期，我们将为大家带来实用且简单易学的制作动画原型的小教程。而此次教程的主角，是Adobe CC家族中另一位非常受欢迎的成员——Adobe XD CC！

下面，我们进入正题：“如何使用Adobe XD CC制作动画原型”。事实上，你只需两大步骤，和几小步就可以完成！现在开始吧～

制作动画原型

在原型中添加流体运动

首先，你需要打开一个 .xd格式的文档

1

单击画板名称，然后使用alt键(或option)+拖动键盘复制原始画板。

提示:要在Adobe XD中使对象具有动画效果，图层须具有相同的名称。复制画板也会复制图层名称。

2

双击其中一条波浪线，将其转换为路径。拖动每个点以更改路径的形状。对三条波浪线中的每一条波浪线都逐一重复上述步骤。

3

复制刚才编辑的画板，现在你能在界面上看到3块画板。改变最新（第3个）画板上波浪线的路径（重复上述步骤3的动作）。

设置动画路径

1

接着，点击“原型”进入原型模式，点击左上方第一个画板的名称来选中它。

2

将导线从蓝色箭头拖动到第二个画板上，然后选择以下设置:

触发：“时间”

延迟：“ 0”

动作：“自动制作动画”

3

将导线从第二个画板拖到第三个画板上。（XD会记住前面的设置，所以在这一步，你不需要更改任何东西设置）

4

将导线从第三个画板拖回到第一个画板，创建一个循环动画。

5

点击右上方的播放按钮，进行桌面预览。 使用Command+return或Ctrl+enter，来测试这个动画原型。

阅读过我们上一期内容的小伙伴想必已经了解到XD是用户体验设计师的法宝之一。而学会用XD制作动画原型，为用户创建舒适的感官体验更是一个用户体验设计师的必备技能。学以致用，下载免费的XD，多多练习起来，相信勤奋的你可以创造出更优质的用户体验，或是离成为一个优秀的用户体验设计师更近一步。 此外，在Adobe微信公众号里还有很多同样非常简单实用的教程等你来“翻牌”哦～

学无止境，留言告诉我们你最想学习和了解Adobe CC家族的哪一款软件或是软件功能，让Adobe满足你～

下载XD-免费

推

荐

阅

读

叮！您有一封来自Photoshop CC 2019的简历待查收

使用 Photoshop 将一系列静止图像合并成GIF

简单五步，用Premiere Pro CC做出属于自己的“大片”！

关注Adobe官方微信公众号，

灵感激发永无止境！

提示：如果您觉得本文不错，请点击分享给您的好友！谢谢
本文标题：XD教程| 如何使用Adobe XD CC