技巧:表示式完成一個看上去很高階的日期選擇動效
原作者:Oleg Frolov
製作了好多有趣的ui選擇互動動效,這是其中一個比較難的,我個人臨摹用表示式完成的這個效果
年前的最後一個技巧分享,用程式設計師的思維來完成這個動效。
首先拿到這張圖,我的第一件考慮的事情就是如何將日期的位置與縮放還有透明度聯絡起來,這是一個最至關重要的問題。
所以我第一個想到的便是 插值函式:linear 。這個函式的本質我已近在衛生紙動效那期ae技巧視訊分享詳細說過了。這裡也就不過多的贅述。
那麼,首先我們建立一個製作gif圖的標準合成(800*600,24fps)。再建立一個固態層作為背景,顏色:E3E3E3。然後繪製一個170,90大小的矩形,並將它至於合成的中心,圓度為20,顏色:262626,並給它新增 網路變形 和 投影 兩個效果。詳細引數如下:
這樣我們的日期顯示區域就做好了。
那麼到了我們最重要的部分了。我們先建一個文字層,輸入什麼無所謂,注意這裡要將 段落的對齊方式選擇為居中 ,這樣文字的錨點在水平方向會在中點。同時將數值方向我們也將錨點放在中點同並將文字置於合成中心。不直接調節錨點,而採用段落居中調節是因為不同的數字在水平方向佔的寬度是不一樣的,直接移動錨點,複製之後,由於數字不同,整個文字的寬度會變,但是錨點不會再水平方向是去往中點,而段落居中卻可以。
考慮到後續可能需要調整,我選擇先建立一個空物件來儲存我們的變數值。這裡我添加了兩個滑塊,一個叫間距,一個叫位置。間距我設為固定值60。而位置的值需要我們來設定,這是用來控制整個動效左右滑動的引數。
前期工作做完了,我們可以開始書寫表示式了。首先展開我們的文字層,裡面有一個叫源文字的一項,按住alt鍵左鍵單擊源文字前的小秒錶就可以寫表示式了,這裡我們鍵入: index ;表示讓他的顯示數值為他的序列號。所以這裡需要注意的一項是,為了不影響序列,我們將空物件以及後期新增的按鍵效果統統放在我們的文字層之後。然後我們調出文字的位置, 右鍵-單獨尺寸 ,因為我們只要對x做操控。同樣給x書寫表示式:transform.xPosition+(index-1)*thisComp.layer("空 1").effect("間距")("滑塊")+thisComp.layer("空 1").effect("位置")("滑塊");這裡是將x本身的值(400)+序列號-1個間距+我們的位置控制滑塊。這裡我們就做出了文字與文字之間的間隔同時可以用位置滑塊來控制所有文字的移動。
然後給縮放新增表示式:
a=Math.abs(transform.xPosition-400);
temp=linear(a,0,85,100,40);
[temp,temp];
第一行我們將x的值減去了400,即為序列號-1個間距+我們的位置控制滑塊,然後取了絕對值。等價於我們將x軸的零點位置移到了400的位置,即下圖參考線位置。同時我們取絕對值為的是得到與400這條參考線的距離。
第二行linear表示式將第一行的距離值0與85分別對映給100與40,這裡取85,因為矩形顯示框的水平大小為170,85正好是顯示框左右與400的最大距離。
最後返回大小,範圍為(100,100)~(40,40),由第一行的距離值決定,而距離又由位置值決定,所以我們完成了位置滑塊控制縮放。
對於透明度,則採用同樣的方法:
a=Math.abs(transform.xPosition-400);
linear(a,0,85,100,25);
不要忘了最後我們只要文字在矩形區域顯示,這次我們不用遮罩,因為用遮罩需要31個遮罩。給文字層新增 效果-通道-設定遮罩 ,從圖層獲取遮罩,選擇矩形區域那個圖層,第二個選擇 效果和蒙版 。
剩下來的就是複製複製複製了。
改變位置滑塊的值可以看到整個所有的文字都一起移動,且在矩形區域有縮放與透明度的變化效果。我想最開始顯示為日期15,那麼日期15為相當於x的0位置,而我們位置是日期1的,所以日期1的位置為14*60*-1=-840,這也是我上面圖中-840的由來,對於該數值k幀,最終的 停留數為60的倍數 (固定間距值的倍數,數值上下限為840,-840)。
最後配合一些點選與滑動效果(對圓的位置縮放透明度k幀),那麼整個動效就完成了。
這就是本次的技巧分享啦,最後的最後提前 祝大家春節快樂 。