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