ProtoPie 教學 Day2：Reset 製作頁面的出場動畫
我們將透過觸發、反應的先後順序熟悉以 觸發 Start 與 反應 Reset 製作頁面的出場動畫。
如果你想要找特定章節，請點此。
是否在 dribbble 上、Muzli 上看過一些酷炫的動態效果，進入 app 後元件淡入或是翻轉出現，今天我們就來做進入畫面後元件出現的動畫，這裏我們暫時稱之出場動畫；以下是今日成品：
匯入圖層
第一步總是匯入設計稿，除了注意匯入的尺寸 3x ，更要注意的是 ProtoPie 匯入的特性；ProtoPie 會將 Sketch 設計稿中的群組結一併匯入，但會把元件轉變成圖像。
文字
文字元件被匯入後會是文字圖像，我們可以透過元件設定項的 Convert to Text 將圖像化的文字再次轉換成可編輯的文字。
遮罩／陰影
使用遮罩的群組匯入 ProtoPie 時會直接被轉換成無法編輯的圖像，有陰影的元件也會直接被轉換成無法編輯的圖像。
設定觸發 Start
今天要使用的觸發為 Start ，和一般觸發不同，Start 不須指定任何物件，因為它作用的對象是整個 Scene（所以我們可以直接點擊 Add Trigger 新增）。
Start 顧名思義會在 Scene 開始之初作用，設定項目也很簡單，只有幾項：
Start After Jump
設定後會在 Scene 開始後（若 Scene 是第一畫面）、從其他 Scene 跳轉過來後才觸發反應。觸發時間點都在跳轉、開始之後。
Start With Jump
設定後觸發會同 Scene 開始（若 Scene 是第一畫面）、從其他 Scene 跳轉過來時就觸發反應，觸發時間點是同時。
請注意 💡
雖然這兩者大概只有一瞬之間的差距，但在製作互動上卻有大大不同，今天我們使用 Start With Jump，這樣就能做到頁面開始時馬上就觸發我們想要的動畫。Restart Every Time
勾選後，每次跳轉至這個 Scene 都會重新觸發一次設定好的 Start，如果沒有勾選 Scene 的所有元件屬性將會停留在觸發反應後的屬性；大家可以看看下面的例子：
- 沒有勾選 Restart Every Time。
- 出場動畫完成後，PShape 物件、圓圈圈、按鈕與三角形都顯示出來。
- 點擊 Enter 後跳轉至下一個 Scene。
- 返回前一個時會發現 PShape、圓圈圈等物件依然顯示並未消失。
如果勾選 Restart Every Time，返回前一頁會發現 Start 會被重新觸發，所以我們會再次看到出場動畫。
今天教學我們先不勾選 Restart Every Time。
請注意 💡
點擊 LOGO 只是為了舉例呈現 Restart 的特性，請勿當作 UX 參考。排序與時間軸
ProtoPie 會由上而下執行觸發與反應的設定，執行觸發後會依照設定的時間點執行反應，大家可以 下載檔案 玩玩看。
觸發的排序
舉例來看更清楚，我們設定 Enter 按鈕有兩種觸發：
- 觸發後會 Jump 至紅色頁面，Jump 的延遲時間為 0。
- 觸發後會 Jump 至綠色頁面，Jump 的延遲時間為 0。
按這個順序，我們觀察一下跳轉的結果。
接下來我們把順序改成：
- 觸發後會 Jump 至綠色頁面，Jump 的延遲時間為 0。
- 觸發後會 Jump 至紅色頁面，Jump 的延遲時間為 0。
再看一次會跳轉至紅色還是綠色頁面。
由此我們可以發現，如果同一個物件被設定多種相似的觸發（見註1），會以最下方、排序較後面的觸發呈現，因此要注意排序才不會影響互動效果。
反應的排序與時間軸
在同一個觸發下可以設定多個反應，基本上 ProtoPie 會依序由上而下執行反應，但還要注意的是反應的時間軸，在介面上我們可以看到反應右邊都有時間軸，拖曳反應的動畫時間可以控制反應的時間點，我們也可以在設定項 Start Delay 控制反應的時間點。
接下來我們來看一下反應的時間排序會怎麼影響互動，在名為 Response 的頁面，我設定了一個 GO 按鈕，點擊後會觸發背景與文字顏色轉換，這裏只需要注意背景顏色的轉換。
首先，轉換成紅色與轉換成綠色的時間順序重疊，動畫長度皆為 1 秒。
現在試試看製造時間差，我們將轉成綠色的反應往後推遲 1 秒。
由此可見，ProtoPie 執行反應時也是由上往下執行，時間軸的控制會讓反應依序執行，熟悉時間軸的操作讓我們可以製作更多細節的互動。
註一：相似的觸發
有些觸發其實是相似且重疊的，例如：Touch Down/Touch Up 與 Touch 分類
只要用手指觸控的觸發都會和他們重疊，因此 Touch 分類下的都會受影響。Pull 與 Drag （待確認）
這兩者的行為也相似，有可能 Pull 會被視為 Drag 的一種，這裡可能要稍加注意。沒提到的觸發不代表沒有重疊的議題，只是因為我還沒發現。
使用 Reset 反應
想像動畫是一個時間軸，在動畫開始時物件的 Opacity 為 0，動畫結束時物件的 Opacity 為 100。
動畫開始前的畫面我們暫且稱為起始畫面，動畫結束時的畫面稱為完成畫面，ProtoPie 會將起始畫面與完成畫面之間串起補間動畫，看起來就會是平順的動態效果，我們只需要告訴 ProtoPie 如何運動完成補間動畫。
這時就有兩種作法：
一般作法
一般的作法是先修改物件本身的屬性成為 起始畫面，再使用 Start 觸發反應回到我們希望看到 完成畫面，思考上是順向的，例如我們希望物件由左至右移動，設定觸發後的動作就是 向右移動。
- 將物件 PShape 本身的屬性 Opacity 先設為 0 。
- 在 Start 觸發下設定反應 Opacity to 100，在預覽中我們可以看到在畫面開始之時，設定動畫秒數，物件 PShape 慢慢出現。
請注意 💡
如果使用這個方法，在中間的控制區域無法一目瞭然完成畫面，而是以起始畫面為主；所以如果起始畫面都是透明度低或是位移的物件，除此之外，我們也很難用起始畫面來想像、規劃物件其他互動。Reset 作法
Reset 這個反應會將作用的物件上「所有」因反應而改變的屬性重置為物件原本的屬性，重置時的補間動畫 Reset 會幫你完成。
Reset 作法先利用 Start 觸發反應製作 起始畫面，再使用觸發反應 Reset 重置物件上所有因反應而改變的屬性，回歸物件本身的屬性，製作動畫的完成畫面。
在思考上和一般作法不同，是 相反的，如果我們希望物件由左向右移動，就要先設定觸發讓物件到左邊預備，然後觸發 Reset 反應讓物件回復至原位置（右邊）。
讓我們先設置起始畫面：
- 新增觸發 Start，設定為 Start With Jump。
- 新增反應透明度為 0，對象為 PShape，動畫長度為 0，動畫延遲為 0。
如此一來在進入到這個畫面時 PShape 會以 0 秒的速度將透明度轉變為 0，我們在預覽視窗看見 PShape 已經消失。
接下來只要對 PShape 設定 Reset 反應，動畫時間先設定為 2 秒，就可以還原 PShape 到原本的屬性。我們可以利用先前討論的排序議題，將 Reset 排在透明度之後，如此一來觸發後的順序就會是：
- 反應 Opacity：PShape 以 0 秒的時間透明度變為 0。
- 反應 Reset：PShape 以 1 秒的速度透明度由 0 變為 100，出現在預覽畫面上。
出場動畫基本上就是透過 Start 觸發許多物件反應調整屬性，再使用許多物件的 Reset 反應還原物件原本的屬性，補間動畫受 Reset 反應控制，Reset 反應的 Duration 多久，補間動畫就是多久。
Reset 的作法和一般的動畫作法不大一樣，但熟悉之後非常好用！
請注意 💡
Reset 的作法較被推薦，因為它可以讓畫面停留在動畫的 完成畫面，如此一來不論出場動畫有多麽復雜，我們都可以針對畫面最終的樣子繼續規劃、設計物件的互動。也因 Reset 的效果，他會將物件上所有因反應而改變的屬性同時重置回一開始的屬性，所以不適合做過於複雜的動畫。
優化動畫
掌握 Reset 的方法後，為了讓動畫不是只有透明度的變化，我們可以透過位移、3D 旋轉，讓元件有浮出來的效果。透過時間軸上，動畫長度、動畫延遲等先後順序調整，這些細節的調整可以讓動畫看起來更活潑。
文字的位移與透明度
“Feel the texture of the paper” 字樣由下而上出現，設定 Move By（註二）：
Y 軸： 10
這樣這行文字就會沿著 Y 軸移動 10 單位。
設定透明度（Opacity）為 0，字樣將變為透明。設定 Reset 重置這些設定，動畫秒數 3 秒。
註二：Move By 與 Move To
Move By 是告訴 ProtoPie 要移動物件 X/ Y 軸多少單位。
Move To 則是要移動物件至某座標 (X, Y)，如果你很確定物件要移動到哪個地方，可以安心使用。ProtoPie 中的座標是由左上至右下遞增，也就是螢幕左上的座標為 (0, 0)，右下角的座標以 iPhoneX 螢幕為例，座標為 (375, 812)。
P 與 三角形的位移和透明度
為了讓 PShape 、與三角形有浮起的感覺，除了透明度的變化，還需要加上位移（Move） 的變化。
希望讓 PShape 物件向上浮起，位移（Move）反應設定 Move By：
X 軸： 10
Y 軸： 10
如此一來 PShape 會向下移動 10 單位，向右移動 10 單位，Reset 後會由右下往左上移動出現。
小叮嚀 💡
使用 Reset 的方式在思考上會是「反」過來跑動畫，例如我們希望物件向右跑，就要先設定物件往左，Reset 後就會由左邊向右跑。Enter 背景的 3D 旋轉（非 Reset）
看開頭的展示畫面可以察覺到， Enter 按鈕的出場動畫被分成兩部份，首先按鈕背景出現再來是 Enter 字樣出現。
Enter 字樣出現非常簡單，其實就是透明度的變化。而按鈕背景則使用到縮放與 3D 旋轉，希望效果像是由近（我們的方向）到遠（手機螢幕）擺放的感覺。
在設定之前要先設定按鈕背景的 Origin，Origin 是動畫作用的基準點，我們希望以按鈕背景的下緣作為旋轉點，因此 Origin 設定為中下。
3D 旋轉的設定（註三）：
- 旋轉方向朝近旋轉（我們這方向），旋轉至（Rotate To） -50 度的位置，動畫長度 0 。
- 再設定一個 3D 旋轉，旋轉方向朝遠的方向旋轉（螢幕那個方向），旋轉至 0 度位置，動畫長度 3 秒。
此時我們可以看到這個效果，
有了蓋上去的效果，但一開始不希望背景就出現，而是邊往上蓋，同時慢慢淡入，這時候就要加入透明度（Opacity）與 Reset 的反應。
這裏要注意的是，Reset、透明度與 3D 旋轉的順序，如果 3D 旋轉的順序在 Reset 之前，則會受到 Reset 的影響哦！
小叮嚀 💡
Reset 的先後順序會影響呈現效果，所以還是要思考一下自己想要得到什麼樣的效果再排序，例如這次 3D 旋轉不希望受到 Reset 影響，所以讓 Reset 接在透明度之後，3D 旋轉之前。
註三：為什麼 3D 旋轉不使用 Reset 做動畫？
在做 3D 旋轉動畫時的確嘗試使用 Reset 製作動畫，但旋轉方向似乎與預期不同，不管 Reset 前設定的方向為何，Reset 時旋轉方向都是相同的，所以 Reset 在重置 3D 旋轉時並不會逆向的還原物件的屬性。
各日教學
如果你在找特定的功能介紹，可以看看：
