以上就是大概的效果了~

因?yàn)樾枰褂帽磉_(dá)式，所以要把AE的界面換成英文。（注意哦）

下面是制作過(guò)程（可能有點(diǎn)長(zhǎng)）……

1.用AI建立一個(gè)手機(jī)界面的畫(huà)板，記住顏色模式一定要用RGB模式，柵格效果300ppi。

2.畫(huà)一個(gè)簡(jiǎn)單的UI界面，一定要分好層，給每一層命名。

3.把AI文件導(dǎo)入進(jìn)AE，新建一個(gè)空對(duì)象，把所有圖層設(shè)置為空對(duì)象的子集。

4.設(shè)置空對(duì)象的比例，在合成設(shè)置中設(shè)置大小，打開(kāi)所有圖層的對(duì)于矢量圖層連續(xù)柵格化的標(biāo)簽。

5.更改合成的底色，挪動(dòng)手機(jī)界面的位置直至契合。

6.把信封的幾個(gè)元素和滑塊的幾個(gè)元素添加到預(yù)合成，把這兩個(gè)預(yù)合成和背景鎖定。

7.用錨點(diǎn)工具（Y）把頂部和中部的色塊的中心點(diǎn)挪到頂點(diǎn)。

8.將中部色塊設(shè)為頂部色塊的子集。

9.調(diào)節(jié)頂部色塊的比例（scale），讓它們有一個(gè)從上到下的動(dòng)畫(huà)。

10.選擇兩個(gè)關(guān)鍵幀，右鍵選擇keyframe velocity，勾選lock dimensions，把influence改為75%。

11.打開(kāi)圖標(biāo)編輯器，調(diào)節(jié)一下曲線。

12.調(diào)節(jié)滑塊的位置，設(shè)置一個(gè)從下到上的動(dòng)畫(huà)。

13.選中兩個(gè)關(guān)鍵幀，設(shè)置為緩動(dòng)（F9），打開(kāi)圖標(biāo)編輯器調(diào)節(jié)曲線。

14.復(fù)制一個(gè)頂部色塊，把它放到時(shí)間的上面，把時(shí)間圖層設(shè)置軌道遮罩（tekmat）。

15.用文本工具打上時(shí)間，選擇一個(gè)時(shí)間點(diǎn)，給source text打上關(guān)鍵幀，讓時(shí)間會(huì)跳動(dòng)一分鐘~

16.搜索cc bender效果，添加到信封預(yù)合成中。

17.調(diào)節(jié)cc bender兩個(gè)錨點(diǎn)的位置，放到信封的左右兩邊，把bend效果改為marilyn，調(diào)節(jié)amount大小，讓信封呈現(xiàn)彎曲狀。

18.為信封的position設(shè)置關(guān)鍵幀，設(shè)置一個(gè)從上往下落的動(dòng)畫(huà)。

19.按住alt鍵點(diǎn)擊position的幀圖標(biāo)，寫(xiě)入表達(dá)式：

amp = .06;

freq = 2.0;

decay = 3.0;

n = 0;

if (numKeys > 0){

n = nearestKey(time).index;

if (key(n).time > time){n--;}

}

if (n == 0){ t = 0;}

else{t = time - key(n).time;}

if (n > 0){

v = velocityAtTime(key(n).time - thisComp.frameDuration/10);

value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);

}

else{value}

20.為cc bender的amount參數(shù)K幀，讓信封有一個(gè)上下彈動(dòng)的動(dòng)畫(huà)，同樣的，為這幾個(gè)關(guān)鍵幀寫(xiě)入表達(dá)式：

amp = .06;

freq = 2.0;

decay = 3.0;

n = 0;

if (numKeys > 0){

n = nearestKey(time).index;

if (key(n).time > time){n--;}

}

if (n == 0){ t = 0;}

else{t = time - key(n).time;}

if (n > 0){

v = velocityAtTime(key(n).time - thisComp.frameDuration/10);

value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);

}

else{value}

21.建立一個(gè)形狀圖層，用鋼筆畫(huà)出一條豎線，描邊粗細(xì)為5px。

22.點(diǎn)擊add，添加trim paths選項(xiàng)，為開(kāi)始和結(jié)束打上關(guān)鍵幀，把豎線設(shè)置為信封的子集。

23.調(diào)節(jié)開(kāi)始和結(jié)束的關(guān)鍵幀的位置，讓它們彼此錯(cuò)開(kāi)。

24.復(fù)制3個(gè)這樣的豎線，把它們和信封一起添加到一個(gè)新合成中，再建立一個(gè)矩形，設(shè)置遮罩。

25.打開(kāi)信封合成，把左上角的數(shù)字設(shè)置為數(shù)字底色的子集。

26.為數(shù)字底色的縮放K幀，加上表達(dá)式：

amp = .06;

freq = 2.0;

decay = 3.0;

n = 0;

if (numKeys > 0){

n = nearestKey(time).index;

if (key(n).time > time){n--;}

}

if (n == 0){ t = 0;}

else{t = time - key(n).time;}

if (n > 0){

v = velocityAtTime(key(n).time - thisComp.frameDuration/10);

value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);

}

else{value}

讓它變的靈活有彈性。

27.給滑塊設(shè)置一個(gè)滑動(dòng)的動(dòng)畫(huà)，用AE輸出看一下效果。

28.打開(kāi)C4D，建立一個(gè)立方體，調(diào)整邊長(zhǎng)大小，轉(zhuǎn)為可編輯對(duì)象，在邊模式下選擇四個(gè)頂部邊。

29.右鍵倒角，偏移8CM，細(xì)分6.

30.再建立一個(gè)立方體，調(diào)節(jié)大小厚度，放入前一個(gè)立方體（手機(jī)主體）的子集，用復(fù)位PSR把它與手機(jī)主體對(duì)齊。

31.在正視圖中，選擇點(diǎn)模式用切刀沿著立方體的上下兩條邊切出線。

32.添加一個(gè)材質(zhì)球，在發(fā)光中把輸出好的AE視頻導(dǎo)出到發(fā)光紋理中，這時(shí)拖動(dòng)時(shí)間軸，我們會(huì)發(fā)現(xiàn)并沒(méi)有動(dòng)畫(huà)，我們需要再材質(zhì)球中的編輯中勾選動(dòng)畫(huà)預(yù)覽。

33.把紋理的投射方式改為立方體，調(diào)節(jié)比例讓它在視覺(jué)上正常。

34.再添加一個(gè)發(fā)光材質(zhì)，添加給手機(jī)的主體。

35.在渲染設(shè)置中添加素描卡通效果，勾選輪廓角度和材質(zhì)，去掉折疊褶皺和邊沿。

36.啟用比劃。

37.豐富手機(jī)的細(xì)節(jié)，用圓柱做一個(gè)手機(jī)的hoom鍵，添加發(fā)光材質(zhì)。

38.手機(jī)邊緣的音量鍵，新建立一個(gè)素描材質(zhì)，勾選交叉，在交叉對(duì)象為手機(jī)主體。

39.用交互渲染看一下大概的效果。

40.把這些元素全部拖到手機(jī)的子集中去，把手機(jī)的中心點(diǎn)改為正下方的中點(diǎn)。

41.為手機(jī)的Z軸、縮放、和旋轉(zhuǎn)K幀，讓手機(jī)有一個(gè)旋轉(zhuǎn)飛入從小到大的動(dòng)畫(huà)。

42.添加一個(gè)攝像機(jī)，坐標(biāo)和旋轉(zhuǎn)先全部歸零，然后拖動(dòng)z軸y軸到合適的位置。

43.改變手機(jī)主體素描材質(zhì)比劃的粗細(xì)，讓外輪廓粗，細(xì)節(jié)部位輪廓細(xì)。

44.渲染設(shè)置中的素描卡通著色中添加一個(gè)背景顏色，看看渲染效果。

45.新建一個(gè)螺旋線，用PSR命令對(duì)齊手機(jī)，平面改為XZ，調(diào)節(jié)一下參數(shù)。

46.添加一個(gè)掃描，加上發(fā)光材質(zhì)。

47.給掃描的開(kāi)始和結(jié)束K幀，右鍵開(kāi)始選擇時(shí)間軸設(shè)置，把開(kāi)始和結(jié)束的時(shí)間軸錯(cuò)開(kāi)。

48.復(fù)制一個(gè)掃描；再新建一個(gè)螺旋線，新建一個(gè)球體，調(diào)節(jié)球體的大小，給球體添加一個(gè)對(duì)齊曲線的標(biāo)簽，曲線對(duì)象為螺旋線。

49.多復(fù)制幾個(gè)這樣的對(duì)象，把它們的時(shí)間軸和螺旋線的位置錯(cuò)開(kāi)。

50.更改素描材質(zhì)的比劃顏色和粗細(xì)，渲染一下看看。

51.輸出為PNG序列，導(dǎo)入AE中。

52.解釋素材改為25幀/s，新建一個(gè)形狀圖層，用鋼筆畫(huà)出一個(gè)線段，兩頭改為圓角，點(diǎn)擊ADD添加一個(gè)trim paths；為開(kāi)始和結(jié)束K幀。

53.為修剪路徑的開(kāi)始和結(jié)束添加關(guān)鍵幀調(diào)節(jié)動(dòng)畫(huà)。

54.用圖標(biāo)編輯器編輯曲線讓動(dòng)畫(huà)更自然。

55.為線段的path添加關(guān)鍵幀，讓它從上往下落。

56.給線段添加一個(gè)描邊，大小為2，顏色為灰色。

57.給線段添加到預(yù)合成中，在rotation選項(xiàng)中輸入表達(dá)式：30*（index-1）;

然后復(fù)制6個(gè)。

58.復(fù)制一個(gè)這樣的預(yù)合成，調(diào)到手機(jī)的另外一邊，再把所有的線段改成五彩繽紛的顏色就大功告成啦~

59.輸出出來(lái)，看一下成果吧！

終于完成啦，需要注意的是，使用表達(dá)式的時(shí)候最好使用英文原版的AE，而且一定要注意大小寫(xiě)哦!

作品時(shí)間