花一個(gè)下午就能搞懂像素畫(huà)動(dòng)畫(huà)原理

像素畫(huà)動(dòng)畫(huà)看著挺玄學(xué)的，別人做的角色跑起來(lái)行云流水，你自己上手就各種僵硬。

其實(shí)沒(méi)那么復(fù)雜。

動(dòng)畫(huà)說(shuō)到底就是一堆圖片按順序播放產(chǎn)生的運(yùn)動(dòng)錯(cuò)覺(jué)，你要做的事情就是讓這堆圖片看起來(lái)像那么回事。

先說(shuō)時(shí)間軸這個(gè)東西，Aseprite里面它就在底部。

每一列就是一張完整的畫(huà)面，叫一幀，有個(gè)編號(hào)。

建新幀最簡(jiǎn)單的方式是按Alt+B，會(huì)在你當(dāng)前幀前面插一個(gè)空白幀。

切換幀可以用逗號(hào)和句號(hào)鍵，或者直接點(diǎn)也行。

還有個(gè)預(yù)覽窗口按F7打開(kāi)，能實(shí)時(shí)看到動(dòng)畫(huà)效果，這個(gè)挺重要的。

快捷鍵記不住也沒(méi)事，大部分人一開(kāi)始也記不住，用鼠標(biāo)在菜單里找一樣能操作。

兩種動(dòng)畫(huà)思路。

一種叫直線(xiàn)前進(jìn)，就是從第一幀往后一幀一幀畫(huà)過(guò)去。

另一種叫姿勢(shì)到姿勢(shì)，先把關(guān)鍵幀畫(huà)好再把中間的補(bǔ)上。

新手入門(mén)的話(huà)直線(xiàn)前進(jìn)會(huì)更順手一些，腦子里不用想太多，跟著感覺(jué)走就行。

先做一個(gè)彈跳球入門(mén)吧。

建一個(gè)32x32的文件，先把第一幀畫(huà)好，可以叫它靜止幀。如果是游戲角色就是站立幀。

它決定了整個(gè)動(dòng)畫(huà)的風(fēng)格走向，后面所有的幀都得跟它保持一致。

畫(huà)好之后復(fù)制這幀，按Alt+N就行，然后把它往上移4個(gè)像素。

接著繼續(xù)復(fù)制，往上移3個(gè)像素、2個(gè)像素、1個(gè)像素，然后在最高點(diǎn)停一幀，再反過(guò)來(lái)往下掉。

這樣你就有了個(gè)最基礎(chǔ)的彈跳效果。

不過(guò)說(shuō)實(shí)話(huà)這個(gè)動(dòng)畫(huà)看著挺呆的，球像是被什么東西彈起來(lái)又落下去，沒(méi)什么生命感。

接下來(lái)就是讓動(dòng)畫(huà)變好看的關(guān)鍵了，調(diào)整時(shí)間節(jié)奏。

右鍵點(diǎn)擊幀編號(hào)選幀屬性，你可以設(shè)置每一幀的持續(xù)時(shí)間。

比如讓球落地的時(shí)候多停一會(huì)兒，設(shè)成300毫秒，這樣就有種球被地面彈起來(lái)的感覺(jué)。

也可以一次選中多幀批量改時(shí)長(zhǎng)，調(diào)整整個(gè)動(dòng)畫(huà)的快慢節(jié)奏挺方便的。

但光調(diào)時(shí)間還不夠，真正讓動(dòng)畫(huà)活起來(lái)的技巧叫擠壓和拉伸。

原理其實(shí)挺直覺(jué)的，物體在運(yùn)動(dòng)方向上拉長(zhǎng)，在垂直方向上壓扁，同時(shí)保持總體積不變。

體積這個(gè)很重要，不然你的球會(huì)看起來(lái)忽大忽小的。

做法可以是在球彈起來(lái)之前加一幀擠壓的，把它水平壓扁一點(diǎn)垂直也縮短一點(diǎn)，這個(gè)叫預(yù)備幀，能讓后面的彈跳動(dòng)作看起來(lái)更有力。

然后球落地的瞬間也加一幀擠壓，這次可以夸張一些沒(méi)問(wèn)題。

最后把球運(yùn)動(dòng)最快的那幾幀在垂直方向拉長(zhǎng)，水平方向壓窄。這樣整個(gè)彈跳動(dòng)畫(huà)就有了彈性，看著舒服多了。

做好的動(dòng)畫(huà)導(dǎo)出也有講究。

發(fā)到網(wǎng)上的話(huà)存成GIF最方便，用文件菜單里的導(dǎo)出功能就行。

如果是給游戲用的，一般存成PNG格式的精靈圖序列或者精靈圖表，Aseprite自帶精靈圖表導(dǎo)出功能，參數(shù)可以調(diào)的東西挺多的。

做完這個(gè)彈跳球之后你可以再試幾個(gè)簡(jiǎn)單的小動(dòng)畫(huà)，對(duì)時(shí)間軸的理解會(huì)加深不少。

剛開(kāi)始學(xué)像素畫(huà)動(dòng)畫(huà)的話(huà)，建議先從這種簡(jiǎn)單的東西上手，別一上來(lái)就搞角色行走循環(huán)，容易把自己搞崩潰。

如果真想深入學(xué)習(xí)動(dòng)畫(huà)原理的話(huà)，Animator Survival Kit 這本書(shū)強(qiáng)烈推薦，基本做動(dòng)畫(huà)的人手一本。