動效技巧：表達式製作高端日期選擇動效

今天給大家推薦一篇動效技巧方法，如何使用表達式製作高端日期選擇動效，作者分享了練習中思考得到的個人覺得較簡單實用的方法。一起來看下吧！

Oleg Frolov製作了好多有趣的ui選擇交互動效，這是其中一個比較難的，個人臨摹用表達式完成的這個效果。當然我不清楚大神Oleg大神是否使用這個方法製作，這裏事先說明一下

用程序員的思維來完成這個動效。

首先拿到這張圖，我的第一件考慮的事情就是如何將日期的位置與縮放還有透明度聯係起來，這是一個最至關重要的問題。

 所以我第一個想到的便是插值函數：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這條參考線的距離。（即將400這個位置設為x=0的坐標軸，那麼灰色日期邊框左右分別為x=-85,x=85,而左右的效果是對稱的，所以取絕對值整合範圍為0~85）

第二行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幀），那麼整個動效就完成了。

原作者：Oleg Frolov

作者：Duplicate