@Poupo是名設(shè)計(jì)師 ：這篇文章寫(xiě)了這支一分鐘MG動(dòng)畫(huà)的一些技術(shù)上思考難點(diǎn)。涉及了表達(dá)式，效果器，形狀圖層，少量插件以及一些可能需要的三維軟件。本文偏技術(shù)型較強(qiáng)，可能你需要對(duì)AE有所接觸。我對(duì)AE也是自學(xué)的，可能有些做法看起來(lái)并不專(zhuān)業(yè)吧，望一起矯正探討。

MG 動(dòng)畫(huà)源地址：http://weibo.com/5168338024/Ekn7u77fq

在干貨之前，聊聊這個(gè)一分鐘小動(dòng)畫(huà)發(fā)布之后吧。其實(shí)有些超乎預(yù)料，公眾號(hào)收到了歷史最多的一次留言點(diǎn)贊打賞！微博被轉(zhuǎn)發(fā)了280多次，閱讀量24w+...瞬間破了千粉（真不容易...大v們別嘲笑！請(qǐng)叫我網(wǎng)紅少年！），想想還有些小雞凍！做這支視頻的目的更多的不在于要表達(dá)什么，而在于思考這畢業(yè)后這一年自己在設(shè)計(jì)上的一些理解以及技術(shù)層面上的一次嘗試吧。

我差不多從十月中旬開(kāi)始策劃，創(chuàng)意之初，我把整個(gè)工程分成5個(gè)chapters（開(kāi)篇基礎(chǔ)幾何 - 色彩變換 - 空間運(yùn)動(dòng) - 粒子應(yīng)用 - 三維與角色）三維部分章節(jié)目前結(jié)合導(dǎo)入效果不好加上時(shí)間問(wèn)題幾乎被放棄了。）

△ 非常草稿的草稿

chapter 1

我在思考基礎(chǔ)幾何這部分時(shí)，開(kāi)始是想用純粹的幾何變化來(lái)設(shè)計(jì)，從點(diǎn)到線條到面，沒(méi)有其他修飾。但導(dǎo)出播放總覺(jué)得畫(huà)面太過(guò)于單調(diào)。后面加了些小點(diǎn)綴，場(chǎng)景隨機(jī)位置出現(xiàn)4px的彩色點(diǎn)，但也覺(jué)得畫(huà)面小氣了些。

△ scene1的第一版

我去重新思考這部分，也看了大量國(guó)外優(yōu)秀作品，behance上看到JR公司對(duì)幾何圖形設(shè)計(jì)的一些不一樣的方式，在基礎(chǔ)幾何圖上加入粗線條，端點(diǎn)，過(guò)渡線條等方式，確是打開(kāi)了我的眼界。我想，這一章就是應(yīng)該這樣去呈現(xiàn)！當(dāng)然這無(wú)形增加了實(shí)現(xiàn)難度。AE中，端點(diǎn)實(shí)現(xiàn)并不能直接賦予線條，而是單獨(dú)做一個(gè)小正方形圖層（你所看到的端點(diǎn)都是4px的正方形）作為端點(diǎn)。端點(diǎn)如何跟正方形進(jìn)行交互聯(lián)動(dòng)便需要通過(guò)表達(dá)式實(shí)現(xiàn)了。

原理很簡(jiǎn)單：設(shè)置正方形A中心為初始坐標(biāo)原點(diǎn)，右上角端點(diǎn)坐標(biāo)為（A寬/2，A高/2），左下角為（-A寬/2，-A高/2）

原理：設(shè)置圓形A中心為初始坐標(biāo)原點(diǎn)，獲取圓半徑r，上頂點(diǎn)坐標(biāo)（0，r）。而不在正上方的點(diǎn)坐標(biāo)呢？其實(shí)不用求坐標(biāo)，只需要給點(diǎn)一個(gè)旋轉(zhuǎn)即可，因?yàn)锳中心是原點(diǎn)坐標(biāo)。

幾何圖形章節(jié)所有元素都是運(yùn)用這樣基礎(chǔ)幾何數(shù)學(xué)知識(shí)去構(gòu)造的，去運(yùn)算點(diǎn)的位置，設(shè)置好層級(jí)關(guān)系，分鏡處理，如何過(guò)渡等。

△ scene1的截圖

章節(jié)末三角形旋轉(zhuǎn)部分用到了形狀圖層的中繼器效果（如下圖），通過(guò)調(diào)節(jié)副本數(shù)目，來(lái)復(fù)制有規(guī)律的三角形，給旋轉(zhuǎn)K上關(guān)鍵幀，便可輕易做到讓其復(fù)制成一個(gè)圓形。

chapter 2

這個(gè)章節(jié)重點(diǎn)體現(xiàn)色彩變換，我重點(diǎn)介紹兩個(gè)地方，一是“彩虹”的設(shè)計(jì)，二是波形的設(shè)計(jì)。

彩虹部分主要用到形狀圖層的漸變描邊以及修剪路徑工具，漸變描邊倒很熟悉，用漸變色對(duì)路徑進(jìn)行描邊，可以控制描邊粗細(xì)，顏色，漸變方式等。（新建形狀圖層，添加 - 橢圓路徑 / 添加 - 漸變描邊 ）

而修剪路徑，就是只顯示整個(gè)形狀路徑的百分比，從0到100（百分比）。通過(guò)設(shè)置修剪路徑的開(kāi)始值和結(jié)束值來(lái)得到描邊顯示的多少，從而產(chǎn)生彩虹運(yùn)動(dòng)的一個(gè)元素?？梢試L試拖動(dòng)這幾個(gè)數(shù)值觀察他們的關(guān)系。（添加 - 修剪路徑）

波形部分，它算是一個(gè)折騰我蠻久的東西了。AE本身自帶正弦波效果，但是只能做最基本的正弦等幾個(gè)規(guī)律性很強(qiáng)的波形（我不確定我做法是否正確）。為此我運(yùn)用到了另一個(gè)效果器——置換圖（效果 - 扭曲 - 置換圖）

置換圖的意思就是，假定一個(gè)點(diǎn)A，添加置換圖效果，設(shè)置置換方式為最大垂直置換100，制作一張純白色圖B，把置換圖層改為B，則A會(huì)向上運(yùn)動(dòng)100px。如果制作一張灰度50的圖C，把置換圖層改為C，則A會(huì)向上移動(dòng)50px。那同樣道理，如果我畫(huà)一條細(xì)線，給細(xì)線置換效果，并置換圖層是一個(gè)黑白漸變循環(huán)的圖層，則就會(huì)出現(xiàn)可控的波形曲線了吧！

于是我做了下面的置換圖：

通過(guò)調(diào)節(jié)參數(shù)產(chǎn)生了如圖波形：

通過(guò)控制漸變置換圖層黑白過(guò)渡的變化，來(lái)達(dá)到波形的運(yùn)動(dòng)。這樣極大得波形可控性。包括鏡面波形也通過(guò)這樣方式去制作，來(lái)達(dá)到水滴入水波的漣漪波形效果。

chapter 3

為了表現(xiàn)空間感，我設(shè)計(jì)了三個(gè)小球的空間運(yùn)動(dòng)，三個(gè)不同顏色代表三個(gè)主色域，在運(yùn)動(dòng)上，想讓其看起來(lái)不像是屏幕的軌跡上。這里，我開(kāi)始踩了一個(gè)坑，因?yàn)槲议_(kāi)始盡可能畫(huà)出一條像空間旋轉(zhuǎn)的曲線來(lái)實(shí)現(xiàn)。通過(guò)控制小球運(yùn)動(dòng)的速度，大小來(lái)讓其看起來(lái)像空間運(yùn)動(dòng)，但是我整整花了兩個(gè)小時(shí)去調(diào)整一條曲線，而且轉(zhuǎn)角部分始終看起來(lái)很別扭。

我得用更好的方法了...我想，既然是做空間旋轉(zhuǎn)運(yùn)動(dòng)，為什么不可以直接定義空間的坐標(biāo)，把運(yùn)動(dòng)想象成一個(gè)改變半徑r和軌跡圓上角alpha坐標(biāo)位置的點(diǎn)。

代碼如下：

r = effect("radius")("滑塊");//定義半徑

alpha = effect("alpha")("滑塊");//定義角度

A =alpha* Math.PI / 180;//角度值映射為弧度

x = r * Math.cos(A);//點(diǎn)的x軸坐標(biāo)值

z = r * Math.sin(A);//點(diǎn)的Z軸坐標(biāo)值

[x,0,z]//空間坐標(biāo)輸出

幾乎算得上完美解決了空間中旋轉(zhuǎn)的問(wèn)題，但誕生了另一個(gè)致命問(wèn)題，AE對(duì)三維運(yùn)行的性能問(wèn)題，使得修改起來(lái)極其吃力，畢竟一臺(tái)13寸集成顯卡的MacBook pro...如果下次再設(shè)計(jì)類(lèi)似運(yùn)動(dòng)，我一定在表達(dá)式中通過(guò)數(shù)學(xué)方法把空間坐標(biāo)映射到屏幕二維坐標(biāo)...

小球運(yùn)動(dòng)拖尾，用了particular插件的次級(jí)粒子，實(shí)現(xiàn)拖尾效果比AE自帶拖尾會(huì)好很多。性能上也還算能接受，這里就不詳細(xì)說(shuō)明了。

Chapter 4

這章節(jié)原計(jì)劃表現(xiàn)空間粒子，光影色彩等。其實(shí)有點(diǎn)受與時(shí)間關(guān)系，減少了很多想法（畢竟這時(shí)候已經(jīng)到十一月中旬，公司項(xiàng)目加急階段...每天11點(diǎn)以后才能下班。）

開(kāi)頭的線條雨，用了particular插件的box發(fā)射器，加拖尾效果，以及增加了地板kill。如下圖：綠色為kill地板，粒子到地板則被kill。上面為空間攝像機(jī)，通過(guò)攝像機(jī)運(yùn)動(dòng)來(lái)實(shí)現(xiàn)空間線條雨的效果。

彩虹傘，其實(shí)這里糾結(jié)了一下，本來(lái)想用畫(huà)一個(gè)八邊形然后附上顏色，再通過(guò)放大來(lái)制作打傘樣式。但總覺(jué)得細(xì)節(jié)上少了很多，于是我在C4D中做了一個(gè)更真實(shí)的撐傘動(dòng)畫(huà)。把傘的頂部加上頂視圖攝像機(jī)，傘在打開(kāi)的過(guò)程中是有一些細(xì)微的變化以及本身布料形狀的變化的，這些細(xì)節(jié)的存在才讓傘面撐開(kāi)動(dòng)畫(huà)看起來(lái)更自然。

我還是蠻喜歡彩虹傘這部分的，傘面撐開(kāi)旋轉(zhuǎn)，用plexus做了幾個(gè)粒子，當(dāng)成雨滴吧。動(dòng)畫(huà)快結(jié)尾部分，有個(gè)點(diǎn)陣列漣漪效果其實(shí)蠻有趣的，它的靈感來(lái)自幾年前蘋(píng)果的電視廣告「Designed by Apple in California」中的一段。一直想知道那樣的效果如何實(shí)現(xiàn)才自然，直到后來(lái)，我找的了應(yīng)用C4D陣列運(yùn)動(dòng)的方法。大概做一個(gè)平面的點(diǎn)陣列，然后給整列一個(gè)向上波運(yùn)動(dòng)的效果。通過(guò)這種結(jié)合的方式，讓MG動(dòng)畫(huà)中元素運(yùn)動(dòng)得更自然，更符合預(yù)期吧。

視頻中：

其在C4D中：

最后

我選了幾天的背景音樂(lè)，目前還沒(méi)有能力自己制作音頻...最后選擇了X-Ray Dog 的一首《If You Ask Me》中的前半部分。當(dāng)然，導(dǎo)出視頻后，在Pr中通過(guò)剪輯調(diào)速對(duì)音樂(lè)進(jìn)行節(jié)拍對(duì)齊，這也是個(gè)苦力活，把運(yùn)動(dòng)一幀一幀對(duì)齊音頻的節(jié)拍。

然后...導(dǎo)出成品...End。正好趕在生日當(dāng)天發(fā)出來(lái)。

最后的最后，我想說(shuō)，每次獨(dú)立做一個(gè)大工程（算大了吧...）雖然耗費(fèi)大量時(shí)間精力，確實(shí)可以學(xué)到不少新的知識(shí)，尤其是像我這種非科班的設(shè)計(jì)狗，更喜歡去解決那些技術(shù)上的難題。之所以喜歡做這些，一方面覺(jué)得它有趣，另一方面也在不斷探索自己設(shè)計(jì)上更多的可能吧。我總會(huì)自學(xué)下三維，動(dòng)效應(yīng)用的編程，那些看起來(lái)跟目前工作不相干的，很多人總認(rèn)為UI設(shè)計(jì)師是天天畫(huà)界面畫(huà)icon的,直到某天開(kāi)始，團(tuán)隊(duì)開(kāi)始接觸VR方面/三維方面...原來(lái)自己折騰的東西并不是沒(méi)有價(jià)值的。今后打算繼續(xù)學(xué)習(xí)三維方面，著重在材質(zhì)，三維動(dòng)態(tài)圖形，三維角色，這些方面進(jìn)行一些新的嘗試吧。（臥槽TM你的生活呢？！！）

感謝許欣冉同學(xué)在我遇到難題時(shí)幫忙搜尋了無(wú)數(shù)寶貴的教程資料，感謝divon在字體配樂(lè)方面的幫助以及視頻中給予的修改意見(jiàn)。

如果其他還有問(wèn)題，我后臺(tái)回復(fù)吧，么么噠。以及凌晨三點(diǎn)半了...睡覺(jué)！

未來(lái)會(huì)有更好的片子

I am a designer

I am poupo

「動(dòng)效設(shè)計(jì)三步走」

1. 先學(xué)會(huì)分析：《動(dòng)效丨七何分析法幫你全面分析界面動(dòng)效》
2. 動(dòng)效設(shè)計(jì)方法：《改善你的UX設(shè)計(jì)！值得參考的四個(gè)動(dòng)效使用方法》
3. 提升用戶體驗(yàn)：《5個(gè)小技巧，用動(dòng)效提升界面的用戶體驗(yàn)就這么簡(jiǎn)單》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com