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

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

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

网站中的涟漪互动效果
网站中的涟漪效果
触屏设备上的滑动和拖拽效果
触屏设备上的滑动和拖拽效果

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

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

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

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

    • 触发器:选择一个选项以触发动画。例如,要模拟点击卡体验,请选择“点击”
    • 操作:选择“自动制作动画”
    • 目标:选择目标画板以过渡动画。
    • 缓动:选择一个选项来模拟缓动效果。例如,如果您希望自己的动画实现从原型渐出的效果,请选择“渐出”
    自动制成动画工作流程
    自动制成动画工作流程

    A. 选择触发器类型 B. 选择要自动制作动画的操作 C. 选择目标画板 D. 选择缓动效果 
  4. 受支持的浏览器中选择“预览动画”。若要与利益相关者共享您的原型,请单击“共享”>“共享以供审阅”

    注意:

    在预览通过自动制作动画功能制作的画板时,XD 不支持应用滚动效果。

示例和示例文件

想了解自动制作动画的具体细节吗?开始使用此 UI 套件,它提供基本的交互、UI 元素、拖动示例等等。

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

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

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

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

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

观看时长:1 分钟。


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

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

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

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


您还可以查看 XD 社区,了解更多这样的教程和示例文件。

最佳实践

您是否知道可以使用各种缓动选项来改变动画原型的用户体验?继续阅读,了解最佳做法,观看视频,Adobe XD 的首席设计师 Talin Wadsworth 会在视频中分享一些关于使用自动制作动画功能的实用技巧

观看时长:1 分钟。


本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略