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