「只要功夫深不用關鍵幀」之圖層序號的玩法

01-24

「只要功夫深不用關鍵幀」將不定期更新一些AE表達式和腳本的奇技淫巧，希望能給大家帶來一些啟發。

AE里的圖層，都有一個自己的唯一編號，在表達式里我們可以訪問並利用這些圖層序號，在某些場景下能提高效率。

圖層名稱左邊的就是圖層序號，從1開始，在表達式里用"index"即可訪問當前圖層的序號。

最簡單的例子，我們可以利用它自動排列。

新建一個文本圖層，把它放到合成的上方，先給他的「源文本」屬性添加表達式：

"行數" + index;

這樣它是第幾個圖層就是第幾行。

然後對它的「位置」屬性添加表達式：

//圖層序號從1開始，但是計算的時候從0開始比較符合邏輯，所以可以先修正一下var indexFixed = index - 1;//每一行之間的距離，可以根據實際情況估算var offset = 100;//每一行在y軸上偏移量為（圖層序號-1）* 行距，x軸不變var x=value[0];var y=value[1] + offset*indexFixed;value = [x,y]

這樣只要對圖層進行複製（選中圖層，快捷鍵CTRL + D / Command + D），它就會自動排列了。

也可以在別的屬性上疊加效果，例如在「縮放」屬性上添加：

//圖層順序每增加1，圖層減小5%var temp = 100 - 5*index;value = [temp,temp];

效果如下：

其實我個人平時用的最多的是在「旋轉」屬性上。新建一個矩形形狀圖層，矩形移到正上方，保持圖層的固定點在合成中心，然後為「旋轉」添加：

var indexFixed = index - 1;//圖層順序每增加1，圖層旋轉30度value = indexFixed*30;

做儀錶盤之類的元素很方便：

把這些圖層預合成，再弄幾個不同粗細及數量的，把這些預合成作為元素再組合，做那種科技風格的儀錶刻度很方便。

當然如果你數學過關，也可以只在一個合成里完成。以常見的錶盤為例，每5度一個小刻度，每30度一個大刻度，還是以剛才的小矩形為例，我們先把「旋轉」設為圖層順序每增加1，圖層旋轉5度：

var indexFixed = index - 1;//圖層順序每增加1，圖層旋轉5度value = indexFixed*5;

然後對矩形的「變換」 - 「縮放」屬性（不是圖層的「變換」 - 「縮放」屬性哦）添加：

var temp = 100;//若該圖層的旋轉角度為30，則矩形縮放變為200%//"%"是取余運算符，transform.rotation%30的值為0就意味著這一層的旋轉角度可以被30整除，即旋轉了30度if(transform.rotation%30 == 0) temp = 200;value = [temp,temp];

如圖：

如果我們在旋轉的同時改變位移，可以做一些螺旋的東西。還是以剛才的小矩形為例，去掉矩形的「縮放」屬性上的表達式，我們在矩形的「變換」 - 「位置」屬性上（不是圖層的「變換」 - 「位置」屬性哦）添加：

var indexFixed = index - 1;//圖層順序每增加1，矩形下移一個像素value = value + [0,indexFixed];

效果如下：

前面我們都在用AE畫圖，下面我們來做回本職工作吧。利用圖層序號做動畫，基本思路就是先做好單個元素的動畫，然後設定好規則複製，就會產生一些有意思的效果。

舉個簡單例子，還是之前的矩形，我們給矩形的「變換」 - 「旋轉」（再一次。。不是圖層的旋轉）添加：

ease(time,inPoint,1,0,360);

恩其實就是讓他在從圖層開始時間到1秒內轉一圈。當然用關鍵幀也可以，為了裝逼我用表達式完成（逃

然後如法複製，效果如下：

好像看起來有點平淡？那我們再讓它稍微酷炫一點：

還是之前的矩形，我們給矩形的「變換」 - 「縮放」屬性添加：

（不好意思我又要裝逼了

//一個簡單的彈性縮放動畫，矩形從無到有「彈」出來，並會根據圖層順序自動時間偏移//時間偏移量，序號每加1，偏移0.01秒var t = (index-1)/100;//s1在圖層開始到0.25秒內從0增加到150（隨著圖層序號增加時間偏移）//s2從0.25到0.5秒內從110減少到100（隨著圖層序號增加時間偏移）//這裡其實150和110應該是銜接的，但是我實驗了一下這個跳變更有彈性的感覺var s1 = ease(time,inPoint + t,0.25 + t,0,150);var s2 = ease(time,0.25+ t,0.5 + t,110,100);//條件判斷，在不同的時間區間設定不同的縮放變化if(time <= (inPoint + t)) value = [100,0];else if(time > (inPoint + t) && time <= 0.25 +t) value = [100,s1];else if(time>(0.25 + t) && time <= 0.5 +t) value = [100,s2];else value = [100,100];

還是老辦法我們複製複製複製，效果如下：

還不過癮？那我們再加入點3D效果吧：

在上一個矩形的基礎上，我們打開3D圖層開關，然後給矩形的「變換」 - 「位置」屬性添加：

//圖層順序每增加1，矩形後移5個像素var z1 = value[2] + index*5;value = value + [0,0,z1];

複製吧少年！效果如下：

哈哈，不要被複雜的表達式嚇到了，其實我們在單個元素上下足功夫，打開腦洞，就能做很多有意思的效果，最後舉個例子，用的表達式就是最基礎的圖層序號應用做出來很魔幻的效果：

用這個思路，稍微調一下可以得到如下效果（看你腦洞了：

「只要功夫深 不用關鍵幀」之圖層序號的玩法

「只要功夫深不用關鍵幀」之圖層序號的玩法