了解如何使用自动制作动画与拖动手势进行设计和原型制作。

通过自动制作动画,您可以轻松创建具有沉浸式动画过渡效果的原型。您只需复制画板,修改对象属性(如大小,位置,旋转),然后应用“自动制作动画”操作即可创建画板之间的动画过渡效果。要使用“自动制作动画”,需确保要添加动画效果的对象在每个画板上都具有相同的图层名称。

“自动制作动画”功能是如何工作的?

传统上,设计师在各种画板上使用多个转变来连接他们的原型交互。借助“自动制作动画”,设计人员可以使用 XD 通过以下方式在两个画板之间创建微互动:

  • 在画板之间复制对象,
  • 修改大小、位置和旋转等属性。若要了解支持的属性,请参阅支持的自动制作动画属性
  • 切换到“原型”模式,
  • 添加“自动制作动画”作为新的过渡, ,然后
  • 在桌面或移动设备上预览原型。

就像通过“点击”来触发过渡一样,您可以将“拖动”手势与自动制作动画相结合,以指定画板间的微互动。在使用自动制作动画进行过渡的过程中,新对象会淡入,已删除的对象则会淡出。

注意:

目前,Web 浏览器不支持自动制作动画;因此,带有自动制作动画的原型不会出现在 Web 上。

拖动手势如何与自动制作动画一起使用?

Adobe XD 经过改进,从基本的点击式应用程序演变为可提供各种原型制作选项的应用程序,提供的选项包括:“时间”“点击”“拖动”“语音”

您可以使用拖动手势(例如拖动卡片或屏幕)模拟用户体验。您从触发条件列表中选择“拖动”后,XD 会自动将“操作”切换“自动制作动画”

注意:

目前,仅桌面和移动应用程序支持预览拖动手势。

  1. 在原型模式下,修改目标画板上同一对象的位置并将“触发条件”设置为“拖动”。

  2. 拖动的方向取决于对象的开始和结束的位置。如果第一个画板上的对象位于左侧,并且第二个画板上同一对象的位置位于右侧,则在预览窗口或移动应用程序中从左向右拖动。同样,您可以从右到左或从上到下创建拖动事件。

  3. 若要在桌面或移动设备中预览更改,请选择“预览”图标 

     

    工作中的拖动手势
    工作中的拖动手势

使用拖动手势为入门工作流程创建自动制作动画过渡

  1. “原型”模式中,选择画布上的所有画板,以查看画板之间的连线。

  2. 单击并将连接器从源画板中的图层拖动到目标画板中。当您连接第一个元素时,该元素所在的画板将设为主画板。

  3. 在“触发器”提示显示中,设置以下选项:

    • 触发条件:将手势类型设置为“拖动”
    • 操作:设置为“自动制作动画”
    • 目标:将目标画板设置为第二个画板。
    • 缓动:从下拉菜单中选择选项。
    自动制作动画工作流程
    自动制作动画工作流程

    A. 将手势类型设置为“拖动” B. 将操作设置为“自动制作动画” C. 设置目标画板 D. 选择缓动选项 
  4. 若要在桌面或移动设备中预览更改,请选择“桌面预览” 图标。

    工作中自动制作动画
    工作中自动制作动画

记录自动制作动画转变

  1. 在桌面应用程序中,单击右上角的“分享”图标并选择“录制视频”。

  2. 在预览模式下,点击录制按钮录制您的动画。

在桌面和移动设备上共享和预览原型链接

在桌面应用程序中,单击右上角的“共享”图标并选择“发布原型”“发布设计规范”。有关更多共享原型和设计规范的信息,请参阅“共享原型”和“设计规范”。

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

法律声明   |   在线隐私策略