今天的動(dòng)態(tài)LOGO的設(shè)計(jì)，靈感來源于手游“節(jié)奏大師”的開場(chǎng)片頭。然后，俺就飛快地動(dòng)手仿制了一個(gè)。接著，就順手寫了這個(gè)3分鐘的教程。
設(shè)計(jì)動(dòng)態(tài)LOGO，其實(shí)最難的是動(dòng)畫的設(shè)計(jì)規(guī)劃，好在我們有現(xiàn)成的模板，可以直接跳過這一步，進(jìn)行到技術(shù)層面，來討論怎么完成這樣一個(gè)兩秒的動(dòng)畫了。
這個(gè)動(dòng)畫里有兩個(gè)關(guān)鍵點(diǎn)。
一個(gè)是小球的運(yùn)行軌跡動(dòng)作。關(guān)鍵是要做出符合物理規(guī)律的運(yùn)動(dòng)感。
二是幾個(gè)文字的跳動(dòng)出現(xiàn)的效果。關(guān)鍵是模仿彈簧壓扁后又恢復(fù)的感覺。
下面就一步一步來實(shí)現(xiàn)這些效果吧。
首先搭建好框架，然后再慢慢琢磨細(xì)節(jié)。
第一步，畫一個(gè)小圓，分別輸入輕松學(xué)動(dòng)畫幾個(gè)字，每個(gè)字一個(gè)單獨(dú)的文本框。放置好LOGO和英文字母的位置。因?yàn)檫@里L(fēng)OGO上的火焰部分我要單獨(dú)動(dòng)畫，所以單獨(dú)拆分為一個(gè)部分。
第二步，添加小球的運(yùn)動(dòng)軌跡。
選中小球以后，為小球添加從高處拋物線下落以及在每個(gè)字上面的彈跳軌跡。以及最后弧線繞到LOGO火焰部分的軌跡。
為了控制小球彈跳以及文字出現(xiàn)的時(shí)間關(guān)聯(lián)效果，每次彈跳的弧形軌跡要分別添加。方法在動(dòng)畫菜單下【添加動(dòng)畫】-【動(dòng)作路徑】-【自定義路徑】，分別繪制一條大拋物線，四條弧形軌跡以及最后一個(gè)上升的弧形軌跡。
運(yùn)動(dòng)軌跡有了，下面就是關(guān)鍵步驟一，為小球的設(shè)定符合物理效果運(yùn)動(dòng)效果。
第一個(gè)拋物線，回想一下中學(xué)物理，應(yīng)該是從速度為零開始逐漸加速。所以，選中該軌跡，先將持續(xù)時(shí)間修改為0.25秒，打開效果設(shè)定，將平滑開始設(shè)置為0，平滑結(jié)束設(shè)置為0.25秒，這個(gè)意味著在這0.25秒內(nèi)小球處于先慢后快的加速狀態(tài)。
到了后面幾個(gè)弧形的軌跡效果又不一樣了。繼續(xù)回憶中學(xué)物理。一個(gè)物體彈跳拋物線速度是一開始速度最大，隨著高度增加，垂直速度逐漸減少為零，然后開始下降，到達(dá)地面時(shí)速度又恢復(fù)到初始速度。所以拋物線的運(yùn)行速度是快—慢—快這樣一個(gè)過程。所以我們先將第一個(gè)軌跡運(yùn)行時(shí)間設(shè)置為0.2秒，平滑開始和平滑結(jié)束應(yīng)該是這樣的：
通過平滑開始和平滑結(jié)束的時(shí)間設(shè)置，我們就實(shí)現(xiàn)了符合重力學(xué)的運(yùn)動(dòng)效果。余下的3個(gè)弧形彈跳軌跡也同樣設(shè)置。最后，再為小球向上的運(yùn)動(dòng)軌跡的同時(shí)添加一個(gè)漸變消失的效果。這時(shí)候動(dòng)畫窗格中的效果應(yīng)該是這樣的。
搞定了小球的彈跳運(yùn)動(dòng)，下面就是文字出現(xiàn)的彈簧效果了。以第一個(gè)字為例。首先添加【出現(xiàn)】的動(dòng)畫效果。然后添加彈簧形變效果。
一個(gè)固體如果壓扁的話，會(huì)產(chǎn)生兩個(gè)方向的變形。
一個(gè)是垂直方向的壓縮，一個(gè)是水平方向的擴(kuò)張。
而在動(dòng)畫效果的【強(qiáng)調(diào)】—【放大/縮小】中恰好可以在這兩個(gè)維度上進(jìn)行單獨(dú)設(shè)置。
所以我們先為“輕”字添加水平方向的擴(kuò)張和垂直方向的壓縮，比例分別為120%和80%
在壓縮以后，字體會(huì)彈回原來的樣子。這樣就反過來，再為“輕”字添加垂直方向的擴(kuò)張和水平方向的收縮。因?yàn)檫@個(gè)放大縮小的比例是在第一次壓縮以后的大小基礎(chǔ)上，所以要恢復(fù)原樣，水平的收縮設(shè)定為75%，垂直方向設(shè)定為125%。這兩個(gè)動(dòng)畫效果是同時(shí)的，因?yàn)樽冃螘r(shí)間很短，可以設(shè)定持續(xù)時(shí)間為0.1秒。這兩個(gè)個(gè)恢復(fù)的效果作為一個(gè)同時(shí)的整體，緊隨上一個(gè)壓縮的后面。
現(xiàn)在把文字彈簧壓縮的變形效果播放一下，已經(jīng)出來了。然后用動(dòng)畫刷功能，在剩下的文字上面一個(gè)一個(gè)刷過去吧。
第三步，基礎(chǔ)的動(dòng)畫設(shè)置完成了。下面要開始調(diào)節(jié)動(dòng)畫的順序了。建議在動(dòng)畫窗格中選中所有的動(dòng)畫，將【開始】全部修改為“與上一動(dòng)畫同時(shí)”。
為何要這樣設(shè)置呢？因?yàn)樾薷臑榕c上一動(dòng)畫同時(shí)，我們可以通過延時(shí)設(shè)置來控制動(dòng)畫的開始時(shí)點(diǎn)而不受前后動(dòng)畫的影響。
其實(shí)動(dòng)畫的流程分兩個(gè)部分。一個(gè)部分是小球依次從5個(gè)字“輕松學(xué)圖表”上彈跳過去。另一個(gè)部分是“輕松學(xué)圖表”5個(gè)字依次按小球彈跳的時(shí)點(diǎn)一彈簧變形的方式出現(xiàn)。兩部分動(dòng)畫的時(shí)間軸是獨(dú)立設(shè)置的。
所以第一文字“輕”與第一個(gè)弧形軌跡的關(guān)系式這樣的：
換成文字描述，就是小球落到“輕”的位置時(shí)，“輕”字彈簧變形出現(xiàn)。這時(shí)候
要注意的是，小球第二個(gè)彈跳軌跡的是緊接在第二個(gè)彈跳軌跡之后，而不是在文字出現(xiàn)以后，所以，在“輕”字動(dòng)畫效果出現(xiàn)的時(shí)候，小球依然毫不停頓繼續(xù)向下一個(gè)“松”字跳過去。第二個(gè)彈跳軌跡的延時(shí)時(shí)間應(yīng)該是0.25秒。以此類推，將各個(gè)動(dòng)畫的時(shí)間點(diǎn)設(shè)置好。
最后為火焰添加縮放出現(xiàn)的效果即可。
如果感覺動(dòng)畫邏輯太復(fù)雜的話，可以點(diǎn)擊最下方的【閱讀原文】查看源文件。
回顧一下：
今天的動(dòng)畫雖然只有2秒，但是值得注意的問題不少。
首先要注意的是小球的彈跳要符合重力特征。
其次是幾個(gè)文字彈簧出現(xiàn)的效果也要符合物理變形的特點(diǎn)。當(dāng)然，如果還要進(jìn)一步摳細(xì)節(jié)的話，我們還可以為小球添加彈跳時(shí)的壓縮變形的效果。
但是越細(xì)致的動(dòng)畫就越容易出問題，特別是像這種有多不同時(shí)間軸的動(dòng)畫，一開始理清動(dòng)畫邏輯，然后利用【從上一項(xiàng)開始】和【延時(shí)】的組合，就可以輕松搞定。
本文來自秋葉語錄的微信公眾平臺(tái)，版權(quán)歸秋葉語錄所有。若網(wǎng)頁版不便于你學(xué)習(xí)，你可以用微信添加秋葉語錄關(guān)注，微信號(hào)：ppt100
]]>