主讲人：Howard Pinsky
大家好！我是 Howard Pinsky，Adobe 的高级 XD 宣讲师。今天，我们将一起来学习如何将视频和 Lottie 动画添加到原型中，让原型更加生动。让我们开始吧。
这是我在 Adobe XD 中设计的游戏平台。为了给它注入更多活力，我们来加入一些视频和 Lottie 动画。在主页的顶部有一张精美的主题大图，但我感觉光是这样有些沉闷。向 XD 项目添加视频的方式与添加照片非常相似。可以直接将它们拖放到画布上，或拖入空白形状中遮盖。添加并选定视频后，“属性检查器”中会出现视频播放选项。可以用它来控制视频的播放时机，这里我们选择在启动预览时自动播放。此外，点击左侧的图标将显示具有更多控件的操作界面，包括自定义缩略图、刷新和预览视频、打开或关闭音频、循环播放和我们后面会讲到的修剪视频。
添加视频并选择播放时机后，启动预览，我们就能看到视频播放的实际效果。光是这一改进就为原型增色不少。在介绍如何添加 Lottie 动画之前，我们来看看该组件的另一状态。这里又有一个设置为自动播放的视频。但是从预览中可以看到，飞机进入镜头需要几秒钟的时间。刚才讲到操作界面时，我提到还可以修剪视频。进入修剪模式后，可以拖动手柄来设置播放的起始点和结束点。这里，我希望飞机在视频一开始就进入镜头。设置完成后，点击勾状图标可应用这些更改。修剪不会破坏原视频，因此可以随时返回操作界面来调整或撤消编辑。
切换回默认状态后，我将再次启动预览。当我点进第二个状态时，视频会自动在新的起始点播放。我还连接了第三个视频。如果我回到第一个视频，会有一个展开视图，可以看到更多信息。您可能已经注意到，存在于“自动制作动画”类状态之间的视频会连续播放，不会中断。
好了，接下来介绍一下 Lottie。在“社区”页面上，我设置了一个在悬停时显示的组件。在其中，我简单设置了另一个区域，打算将它用作动画表情选择框。我们来编辑一下主组件，方便添加内容。在堆叠的组中，我会很快地复制现有图层几次，然后切换到 Finder，那里有一些可爱的 Lottie 动画表情，是请 ui8.net 的 Anna Movin 设计的。与视频拖放操作一样，Lottie 文件可以直接拖放到现有的 Lottie 图层上，也可以直接拖放到画布上，还可以遮盖在形状中并定义其大小。选定图层后，可以在右侧设置播放时机。这里需要将它们全部设置为自动播放。请注意，与视频不同，左侧的图标只能控制循环，这正是这类交互的特色。很好。
切换回此组件的默认状态后，我们就可以预览“社区”页面了。将鼠标悬停在消息上，然后再将鼠标悬停在表情符号图标上，就可以看到 Lottie 动画，知道它播放的实际效果。
在展示完整的原型之前，让我们快速介绍一下“播放结束”触发器，这个触发器可以帮助您自动完成一些视频和 Lottie 的交互。之前，我短暂地展示过该组件的扩展状态。此部分有一个按钮，指向下载状态。我在里面添加了一个在过渡后立即播放的 Lottie 动画。您可能会好奇动画播放结束后会发生什么？
切换到“原型”模式后，您可以看到有一个“时间”触发器，我们可以通过点击蓝色加号按钮添加第二个交互。这样我们就可以在“属性检查器”中选择“播放结束”触发器，该触发器将指示 XD 在视频或 Lottie 动画播放结束后执行过渡。对于这一交互，通向“播放”状态的简单过渡应该就可以了。“时间”触发器也可以跨越画板使用。在同一组件的加载状态下，我添加了另一个 Lottie 动画。除“时间”触发器外，还有“播放结束”触发器，指向“游戏”页面。当然，如果看不到实际效果，这一切都没有多大意义。所以让我们切换回默认状态，启动预览，展开这一视图，然后启动下载交互。有了“播放结束”触发器，组件就能自动过渡到“播放”状态，然后就可以点击启动加载动画。加载完成后，就会发生面板过渡。
这几个例子只是简单地演示了一下如何使用视频和 Lottie。我将在今后的教程中介绍更多的使用案例。在本教程结束之前，我们来完整感受一下整个体验。敬请欣赏。
添加动态图形，让您的原型更加生动。在本教程中，您将学习如何使用视频和 Lottie 动画设计游戏平台。可以将视频和 Lottie 文件直接拖放到设计画布上，或者拖到空白形状上充当蒙版。在“属性检查器”中调整视频播放选项。添加缩览图、刷新和预览视频、打开音频、修剪视频片段和循环播放。利用“自动制作动画”过渡连接交互，让视频不间断播放。使用“播放结束”触发器实现交互，在 Lottie 动画播放结束后自动过渡到另一状态。
