AE動效周期表Part1

動效周期表是由日本設計師 Kazuki Akamine按照基礎動效的特點屬性,制作成類似元素周期表的形式。我在無意中看到這個系列,所以開始跟著做一下,復習一下AE基本功,回憶各種效果預設及表達式的用法,順便為每一篇寫個簡單做法總結,最后會附上我的ae工程文件,總共有73個動效,我會分成三篇來更新。

1.軌道

制作方法1:關鍵幀。在rotation碼表中0s打關鍵幀,4s打關鍵幀n=1

制作方法2:表達式。在rotation碼表利用表達式:time*90(代表一秒鐘旋轉90度)

2.偏移量

制作方法:利用描邊中的虛線屬性進行偏移,固定虛線長度,偏移量碼表中利用表達式:time*n,此處表達式用在旋轉屬性中,代表1s中旋轉n度。

3.勾畫

制作方法:利用勾畫的效果去完成

4.循環(huán)

制作方法:利用偏移的效果去完成

相比單純位置變換的優(yōu)勢在于可以自動填充多個主體,圖例僅用了一個六邊形

5.平鋪

制作方法:利用CC Tiler的效果去完成

6.極坐標

制作方法:利用極坐標的效果去完成

7.線寬

制作方法:利用屬性中的描邊屬性

8.形狀變化

制作方法:利用多邊形中的屬性(點數(shù)/外徑/內徑)

9.重復變化

制作方法:在上一步形狀的變化的基礎上,利用時間差值做出,并沒有特別的技法,但是在做的過程中要想清楚圖層變化的順序。eg:由六邊形變成三角形是最上面的圖層先動,而從三角形變六邊形則是最下面的圖層先動

10.投影

制作方法:投影用到了CC Scale Wipe的效果去完成,中間形狀變化的地方通過調整中心點保持投影粗細始終相同;空心部分用到了軌道遮罩。

細節(jié)注意:形狀變化時為保持描邊粗細的一致,需要在形狀變化的地方調整縮放大小,除此之外,需要把各部分變化節(jié)奏調整一致,動效才會比較和諧。

11.改變形狀


制作方法:在AI中繪制好形狀(作為蒙版),復制進同一個純色層,利用改變形狀完成效果,設置好初始蒙版與終止蒙版,需要連續(xù)變化的話可以多復制幾個效果。

知識點:在變化過程中發(fā)現(xiàn)圖形產生了旋轉是因為各個圖形的起始點不同,如果想消除旋轉的話,可以將各個蒙版的起始點設置在差不多的位置,這樣就可以基本消除旋轉效果(設置起始點方法,在蒙版中選中想要設置為起始點的點,單擊右鍵-蒙版和路徑形狀-設置為第一個頂點)

??這個效果運行起來很卡,因為要在蒙版間做大量運算,謹慎使用

12.緩動

制作方法:在關鍵幀單擊右鍵-關鍵幀輔助,有三種模式可以轉換關鍵幀,緩入/緩出/緩動,其實本質上都是讓變化更加有節(jié)奏,不是一直保持勻速,除了預設的三種運動模式以外,還可以打開速度圖標編輯速度,使變化更加豐富。圖例為先快后慢的小球運動。

13.節(jié)奏

制作方法:圖形的變化是通過調整多邊形的外圓度完成的,再加上旋轉動畫。主要要注意調整兩個動畫的節(jié)奏匹配,有快有慢,有收有放,讓整個動畫有呼吸感而不是呆板的。

14.計步器


制作方法:主要用到了表達式Math.floor(time*n)*m,此處表達式用在旋轉中,n代表1s旋轉次數(shù),m代表旋轉幅度。

知識點1:刻度的做法。創(chuàng)建一個刻度大小的矩形,添加-中繼器-調整副本個數(shù)(這里取了20),然后在中繼器的屬性中選擇旋轉,因為我這里是20個刻度,一整圈是360度,360度/20個,所以這里度數(shù)是18,然后在矩形路徑中的位置屬性進行調整(其實就是調整這個圓的半徑),調整到合適的大小即可。

知識點2:為指針添加表達式的時候記得要把指針的中心點放在底邊中點,調整中心點位置的方法,點擊錨點圖標,勾選對齊,在拖動中心點到某些特殊位置時就會自動吸附。

15.時間置換

制作方法:主要用到了無線電波與時間置換效果。

1.用無線電波創(chuàng)建電波形狀,這里通過調整多邊形的參數(shù)可以獲得不同的形狀;

2.再創(chuàng)建漸變圖層,調整為角度漸變(這里的漸變形態(tài)決定了不同的置換方式,也可以試試換成徑向或者不同角度的線性漸變),并將圖層設置為不可見;

3.創(chuàng)建調整圖層,添加時間置換效果,時間置換圖層選擇為漸變圖層,原理是通過漸變的梯度來調整時間置換的區(qū)域,漸變的規(guī)律是從白到黑,再通過調整其他參數(shù)得到不同效果。

16.尖端形狀

制作方法:主要用到了滑塊效果和表達式。

1.繪制一個形狀(這里是正六邊形),將形狀轉化為貝塞爾曲線路徑,或在創(chuàng)建時勾選貝塞爾曲線路徑(這個形狀作為路徑),在效果和預設中找到滑塊添加到形狀,為形狀添加修剪路徑動畫,為修剪路徑添加表達式,并將表達式關聯(lián)到滑塊(將螺旋形狀的圖標拖到滑塊上即可),為滑塊添加關鍵幀,0s的時候為0,2s的時候為100;

2.繪制滑塊形狀(這里是圓形),復制六邊形的路徑到滑塊位置屬性下(如果沒有對齊的話,要手動調整對齊,調整時選中全部關鍵幀),為滑塊添加表達式valueAtTime(t),選中t后將表達式關聯(lián)到滑塊,這個表達式我自己覺得可以理解為特定時刻對應的值,在這里也就是修剪路徑的動畫,但是修剪路徑的動畫又關聯(lián)給了滑塊,所以現(xiàn)在將滑塊與路徑關聯(lián)起來了,因為滑塊總共走了100步,運動時間為2s,所以要在表達式后面添加/100*2;

3.效果優(yōu)化,在每一個拐點添加關鍵幀,并添加緩動,調整速度曲線即可。

(以上是畫出圖形的步驟,再增加關鍵幀可以完成圖形消失的結果,可以自己試試)

17.音頻波動

制作方法:利用音頻頻譜效果完成。

1.新建純色層,賦予音頻頻譜效果,拖進音樂素材,將音頻層的源調整為音樂素材(不同的音樂也會有不同的波形效果);

2.為純色層新建蒙版,將蒙版調整到差不多中心位置,將蒙版的疊加方式改為無,在音頻頻譜的效果中將路徑修改為蒙版1;

3.復制純色層,通過調整參數(shù)獲得不同形態(tài)的音頻頻譜,參數(shù)可以多調整試著玩一下,感受不同效果,我這里主要調節(jié)了最大高度/厚度(即描邊寬度)/顏色/顯示選項(不同的波圖形態(tài))/面選項(波形擴展的位置),組合在一起即可。

知識點:調整蒙版大小的方法。選中蒙版command+T進行縮放,縮放時command+shift可以進行中心縮放。

18.無線電波

制作方法:利用無線電波效果完成。

拓展:通過等高線可以做出3d效果,通過蒙版形狀可以做出豐富的形狀

19.鏈接

制作方法:利用光束效果建立連接。

1.新建兩個圓點;

2.新建純色層,賦予光束效果,更改參數(shù),我這里調整了起始厚度與結束厚度(即線條粗細)/長度/顏色/柔和度;

3.為光束的起始點與結束點添加表達式,關聯(lián)到兩個圓點。

這樣就建立好了一對圓點且他們之間的光束會跟隨位置移動,其他復制即可,最終有4個點,點兩兩連接,然后通過調整位置發(fā)生變化,移動過程中線不夠長時,可以在光束效果里修改長度,讓兩點連接。我這里還對線的透明度進行了一點調整,更有空間感。

20.粒子

制作方法:利用粒子效果調節(jié)參數(shù),也可以用插件,我用的是Red Giant的粒子插件。

通過設置粒子的發(fā)射速度/隨機大小/隨機透明度等等參數(shù),粒子插件中可以調整的參數(shù)非常多,可以自己去試著玩一下,紅巨人的插件也有漢化版本的,可以自己調整嘗試。

21.網(wǎng)格

制作方法:利用網(wǎng)格效果完成,通過對網(wǎng)格寬度的變化完成效果。

22.遮罩擦除

制作方法:利用alpha反轉遮罩。繪制兩個同樣的圓形,添加縮放動畫,將兩個圓形錯開播放,第一個圓形縮放完畢后第二個圓形開始縮放,并為第一個圓形添加alpha反轉遮罩即可。

alpha反轉遮罩的原理,我覺得有點類似ps里的剪輯蒙版,eg:想給一段文字添加紋路,PS中文字路徑在下,紋路圖片在上,紋路圖片添加剪輯蒙版;在ae中文字路徑在上,紋理圖片在下,為文字路徑添加alpha反轉遮罩。

23.粉碎

制作方法:利用碎片效果,調節(jié)參數(shù),我這里選用了玻璃效果,調節(jié)形狀/作用力/物理等參數(shù)可以形成不同效果。

24.卡片舞

制作方法:利用卡片動畫效果完成。

1.繪制矩形,添加卡片動畫效果,設置行數(shù)與列數(shù);

2.在第1幀給z轉旋轉偏移打上關鍵幀,第15幀為z軸旋轉添加45度的偏移,這樣第一步的z軸旋轉卡片舞蹈就完成了,其他y軸和x軸的方法也是一樣。

知識點:為形狀圖層添加卡片動畫和為純色圖層添加卡片動畫的區(qū)別,卡片動畫的行數(shù)與列數(shù)均是以合成大小為界;為形狀圖層添加卡片動畫時,我們可以理解為形狀圖層是全合成的一個蒙版,此時行與列僅顯示形狀圖層區(qū)域內,eg:此時我的行與列分別是12與10,但在卡片內可能只能顯示6與4,其他均在卡片意外的的區(qū)域看不到;為純色圖層添加卡片動畫時,純色圖層與合成大小相等,所以行與列顯示完全。

在這里為什么要使用為形狀圖層添加卡片而不是對純色圖層添加卡片再將其進行縮放,是因為如果我們對對純色圖層添加卡片再將其進行縮放的話,我們在添加z軸旋轉偏移的時候,旋轉后卡片不在合成內的部分會被截去,使卡片不完整。

Part1到此結束,未完待續(xù)。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 今天分享下粘性融合的制作方法!?。?(一)UI動效常用快捷鍵(更新中) enter重命名Com+Shift+Alt...
    redBlue_閱讀 8,145評論 5 14
  • 官網(wǎng)中文版 1 簡易天空替換## 技能:線性擦除,追蹤運動,用顏色鍵K出人物,用色彩曲線調色。(1)天空圖片素材放...
    朱細細閱讀 11,645評論 4 82
  • 一、工作區(qū)和工作流程 1.工作區(qū)和面板 保存、刪除、重置工作區(qū)???、編組、浮動面板 2.首選項 常規(guī)、預覽、導入、...
    朱細細閱讀 8,192評論 0 52
  • NO.01 偏移旋轉系:軌道 1、可以改變 錨點 位置,而不改變圖形的 中心點(位置) 2、旋轉:time*90:...
    jiexia0629閱讀 1,048評論 0 0
  • UI基礎動效設計需要考慮的點: ①邏輯 ②空關系 ③層次感 ④架構 UI動效的三個特性: 功能性:動效對交互引導和...
    九喵CAT閱讀 1,397評論 0 6

友情鏈接更多精彩內容