8. 延时动画 Timed Animations - Origa
下载教程文件**
·····密码: ahgt**
选择对应名称的文件夹下载，内包含一个（开始）和一个（已完成）文件；（开始）文件用来和教程同步操作，（已完成）是最终结果。
Create time-based, automatic animations. 创建定时动画。
Sometimes you would like an animation to occur simply on its own — as soon as a prototype starts, or with only a timer triggering it.Sometimes you want multiple things to happen over time, all purely time-based, without any tap triggers or the like.
有时需要一个动画在原型开始时自动启动，或通过定时器自动启动。有时需要随着时间的推移激活多重事件。这些都是纯粹基于时间的，没有任何点击之类的交互触发。
We're going to rebuild the Comments experience of Facebook Live to explore how to do this. Make sure you download the tutorial files if you want to follow along with the same material.
我们将重新创建 Facebook Live 的评论，学习怎么实现。下好载教程文件。
Setting up 配置
If you start with the tutorial files, you should see that we have already connected our Comments Position Y to an Option Switch and Option Picker. (If you haven't checked out the lessons on Multiple States you might not know what this means. That's fine for this tutorial).
打开标记为（开始）的文件。编辑器中 Comments Y 轴 已经连接了 Option Switch 和 Option Picker。（如果还没有学习《Multiple States 切换多个状态》 可能会不知道是什么意思，可以先学习那篇。）
板栗：教程文件里用到了剪切蒙版，在《Masking Layers 剪切蒙版》 里会详细讲解怎么用剪切蒙版。
Your starting tutorial files should look similar to this.
一打开文件模块的连接就是这样的了。
Click through each of these inputs to cause a pulse, making the Position Y of Comments move up or down. Clicking on Set To 1 will bring up our first position, Set To 2 our second, and so on.
点击 Option Switch 模块每个输入口后的小点，可以看到 Comments 图层沿 Y 轴方向上下移动。
Click on each Option Picker input to see Comments Position Y change.
点击每个输入口。
When prototype starts 原型启动时
That first position (Set To 0) is our starting position. How can we automatically have our prototype go to next position (Set To 1) after a set time?
第一个位置（Set To 0）是我们的起始位置。
那怎么在一定时间后自动将原型转到下一个位置（Set To 1）呢？
Origami has a patch for this purpose, called When Prototype Starts.
Origami 有一个叫 原型启动时 When Prototype Starts 的模块可以控制原型启动时激活交互。
Insert one to our Patch Editor by double-clicking on the Patch Editor Cmd Return, typing to find When Prototype Starts, then Return.
添加一个 When Prototype Starts 模块到编辑器。
Then connect this to the Set to 1 input on the Option Switch patch.
连接到 Option Switch 模块的 Set to 1 接口。
Be sure to connect this to Set to 1, since Set to 0 is our starting position.
检查确定是连接到 Set To 1 的。我们要实现从 Set To 0 的位置自动移动到 Set To 1，0 是起始位置，连接到这里不会有任何效果。
Our prototype has already started, so we won't see the effect of this until we click the Restart Prototype button on the Viewer toolbar. Keep an eye on pulses occurring in the Patch Editor as you do this.
因为原型是已经开始的状态，所以我们不会看啥效果。点击查看器工具栏上的重新启动原型按钮。注意在编辑器中发生的脉冲。
Click the Restart Prototype button on the Viewer toolbar.
重启原型。
Wait 等待
We are instantly going to Option 1, but what we actually want is for that option to only kick-in after the prototype starts and holds off little bit, to give a bit of breathing room. We want the prototype to Wait a second.
现在是立即进入 Option 1 的，但想要的是在原型开始之后才能启动，并且暂停一会儿，给一点喘息的空间。所以需要原型等待一秒钟。
Insert a Wait patch between the When Prototype Starts and the Option Switch. Double-click on the Patch Editor Cmd Return, type to find Wait, then Return.
添加一个 Wait 模块。
Connect the When Prototype Starts output to the Start input in the Wait patch, and the output of Wait to that Set to 1 input.
将 When Prototype Starts 输出口连接到 Wait 模块，将 Wait 模块连接到 Option Switch 的 Set To 1 输入口。
Make sure the Wait patch connects to the Set To 1 input. 确定连接的是 Set To 1 。
Restart our prototype now, and keep an eye on the first two patches. You should see that the signal is immediately sent, and then after one second, the signal is carried on to the Option Switch.
重启原型，注意看前两个模块。可以看到信号立即发送到 Wait 模块，等了一秒钟后才被发送到Option Switch。
There are a few ways to automatically advance to the next Set To inputs, but for the sake of simplicity, we are going to add more Wait patches as our solution. These will then be connected to corresponding inputs in the Option Switch.
有几种方法可以实现自动进入下一个Set To 输入口，但这里会讲最简单的一种，添加更多 Wait 模块将它们连接到 Option Switch 对应的接入口上。
Add more Wait patches by double-clicking on the Patch Editor ⌘⏎, typing to find Wait, and then Return ⏎.
添加 Wait 模块到编辑器。
Like the first Wait patch, have the output of the When Prototype Starts go into its Start input. Have the output of this Wait patch go to the next Option Switch input, which is Set to 2.
跟第一个 Wait 模块一样，将 When Prototype Starts 的输出口连接到 Wait 模块的 Start 输入口，再将输出口连接到 Option Switch 的 Set To 2 输入口。
Give the second Wait patch a duration of 3 seconds. That means that the 3 seconds is counting from when the prototype starts, not 3 seconds from when the first Wait patch is triggered.
让第二个 Wait 模块持续3秒。3 秒是从原型开始计数，而不是从第一个等待补丁结束后的3 秒。
The first Wait patch triggers instantly When Prototype Starts. `3` seconds later, the next one triggers.
第一个 Wait 模块在原型启动时立即触发。
3秒钟后，触发下一个。
Multiple delays 多重延误
For the sake of simplicity, keep all timing connected to When Prototype Starts.
Add enough Wait patches to cover each Option Switch input (5 in total). You can add new patches by double-clicking on the Patch Editor, or by Option-clicking ⌥ and dragging an existing one. That will create a new Wait patch, with the same input connection.
再添加 3 个 Wait 模块分别连接到 When Prototype Starts 和 Option Switch 之间。
Do three more of these so we have 5 Wait patches in total. Change the durations of each so they all trigger at a different time. The third Wait patch for example could have a Duration input of 6 seconds, second-last Wait patch 8 seconds, and the last 11 seconds.
分别更改 Wait 模块的持续时间，让它们在不同的时间触发。例如：第三个Wait 模块的 Duration 输入6 ，第四个 8，最后一个 11。
板栗：时间差多少自己随意啦，只要后面的比前面的长就行。
Lastly, connect each Wait patch output to the remaining inputs on the Option Switch, in sequential order.
最后，按顺序将每个Wait 模块的输出口连接到Option Switch 上的其余输入口。
The Wait patches should be ordered in shortest to longest Duration, and connected in this order to the Option Switch inputs.
Wait 模块持续时间从短到长排列，并按此顺序连接到 Option Switch 输入口。
Like earlier, click the Restart Prototype button and keep an eye on the Wait patches as each Duration passes.
重启原型，注意看信息通过时每个 Wait 模块的 Duration 。
Each of these Duration values are measured from When Prototype Starts, and send their respective outputs to the Option Switch accordingly. The Option Picker takes each option and outputs a corresponding position for Comments Y.
Duration 值都是同时从 When Prototype Starts 接收的，并将相应的输出发送到 Option Switch。
Option Picker 根据每个选项输出调整 Comments Y 轴方向的的位置。
相关课程
1. 入门 Getting Started
介绍怎么使用 Origami Studio。
相关案例
2. Facebook Live Comments
自动在 Facebook Live 视频中添加评论。
5. Facebook New Stories
当新闻滚动一定距离时触发提示出现。
20. Moments Onboarding
Moments APP 的启动流。
相关模块
Pop Animation Option Switch When Prototype Starts Wait
NEXT UP
9. 多个状态切换 Multiple States
在两个以上的状态之间切换，如 Tab 栏。
