制作原型动画

上次更新日期: 2022年2月17日

了解如何使用自动制作动画来创建微交互。

借助自动制作动画功能,您可以创建沉浸式过渡,以便呈现内容在画板之间的移动。

它同时提供“拖动”“时间”触发器的功能,可以帮助您创建各种效果(例如 YouTube 滑动和拖动效果),以便您更好地讲述原型故事。

网站中的涟漪互动效果
网站中的涟漪效果

触屏设备上的滑动和拖动效果
触屏设备上的滑动和拖动效果

要创建动画原型,请按照下列步骤操作:

在开始之前,请通过以下简单规则了解对象会在动画过程中经过哪些处理:

  • 如果对象没有出现在目标画板上,则该对象会淡入。
  • 如果对象没有出现在源画板上,则该对象会淡出。
  • 如果对象的图层名称和组均匹配,则系统会对属性进行动画处理。 要全面了解哪些属性和过渡受支持,请阅读对象属性
  • 如果要构建水平或垂直滚动效果的原型,请使用滚动组

在原型模式下连接画板。 

单击连接器以查看“属性检查器”中显示的交互面板,并设置以下选项:

  • 触发器:选择一个选项以触发动画。 例如,要模拟点按信息卡体验,请选择点按。 
  • 操作:选择“自动制作动画”。您现在可以在单个触发器(如点击)中分配两个操作。要进行这一操作,请将“属性检查器”中的第一个“操作 +”按钮设置为“过渡”“自动制作动画”“叠加”“滚动至”“上一个画板”,然后将第二个“操作 +”按钮设置为非过渡性操作,例如“音频播放”“语音播放”。 请注意,如果选择“音频播放”或“语音播放”作为第一个操作,则无法添加第二个操作。
  • 目标:选择目标画板以过渡动画。
  • 缓动:选择一个选项来模拟缓动效果。 例如,如果您希望自己的动画实现从原型渐出的效果,请选择“渐出”
自动制成动画工作流程
自动制成动画工作流程

A. 选择触发器类型 B. 选择要自动制作动画的操作 C. 选择目标画板 D. 选择缓动效果 

要为一个对象定义更多的交互,请选择已定义交互的对象,然后单击画板上的“+”按钮;或者,您也可以在“属性检查器”上单击“+”。

 请记住,您可以应用一次点击、拖动、悬停时间触发器,而应用多次语音按键和游戏手柄。 

受支持的浏览器中选择 “预览动画”。 

 请记住,在预览通过自动制作动画功能制作的画板时,XD 不支持滚动。

示例和示例文件

想要了解自动制作动画的详细原理?开始使用此 UI 套件,其中包含基本交互、UI 元素、拖拽示例等内容。

您也可以使用更多这样的示例文件,试验自动制作动画功能。

希望实现 YouTube 滑动效果而不必费力地使用时间线和关键帧?

连接画板并在“属性检查器”原型中选择以下选项:

  • 触发器:选择拖拽。  
  • 操作:选择“自动制作动画”
  • 目标:选择目标画板以创建动画过渡效果。
  • 缓动:选择一个选项来创建缓动效果。 例如,选择“渐入渐出”可实现从原型渐入渐出的动画效果。

请下载示例文件并亲自尝试,或者观看本视频以了解更多信息。

观看时长:1 分钟。

希望了解如何使用渐入效果创建动画移动菜单? 

  1. 下载示例文件。
  2. 在原型模式下,将汉堡菜单连接到 home_expanded 画板,然后在“属性检查器”原型中选择以下选项:
  • 触发器:选择点击。  
  • 操作:选择“自动制作动画”
  • 目标:选择目标画板以创建动画过渡效果。
  • 缓动:选择“渐入”效果。
  • 持续时间:将持续时间选择为 0.8 秒。

希望向您的设计中添加高级动画? 观看此视频以使用 After-Effects。 

从 Adobe XD 导入 After-Effects(观看时长:1 分钟)

了解详情

要了解有关 XD 中自动制作动画的详情,请观看此视频。
观看时长:6 分钟