用户指南 取消(C)

制作原型动画

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

示例和示例文件

了解详情

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

更快、更轻松地获得帮助

新用户?