好久不見～時隔很久我又來和大家探討Principle了。因為之前也寫過一個Principle關(guān)于聯(lián)動的分享，里面涉及到了一些路徑(曲線)動畫( https://www.zcool.com.cn/article/ZNDUyMTQ0.html ) 但當(dāng)時寫的太復(fù)雜難理解。就在年初發(fā)現(xiàn)了一個很好理解的方法來實現(xiàn)這個效果，并能延伸一些其他關(guān)于路徑運動的效果，但一直因為..懶..沒有踏下心來寫這個東西，現(xiàn)在終于把它寫完了，分享出來和大家一起探討下所謂的Principle路徑(曲線)動畫的玩法～
大家肯定都被這個“路徑動畫”四個字騙進來了吧。其實Principle是不支持路徑動畫的，但是可以通過建立組的形式來變相調(diào)整素材的旋轉(zhuǎn)中心點，從而在發(fā)生位置變化后達(dá)到所謂的“路徑動畫”效果。
先來看看用這種辦法能做出些什么效果～
【文章大部分為Gif 如加載慢 請見諒】
這些都是用Principle做出來的動畫。第一排前兩個動態(tài)效果是Rebound @GalShir 大神的動畫，第三個是模仿iWatch動畫效果；第二排中間的是Rebound @Domaso 大神的作品，兩側(cè)的是為了凸顯‘路徑’做著玩的。
（視頻講解 詳細(xì)細(xì)節(jié)觀看文字部分）
準(zhǔn)備工作
在逐一講解案例前我們要先了解 角度旋轉(zhuǎn) 和 組 的基本功能。
角度旋轉(zhuǎn)：
設(shè)置角度的位置在軟件左側(cè)的工作區(qū)里，調(diào)整角度即可達(dá)到旋轉(zhuǎn)效果。Principle只能遵循中心點旋轉(zhuǎn)，也就是說當(dāng)你從Sketch導(dǎo)入過來的任意圖片，Principle也只把它當(dāng)作矩形按中心點旋轉(zhuǎn)。
（ 圖1 角度旋轉(zhuǎn)功能演示 ）
組：
成組后會建立為文件夾，快捷鍵與Sketch相同 ?+G 。直接拖拽圖層到另一個圖層里也會成組（父子級關(guān)系），但與Sketch不同的是：Principle里的文件夾可以賦予顏色。賦予顏色解組后會變成一個獨立的圖形，沒有顏色時圖層列表里圖標(biāo)為文件夾樣式；也可選中文件夾后通過勾選 「 Clip Sublayers 」剪輯子圖層選項來達(dá)到蒙版效果。
（有些人會稱文件夾是一個“容器層”，叫什么不重要，自己好理解就行~）
（ 圖2 組[文件夾]功能演示 ）
下面進入正題
· 案例一
首先我們導(dǎo)入素材，案例的目的是：讓尾巴沿拋物線路徑擺動起來，
所以直接選擇“尾巴”這層。尾巴是上下擺動的，我們先讓素材一端的頂點沿圓形旋轉(zhuǎn)起來。
（ 圖3 頂點沿圓形旋轉(zhuǎn)效果 ）
第一步，選擇素材圖層建立組，調(diào)整文件夾大小，讓文件夾成為一個正方形（這樣變相調(diào)整了旋轉(zhuǎn)中心點）。建立完組后記得及時命名方便自己理解記憶，這里建議命名為“旋轉(zhuǎn)”因為要通過組的中心點位置來旋轉(zhuǎn)素材。這樣就得到剛剛想要的效果，素材一端的頂點沿圓形旋轉(zhuǎn)起來。
（ 圖4 調(diào)整文件夾大小旋轉(zhuǎn)后效果 ）
第二步，選中剛剛建立的組，點擊 Create Component 組件按鈕，建立成一個組件。
建立組件的好處：尾巴擺動，需要兩個畫板來回跳轉(zhuǎn)來實現(xiàn)，建立組件后可以在組件里做兩個畫板跳轉(zhuǎn)，不影響實例里的畫板關(guān)系。
（ 解除組件位置在[Arrange排列 - Detach Component分離組件] ）
（ 圖5 建立組件 ）
第三步，在剛剛建立的組件中選中“旋轉(zhuǎn)”文件夾，再次創(chuàng)建一個組，這里命名為“遮罩”（是用來裁掉素材多余部分），然后調(diào)整這個組文件夾的大小，使得「文件夾」區(qū)域只保留尾巴圖層左側(cè)部分，然后勾選“裁剪子圖層”達(dá)到一個遮罩效果。這時我們可以在尾巴后面補一條色塊，用來模擬在平地上的尾巴，這里可命名“尾巴2”。
（ 圖6 調(diào)整文件夾大小剪輯子圖層 ）
接著我們選中畫板（或任意圖層）點擊右側(cè)的閃電圖標(biāo)「事件觸發(fā)器」，在展開的事件里表里我們找到Auto自動事件，點擊并按住事件前的空心圓，拖拽出箭頭指針，指向當(dāng)前的畫板，松手后會在畫板右側(cè)復(fù)制一份畫板，再給復(fù)制出的畫板同樣添加Auto自動事件，指向回第一個畫板，這樣兩個畫板就可以無限來回自動跳轉(zhuǎn)了。
我們選中第二個畫板里“旋轉(zhuǎn)”文件夾，調(diào)整角度為-90度，只留下圓角頂端。然后我們再預(yù)覽里看下效果，OK，效果很鬼畜。原因是尾巴擺動升起和落下時，頂點坐標(biāo)會沿X軸發(fā)生位置變化從而實現(xiàn)拋物線擺動。只需調(diào)整下 畫板一 里“尾巴”與“尾巴2”圖層的位置，就可達(dá)到想要的拋物線路徑運動了，接著可以根據(jù)自己喜好靈活調(diào)整 Animate 動畫時長即可。
（圖7 添加自動調(diào)整+調(diào)整“旋轉(zhuǎn)”文件夾角度）
（圖8 預(yù)覽效果）
最后，返回實例微調(diào)下組件位置（因為剛剛把組件里的 畫板一 位置移動了），就得到一個無限擺動的尾巴了。接著做臉部聯(lián)動跟隨也好、頭部旋轉(zhuǎn)也好就可以自由發(fā)揮了。
（圖9 返回實例調(diào)整尾巴位置）
總結(jié)：
1.需明確旋轉(zhuǎn)軸心點位置；
2.給素材建立組「文件夾」調(diào)整組大小變相調(diào)節(jié)素材軸心點；
3.旋轉(zhuǎn)組，多余部分可二次嵌套組進行遮罩從而達(dá)到效果；
4.‘旋轉(zhuǎn)’文件夾與‘遮罩’文件夾關(guān)系不可嵌套反了 [ 遮罩 — 旋轉(zhuǎn) — 尾巴素材 ]。
· 案例二
這個案例是通過快速旋轉(zhuǎn)擺動的視覺差，來實現(xiàn)尾巴弧線路徑運動。
同樣導(dǎo)入素材，直接選擇尾巴圖層。
（圖10 明確旋轉(zhuǎn)中心）
第一步，明確旋轉(zhuǎn)的中心，這里尾巴是左右擺動的效果，中心點應(yīng)位于素材底部中間。明確旋轉(zhuǎn)中心位置后給“尾巴”圖層建立一個組，調(diào)整「文件夾」的大小，使得旋轉(zhuǎn)中心點在正確位置。
（圖11 成組建立文件夾+調(diào)整文件夾大?。?strong style="margin: 0px; padding: 0px;">
第二步，選中“身子”、“尾巴影子”以及成組的“尾巴”文件夾，將它們建立成一個組件，在組件內(nèi)添加自動跳轉(zhuǎn)事件得到畫板2。
（圖12 建立組件+自動跳轉(zhuǎn)畫板）
第三步，旋轉(zhuǎn)“尾巴”文件夾到合適位置；給畫板2添加自動跳轉(zhuǎn)事件得到畫板3，調(diào)整 畫板3 “尾巴”素材，復(fù)位文件夾角度，調(diào)整素材方向，修改尾巴文件夾命名，修改 尾巴、尾巴影子 素材的命名（目的是與畫板2命名不一致，不自動創(chuàng)建補間動畫）。
（圖13 調(diào)整尾巴角度+添加跳轉(zhuǎn)+調(diào)整素材方向及名稱）
第四步，給畫板3添加自動跳轉(zhuǎn)事件得到畫板4。旋轉(zhuǎn) 畫板4 內(nèi)“尾巴”文件夾到合適位置，之后給 畫板4 添加自動跳轉(zhuǎn)事件，跳轉(zhuǎn)回 畫板1 。
（圖14 添加跳轉(zhuǎn)得到畫板4+跳轉(zhuǎn)尾巴角度+跳轉(zhuǎn)回畫板1）
第五步，調(diào)整畫板2、畫板4里“尾巴影子”的透明度到0；調(diào)整組件內(nèi)各畫板“身子”圖層位置，讓身子與尾巴成相反方向運動，最后整體調(diào)整跳轉(zhuǎn)動畫時長。
（圖15 調(diào)整尾巴影子透明度+身子位置）
（圖16 調(diào)整跳轉(zhuǎn)動畫時長）
這樣一個身體、尾巴左右擺動的效果就出來了。頭部的動畫其實也是兩個畫板自動跳，調(diào)整頭、耳朵等明顯大小與位置即可。
總結(jié)：
Principle素材命名一致，會自動創(chuàng)建補間動畫，如需要快速跳轉(zhuǎn)，需要更改命名來達(dá)到快速切換效果（當(dāng)然也可以調(diào)整動畫曲線為No Animation得到一樣的效果）。
· 旋轉(zhuǎn)的實戰(zhàn)應(yīng)用
在UI設(shè)計中經(jīng)常會出現(xiàn)圓形加載、進度等動畫，通過前兩個例子經(jīng)驗總結(jié)，運用旋轉(zhuǎn)、剪輯子圖層就可以輕松實現(xiàn)。
我們導(dǎo)入素材，這里拿最外圈紅色圈來做演示。講解下素材圖層：其中“紅1”“紅2”圖層是用來做線段兩端圓頭頂點圖層，“紅”圖層為進度條圖層。
（圖17 素材分解）
前期準(zhǔn)備工作，我們需要讓“紅”圖層裁成一個半弧。給“紅”創(chuàng)建一個組調(diào)整文件夾大小，用剪輯子圖層的方法得到一個半弧?？梢越o這個文件夾命名“半弧形”。
（圖18 剪輯子圖層得到半弧形）
第一步，從這步開始與上面第一個例子一樣，為了調(diào)整旋轉(zhuǎn)中心點，要在剛剛建好的文件夾基礎(chǔ)上再次建立組，這里調(diào)整文件夾大小使得成為一個正方形，命名“旋轉(zhuǎn)”。
（圖19 建立組+調(diào)整文件夾大?。?strong style="margin: 0px; padding: 0px;">
第二步，在方形文件夾基礎(chǔ)上再建立一個組，命名為“遮罩”。調(diào)整文件夾大小后勾選剪輯子圖層，使得半弧形也被隱藏掉。到這步可以嘗試下，調(diào)整“旋轉(zhuǎn)”文件夾的角度，會發(fā)現(xiàn)已經(jīng)達(dá)到沿圓形路徑增長進度的效果，但旋轉(zhuǎn)角度只能為180度，超出部分會再次被遮擋。
（圖20 再次建立遮罩組調(diào)整文件夾大小+旋轉(zhuǎn)預(yù)覽效果）
第三步，給任意一個紅點建立一個組，命名為“頂點”，調(diào)整文件夾大小與之前的正方形文件夾大小一致，這一步是為了讓增長出來的頂點變成圓頭頂點。
（圖21 給紅點建立組+調(diào)整文件夾大?。?/p>
操作到這里基本旋轉(zhuǎn)180度以內(nèi)都可以輕松實現(xiàn)了，添加自動跳轉(zhuǎn)復(fù)制出一個新的畫板來，調(diào)整新畫板里的“旋轉(zhuǎn)”、“頂點”文件夾的角度即可。
如何超過180度呢？敲黑板了看這里，只需有兩組素材，各自都旋轉(zhuǎn)180度就可以實現(xiàn)了。
只需在“遮罩”文件夾基礎(chǔ)上再建立一個組，調(diào)整文件夾大小使得再次成為一個正方形，命名為“180”。
組的嵌套與命名是這樣的 [ 180 — 遮罩 — 旋轉(zhuǎn) — 半弧形 — 紅圈素材 ]
（圖23 新建組+調(diào)整大小）
（圖24 文件夾嵌套關(guān)系+剪輯子圖層位置）
復(fù)制一份“180”文件夾，得到兩個后，添加自動跳轉(zhuǎn)復(fù)制出一個新畫板來；
到新畫板里找到 兩個 “旋轉(zhuǎn)”文件夾并調(diào)整角度為180度；
接著旋轉(zhuǎn)新畫板里其中一個“180”文件夾到任意角度；
旋轉(zhuǎn)“頂點”文件夾的角度，使得與半弧頂點位置重合；
最后調(diào)整動畫時長即可。
（圖25 得到兩個180度文件夾 后續(xù)操作）
（兩個‘180’文件夾內(nèi)‘旋轉(zhuǎn)’文件夾各自旋轉(zhuǎn)180度后，其中一個‘180’文件夾繼續(xù)旋轉(zhuǎn)）
總結(jié)
1.大于180度需要兩組旋轉(zhuǎn)、小于180度一組旋轉(zhuǎn)就可以。
2.捋清思路，文件夾嵌套、遮罩關(guān)系、旋轉(zhuǎn)圖層要明確。
· 拓展思維
通過上述案例，可以用principle做出很多路徑動畫效果，但寫這個文章的目的只是單純開拓大家對Principle的認(rèn)知，它可以做，但不一定是最合適但，可能AE分分鐘就能做出更順滑的效果，工作中還是選擇自己更順手的軟件就行。
最后的附加題
附送一個非角度旋轉(zhuǎn)達(dá)到路徑運動的案例
（圖26 電影票案例）
這是格瓦拉電影購票軟件，影片點擊后會類似紙片懸浮，位移后落下。這個位置移動有輕微的曲線變化，制作原理是調(diào)整了動畫的貝塞爾曲線。
案例中封面因為它的 x 與 y 坐標(biāo)都發(fā)生了位置變化，如果應(yīng)用默認(rèn)動畫曲線，效果是這樣。
（圖27 默認(rèn)動畫曲線）
我們展開動畫面板，調(diào)整 中心 x 為線性勻速運動，在調(diào)整 中心 y 的曲線看下效果，運動路徑就發(fā)生了變化。這是因為我們將一個方向的動畫時間變成勻速，另一個方向根據(jù)貝塞爾曲線控制運動快慢，就達(dá)到了想要的曲線運動。
（圖28 調(diào)整動畫曲線）
以上就是這文章的全部內(nèi)容，這篇文章寫的周期比較長，斷斷續(xù)續(xù)寫的，可能有很多的錯別字哈哈，還是感謝你已經(jīng)觀看到這里，有疑問或有更好的方法歡迎隨時在下方留言一起探討，所講的例子源文件都會附送，我是鴿小子，下一篇文章見。
本文由 @鴿小子 原創(chuàng)，未經(jīng)許可不可轉(zhuǎn)載。 源文件在這里
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
