创建定时过渡

上次更新日期: 2023年2月10日

了解如何使用时间触发器创建定时过渡。

通过时间触发器,您可以根据时间延迟和持续时间在画板之间创建过渡。 

您可以将时间触发器与操作结合使用以打造一系列效果,例如循环动画、进度条等。 以下是时间触发器自动制作动画结合使用以打造循环效果的示例。

使用时间过渡的动画计数器
使用定时过渡的动画计数器

要创建简单的定时过渡,请执行以下步骤:

“原型”模式下,单击源画板的标题并将其连接到目标画板。 

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

  • 触发器:选择“时间”。 如果您没有看到“时间”选项,您可能没有在第 1 步中选择整个画板及其标题。  
  • 延迟:输入开始过渡的时间延迟。 可接受的范围是 0.2-5 秒。
  • 操作:选择“过渡”。 您还可以将“时间”触发器与其他“操作”结合使用,例如“自动制作动画”“叠加”“语音播放”,以打造各种不同效果。 请参阅示例以了解如何创建循环动画效果。
  • 目标:显示第 1 步中连接的目标画板;您可以根据需要进行修改。
  • 缓动:选择要在源画板上应用的缓动效果。
  • 持续时间:输入缓动效果的持续时间,以表明缓动效果的持续时间。 可接受的范围是 0.2-5 秒。 

XD 将您的属性保存在画板中,并在其他屏幕上将其作为默认设置提供。

要预览定时过渡,请选择 。 

示例和示例文件

计数器动画用于以一种有趣而抢眼的方式显示数字。 想要了解如何使用定时过渡来创建一个持续运转的记分牌?

1. 在 原型 模式中,选择画板标题并设置以下选项:

  • 触发器:选择“时间”
  • 延迟:将时间延迟设置为 0.8 秒。
  • 操作:选择“自动制作动画”
  • 缓动:选择“渐入渐出”
  • 持续时间:将持续时间设置为 4 秒。

2. 单击 预览动画数字计数器。

请下载示例文件并观看此视频以尝试上述操作。

观看时间:2 分 47 秒。

是否要使用定时过渡为应用程序创造引导体验? 请观看此视频并使用此免费 UI 套件创建入门工作流程。

观看时间:5 分 2 秒。

应用程序的入门经验

您还可以访问 XD 支持社区,获取更多示例和教程。

提示和技巧

您知道吗?您可以将“时间”过渡与“自动制作动画”以及“叠加”结合使用以打造交互式效果。 请观看此视频以了解更多信息。

观看时间:8 分 33 秒。


相关资源

告知我们

询问社区

如果您有问题要问或要分享想法,欢迎加入 Adobe XD 社区。 我们很乐意倾听您的心声并欣赏您的创意作品。