之前一篇介紹Principle的文章中，有放Principle官網的三張示例。 </br>
這張按鈕旋轉彈出的效果，很容易讓人聯想到Path。
這種其實就是Path標志性的添加按鈕動效，通過點擊底部導航中間的添加按鈕后，其他的按鈕呈扇形旋轉彈出。
接下來就來教大家實現這種效果。
在做demo前，心里都要對自己想要實現效果的變化過程有數。我們先分析Path這種動效的整個動畫路徑。
為了方便，我先對所有元素進行一個統一的命名。
第一次點擊，五個icon出現：
1.add button逆時針旋轉45°，同時本身有一個點擊效果；
2.music、place、camera、thought、moon從add button底下呈扇形彈出位移至對應位置，同時每個icon本身有一個旋轉效果和漸現效果；
3.五個icon在位移快結束時有一個彈性的抖動效果；
4.屏幕上出現黑色cover
第二次點擊，五個icon消失：
1.add button順時針旋轉45°，同時本身有一個點擊效果；
2.music、place、camera、thought、moon位移回原位置，同時每個icon本身有一個旋轉效果和漸隱效果；
3.五個icon在位移開始時有一個彈性的抖動效果。
4.黑色cover消失
步驟一：在principle中擺放元素位置
首先設定畫板尺寸，為了控制后期上傳gif的大小，這里畫板設置成540x320，同時添加一個與畫板等大的圖層bg，填充#F5F0EB。
這次的效果用到的是Principle里面的Animate，由于只有兩種狀態，因此只需設定兩個畫板，通過點擊跳轉實現交互。
將元素擺放至如圖位置，注意由于五個icon都是從add button底部出現，因此add button要放在所有圖層最上方，且收起狀態下要居中對齊。注意兩個圖層中相同元素的名稱一致。
***Tips：可以先在Artboard 1中將五個icon彈出后的位置擺好，然后按cammand+d復制畫板，這時候再回到Artboard 1中框選五個icon和add button，依次：底部對齊，水平居中對齊、垂直居中對齊，對齊命令在界面左上角。 ***
對齊命令線框仔建議各位可以去設置對應的快捷鍵，這樣工作起來非常高效，快捷鍵設置可以在“系統偏好設置-鍵盤-快捷鍵-應用快捷鍵”，涉及到菜單跳轉的需要用“->”連接。按自己的使用習慣去設置，像Sketch、Keynote、OmniGraffle等都可以設置，非常方便。
步驟二：實現第一次點擊中add button的變化效果
add button逆時針旋轉了45°，因此在Artboard 2中我們要給add button添加-45°角度變化（Angle）。
點擊效果可以通過制作另外一張切圖實現，這里我們直接添加一個與add button等大的矩形圖層button cover，同時將圓角（Radius）設置成最大并設置12%的不透明度（Opacity）的以實現加深效果，并將其編組button cover g。
Tip：由于Animate里面每個元素的動畫都是單向的，即同一個圖層是不可能通過一次交互跳轉讓它多次實現同一種屬性變化，比如不能出現后又消失、不能先順時針旋轉再逆時針旋轉。那么為了實現同一種屬性的多次變化，這里有個技巧，就是給當前圖層編組。編組后，就可以實現部分屬性的多次變化，目前線框仔發現的可以實現的屬性有：X、Y、Width、Heigh、Angle、Opacity、Radius。
那么要實現button cover先出現后消失的效果，可以通過控制圖層和組的不透明度來實現。
在Artboard 1上，將button cover的不透明度設為0%，button cover g的不透明度為100%。在Artboard 2上，將button cover的不透明度設為12%，button cover g的不透明度為0%。原理即是，先讓button cover出現，再讓它的編組消失。
接下來對add button添加點擊交互動作，選中Artboard 1中的add button，點擊旁邊的小閃電圖標，選擇Tap并按住鼠標不放鏈到Artboard 2，我們看下實現效果：
可以看到旋轉效果和五個icon彈出的效果有了（下一步具體說怎樣調節五個icon的效果），但是button cover出現消失的效果并沒有出現。
Tip：這是因為Principle里面所有屬性變化默認都是同時開始同時結束的。
因為button cover是0%-12%，button cover g是100%-0%，二者的不透明度變化同時進行，那最終的效果就是以上級的那個層級也就是編組button cover g決定，所以是看不出變化的。這時候我們就需要對這個Tap交互動作的Animate進行編輯了。
點擊上面的那個長線箭頭，那個就是Tap的Animate，點擊后，下面就出現Tap這個交互動作的Animate編輯面板。
***Tip：Animate面板里面可以通過command+鼠標滾輪縮放。默認的屬性變化持續時間都為0.3s。 ***
我們先將所有時間軸持續時間延長至0.5s，鼠標框選節點拖動即可。然后讓button cover的時間軸在前，button cover g的時間軸在后，并將持續時間設為0.15s以模擬真實的點擊效果。效果如下：
這時候，點擊add button后，add button就有一個按鈕顏色變深的點擊效果，同時延長持續時間后整個變化過程會顯得平緩很多。
步驟三：實現第一次點擊五個icon的變化效果
可以看到第一次點擊時，五個icon是逆時針旋轉出來的，所以在Artboard 1上我們要給它們添加順時針旋轉540°的角度旋轉。添加后可以看到Animate面板中每個icon都自動添加了持續時間為0.3s的Angle屬性變化時間軸，我們將他們都拖成0.5s的。
同時仔細觀察，它們旋轉的速率是先慢后快的，這里我們就要調節它們的時間軸變化曲線。
***Tip：點擊時間軸中間就可以換出曲線面板，Principle里面默認的那個已經是比較自然的，當然可以根據具體情況去調節。 選中多個時間軸可以同時對它們編輯。 ***
我們對五個icon的時間軸進行編輯，讓變化剛開始時的變化更慢一些。這樣就有下面的效果：
但是還差抖動效果沒有實現，這里同樣需要用到上面說的編組法。因為五個icon已經發生了位移，抖動的效果實際上是讓其往回再位移一小段。
步驟四：實現抖動效果
對五個icon進行編組，并統一命名，可以發現Animiate面板上發生了變化。以music舉例，原來music的X和Y變化時間軸消失了，只保留了旋轉的屬性變化時間軸，同時music的編組music g出現了X和Y變化時間軸。這是因為music編組后，其實際上沒有發生位移，其X和Y的屬性變化被其編組music g繼承了。
***Tips：Principle內所有的編組范圍都可調節，但編組的坐標參考還是以畫板為主，而編組內的所有元素的坐標參考則都是以編組自身為主。 ***
所以當music g和music大小相同時，實際上music相對于music g并沒有產生位移，因此我們可以通過讓music相對于其編組music g產生位移，從而實現抖動的效果。
以moon為例，讓其抖動其實就是在位移終點的時候再往回位移一小段。這里先將moon的編組moon g在X軸上位移6，Y軸位移-4，再將moon自己在X軸上位移-6，Y軸位移4。
再去到Animate面板，將moon的X、Y屬性變化時間軸往后拖，讓其后進行，將持續時間改為0.15s，曲線改為Spring。同時將moon g的X、Y屬性變化時間軸持續時間改為0.35s，曲線改為Base Both。看下效果：
可以看到，moon和其他四個的變化明顯不同，整個動畫的節奏也更加連貫。
*將其他四個icon同樣進行步驟四，這里我設定的位移參考為：
music g_X-6/Y-4 music_X+6/Y+4
place g_X-4/Y-6 place_X+4/Y+6
camera g_Y-8 camera_Y+8
thought g_X+4/Y-6 thought_X-4/Y+6
moon g_X+6/Y-4 moon_X-6/Y+4 *
效果：
步驟五：添加cover及調整icon先后順序
最后我們在bg層上添加一個圖層，大小等大，命名為cover，填充#000000。
在Artboard 1上不透明度設置為0%，在Artboard 2上不透明度設置為42%，調整其在Animate上的持續時間為0.5s。
同時可以通過讓五個icon各自屬性變化開始的時間有一個時間差，來實現先后變化的效果，這里設置的時間差參考為0.05s。
效果：
步驟六：實現收起效果
最后一步，我們給Artboard 2上面add button添加Tap交互動作鏈回到Artboard 1。
按之前的步驟通過調整Animate上面的時間軸順序來實現抖動及先后效果，最終實現收起效果，這里就不詳細細說了，算是給你做一個練習。
需要注意：收起的效果時間軸順序和彈出的順序不一樣哦。
好了，我們看最終的效果。
切圖及Principle源文件
password: rfxp
下一期教程，我會教大家實現探探那種卡片左劃不喜歡右滑喜歡的效果。 下期見~
非常感謝您的閱讀，您的支持是我最大的動力！
