Origami Studio 教程 第八节 延迟动画

创建定时动画

有时需要一个动画在原型开始时自动启动，或通过定时器自动启动。有时需要随着时间的推移激活多重事件。这些都是纯粹基于时间的，没有任何点击之类的交互触发。

我们将重新创建 Facebook Live 的评论，学习怎么实现。下好载教程文件。

开始前先下载好安装文件和教程文件。底下的网盘链接里有安装文件 、一个案例文件夹、一个教程文件夹；按自己的需要下载。

选择教程文件中对应名称的文件夹下载，内包含一个（开始）和一个（已完成）文件；（开始）文件用来和教程同步操作，（已完成）是最终结果。

▲▲

1. 设置

打开标记为（开始）的文件。编辑器中 Comments Y 轴 已经连接了 Option Switch 和 Option Picker。（如果还没有学习《切换多个状态》 可能会不知道是什么意思，可以先学习那篇。）

板栗：教程文件里用到了剪切蒙版，在《剪切蒙版》 里会详细讲解怎么用剪切蒙版。

▲ 一打开文件模块的连接就是这样的了。

点击 Option Switch 模块每个输入口后的小点，可以看到 Comments 图层沿 Y 轴方向上下移动。

▲ 点击每个输入口。

▲▲

2. 原型启动时

第一个位置（Set To 0）是我们的起始位置。那怎么在一定时间后自动将原型转到下一个位置（Set To 1）呢？

Origami 有一个叫 原型启动时 When Prototype Starts 的模块可以控制原型启动时激活交互。添加一个 When Prototype Starts 模块到编辑器。连接到 Option Switch 模块的 Set to 1 接口。

▲ 检查确定是连接到 Set To 1 的。我们要实现从 Set To 0 的位置自动移动到 Set To 1，0 是起始位置，连接到这里不会有任何效果。

因为原型是已经开始的状态，所以我们不会看啥效果。点击查看器工具栏上的重新启动原型按钮。注意在编辑器中发生的脉冲。

▲ 重启原型。

▲▲

3. 等待

现在是立即进入 Option 1 的，但想要的是在原型开始之后才能启动，并且暂停一会儿，给一点喘息的空间。所以需要原型等待一秒钟。

添加一个 Wait 模块。将 When Prototype Starts 输出口连接到 Wait 模块，将 Wait 模块连接到 Option Switch 的 Set To 1 输入口。

▲ 确定连接的是 Set To 1

重启原型，注意看前两个模块。可以看到信号立即发送到 Wait 模块，等了一秒钟后才被发送到Option Switch。

有几种方法可以实现自动进入下一个Set To 输入口，但这里会讲最简单的一种，添加更多 Wait 模块将它们连接到 Option Switch 对应的接入口上。

再添加一个 Wait 模块到编辑器。跟第一个 Wait 模块一样，将 When Prototype Starts 的输出口连接到 Wait 模块的 Start 输入口，再将输出口连接到 Option Switch 的 Set To 2 输入口。

让第二个 Wait 模块持续3秒。3 秒是从原型开始计数，而不是从第一个等待补丁结束后的3 秒。

▲ 第一个 Wait 模块在原型启动时立即触发。3秒钟后，再触发下一个。

▲▲

4. 多重延时

再添加 3 个 Wait 模块分别连接到 When Prototype Starts 和 Option Switch 之间。

分别更改 Wait 模块的持续时间，让它们在不同的时间触发。例如：第三个Wait 模块的 Duration 输入6 ，第四个 8，最后一个 11。

板栗：时间差多少自己随意啦，只要后面的比前面的长就行。

最后，按顺序将每个Wait 模块的输出口连接到Option Switch 上的其余输入口。

▲ Wait 模块持续时间从短到长排列，并按此顺序连接到 Option Switch 输入口。

重启原型，注意看信息通过时每个 Wait 模块的 Duration 。

Duration 值都是同时从 When Prototype Starts 接收的，并将相应的输出发送到 Option Switch。

Option Picker 根据每个选项输出调整 Comments Y 轴方向的的位置。

来源：UI中国

关键字：产品经理

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！