下載教程文件**
·····密碼: ahgt**
選擇對應(yīng)名稱的文件夾下載，內(nèi)包含一個(gè)（開始）和一個(gè)（已完成）文件；（開始）文件用來和教程同步操作，（已完成）是最終結(jié)果。
Create time-based, automatic animations. 創(chuàng)建定時(shí)動(dòng)畫。
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.
有時(shí)需要一個(gè)動(dòng)畫在原型開始時(shí)自動(dòng)啟動(dòng)，或通過定時(shí)器自動(dòng)啟動(dòng)。有時(shí)需要隨著時(shí)間的推移激活多重事件。這些都是純粹基于時(shí)間的，沒有任何點(diǎn)擊之類的交互觸發(fā)。
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.
我們將重新創(chuàng)建 Facebook Live 的評論，學(xué)習(xí)怎么實(shí)現(xiàn)。下好載教程文件。
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).
打開標(biāo)記為（開始）的文件。編輯器中 Comments Y 軸 已經(jīng)連接了 Option Switch 和 Option Picker。（如果還沒有學(xué)習(xí)《Multiple States 切換多個(gè)狀態(tài)》 可能會不知道是什么意思，可以先學(xué)習(xí)那篇。）
板栗：教程文件里用到了剪切蒙版，在《Masking Layers 剪切蒙版》 里會詳細(xì)講解怎么用剪切蒙版。
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.
點(diǎn)擊 Option Switch 模塊每個(gè)輸入口后的小點(diǎn)，可以看到 Comments 圖層沿 Y 軸方向上下移動(dòng)。
When prototype starts 原型啟動(dòng)時(shí)
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?
第一個(gè)位置（Set To 0）是我們的起始位置。
那怎么在一定時(shí)間后自動(dòng)將原型轉(zhuǎn)到下一個(gè)位置（Set To 1）呢？
Origami has a patch for this purpose, called When Prototype Starts.
Origami 有一個(gè)叫 原型啟動(dòng)時(shí) When Prototype Starts 的模塊可以控制原型啟動(dòng)時(shí)激活交互。
Insert one to our Patch Editor by double-clicking on the Patch Editor Cmd Return, typing to find When Prototype Starts, then Return.
添加一個(gè) When Prototype Starts 模塊到編輯器。
Then connect this to the Set to 1 input on the Option Switch patch.
連接到 Option Switch 模塊的 Set to 1 接口。
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.
因?yàn)樵褪且呀?jīng)開始的狀態(tài)，所以我們不會看啥效果。點(diǎn)擊查看器工具欄上的重新啟動(dòng)原型按鈕。注意在編輯器中發(fā)生的脈沖。
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.
現(xiàn)在是立即進(jìn)入 Option 1 的，但想要的是在原型開始之后才能啟動(dòng)，并且暫停一會兒，給一點(diǎn)喘息的空間。所以需要原型等待一秒鐘。
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.
添加一個(gè) 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 輸入口。
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.
重啟原型，注意看前兩個(gè)模塊?？梢钥吹叫盘柫⒓窗l(fā)送到 Wait 模塊，等了一秒鐘后才被發(fā)送到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.
有幾種方法可以實(shí)現(xiàn)自動(dòng)進(jìn)入下一個(gè)Set To 輸入口，但這里會講最簡單的一種，添加更多 Wait 模塊將它們連接到 Option Switch 對應(yīng)的接入口上。
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.
跟第一個(gè) 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.
讓第二個(gè) Wait 模塊持續(xù)3秒。3 秒是從原型開始計(jì)數(shù)，而不是從第一個(gè)等待補(bǔ)丁結(jié)束后的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 個(gè) 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 模塊的持續(xù)時(shí)間，讓它們在不同的時(shí)間觸發(fā)。例如：第三個(gè)Wait 模塊的 Duration 輸入6 ，第四個(gè) 8，最后一個(gè) 11。
板栗：時(shí)間差多少自己隨意啦，只要后面的比前面的長就行。
Lastly, connect each Wait patch output to the remaining inputs on the Option Switch, in sequential order.
最后，按順序?qū)⒚總€(gè)Wait 模塊的輸出口連接到Option Switch 上的其余輸入口。
Like earlier, click the Restart Prototype button and keep an eye on the Wait patches as each Duration passes.
重啟原型，注意看信息通過時(shí)每個(gè) 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 值都是同時(shí)從 When Prototype Starts 接收的，并將相應(yīng)的輸出發(fā)送到 Option Switch。
Option Picker 根據(jù)每個(gè)選項(xiàng)輸出調(diào)整 Comments Y 軸方向的的位置。
相關(guān)課程
1. 入門 Getting Started
介紹怎么使用 Origami Studio。
相關(guān)案例
2. Facebook Live Comments
自動(dòng)在 Facebook Live 視頻中添加評論。
5. Facebook New Stories
當(dāng)新聞滾動(dòng)一定距離時(shí)觸發(fā)提示出現(xiàn)。
20. Moments Onboarding
Moments APP 的啟動(dòng)流。
相關(guān)模塊
Pop Animation Option Switch When Prototype Starts Wait
NEXT UP
9. 多個(gè)狀態(tài)切換 Multiple States
在兩個(gè)以上的狀態(tài)之間切換，如 Tab 欄。
