下載教程文件**
·····密碼: 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 剪切蒙版》 里會詳細講解怎么用剪切蒙版。
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 軸方向上下移動。
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 接口。
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.
因為原型是已經開始的狀態,所以我們不會看啥效果。點擊查看器工具欄上的重新啟動原型按鈕。注意在編輯器中發生的脈沖。
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 輸入口。
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.
重啟原型,注意看前兩個模塊??梢钥吹叫盘柫⒓窗l送到 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
秒。
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 上的其余輸入口。
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 欄。