看完本文，前端能快速開(kāi)發(fā)一些H5動(dòng)畫(huà)，設(shè)計(jì)師也能高效地制作出合自己心意的動(dòng)畫(huà)來(lái)讓別人高保真還原，希望能給大家?guī)?lái)一點(diǎn)幫助。

前言

說(shuō)起動(dòng)畫(huà)H5，作為一個(gè)前端，可謂是“又愛(ài)又恨”。愛(ài)的是加上動(dòng)畫(huà)動(dòng)效后H5會(huì)變得生動(dòng)有趣，吸引力Max；恨的是做動(dòng)畫(huà)時(shí)都是一邊在腦海中yy效果，一邊用css、js代碼模擬出來(lái)，既低效又不直觀，正所謂“產(chǎn)品一句話，設(shè)計(jì)一根線，重構(gòu)一身汗”。慶幸的是，你現(xiàn)在看到了這篇文章了，我將結(jié)合實(shí)例來(lái)介紹一下Adobe Animate CC如何高效直觀地實(shí)現(xiàn)動(dòng)畫(huà)效果，并指出一些2018版本新特性。

好戲來(lái)了

首先我們先來(lái)看一個(gè)動(dòng)畫(huà)，大家估一下這個(gè)H5需要做多久時(shí)間？ 答案是一天。

能這么快完成這個(gè)h5，靠的是可視化動(dòng)畫(huà)制作軟件Adobe Animate CC。Adobe Animate CC 前身是Adobe FlashProfessional CC，由于H5的出現(xiàn)，很多以前需要用flash才能實(shí)現(xiàn)的動(dòng)畫(huà)現(xiàn)在也可以用H5來(lái)實(shí)現(xiàn)了，另外flash一直以來(lái)備受不安全的詬病，使得業(yè)界越來(lái)越排斥flash，例如iphone上的網(wǎng)頁(yè)上就不能播放flash。Adobe心想不能就此沒(méi)落啊，于是這個(gè)軟件就順勢(shì)轉(zhuǎn)型，在維持原有 Flash 開(kāi)發(fā)工具基礎(chǔ)上，新增制作H5動(dòng)畫(huà)功能。對(duì)于原flash開(kāi)發(fā)人員來(lái)說(shuō)可以輕松轉(zhuǎn)型，對(duì)于新手來(lái)說(shuō)，這個(gè)軟件也比較容易上手。

在介紹如何做動(dòng)畫(huà)之前，我們先來(lái)熟悉一下軟件的界面：

界面左上方是動(dòng)畫(huà)編輯區(qū)，區(qū)域里有一個(gè)舞臺(tái)，就是我們最終可以看到的動(dòng)畫(huà)區(qū)域，超出舞臺(tái)的內(nèi)容將不會(huì)看到。

右上方是工具欄，大部分都和photoshop的工具挺相似的，在這就先不詳細(xì)展開(kāi)了。工具欄左邊有個(gè)可調(diào)節(jié)數(shù)值的屬性面板，例如目前展示了選中的黃色小圈的位置、寬高等屬性。

左下方是時(shí)間軸編輯區(qū)。動(dòng)畫(huà)之所以能動(dòng)，就是我們指定了它在什么時(shí)間點(diǎn)上顯示什么畫(huà)面。時(shí)間軸里有很多層，上面的層將會(huì)蓋住下面的層。

右下角我拉了一個(gè)代碼編輯面板，常用于通過(guò)代碼控制動(dòng)畫(huà)的播放和暫停，編寫(xiě)點(diǎn)擊物體后的交互邏輯等。

接下來(lái)還有幾個(gè)概念需要先了解一下：

1.關(guān)鍵幀

關(guān)鍵幀用于編輯此刻的動(dòng)畫(huà)狀態(tài)，以下圖為例，我們?cè)诘?0幀添加了一個(gè)關(guān)鍵幀，并調(diào)整了圖形的位置、大小、旋轉(zhuǎn)角度，播放時(shí)會(huì)看到圖形在前9幀都不動(dòng)，而到了關(guān)鍵幀時(shí)就立刻變成了新調(diào)整的狀態(tài)。這可以理解為css3的keyframes里的某個(gè)百分比里的狀態(tài)。

我們可以在兩個(gè)關(guān)鍵幀之間添加動(dòng)作補(bǔ)間，這樣圖片就會(huì)隨著時(shí)間從初始狀態(tài)變化到結(jié)束狀態(tài)。

我們還可以在兩個(gè)形狀之間添加形狀補(bǔ)間，使得他們自然地進(jìn)行形狀變化。

2.圖形graphic和影片剪輯movie clip

這兩類元件在制作動(dòng)畫(huà)時(shí)會(huì)經(jīng)常打交道，這個(gè)需要了解清楚。（敲黑板?。。。?/p>

當(dāng)我們將圖片拖到舞臺(tái)上時(shí)，圖片只是一個(gè)位圖，并沒(méi)有很多諸如創(chuàng)建補(bǔ)間動(dòng)畫(huà)、設(shè)置透明度等編輯功能。

而當(dāng)它轉(zhuǎn)換為圖片元件后，就有了上述的功能了。實(shí)際上，這是在圖片外包了一層，如果雙擊圖片元件，會(huì)進(jìn)入元件內(nèi)部，看到轉(zhuǎn)換前的圖片。在前端開(kāi)發(fā)中，這相當(dāng)于新建了一個(gè)多功能的組件并將圖片賦值到里面。

而影片剪輯就是一個(gè)可動(dòng)的圖形元件，它有自己的時(shí)間軸。例如下圖的氣泡動(dòng)畫(huà)，就是一個(gè)影片剪輯。

元件可以復(fù)用，例如在某個(gè)畫(huà)面需要很多氣泡，只需要將氣泡元件放置多個(gè)到舞臺(tái)上便能實(shí)現(xiàn)。通過(guò)雙擊元件對(duì)里面的畫(huà)面進(jìn)行編輯，將同時(shí)改變所有其他該元件的實(shí)例的畫(huà)面。

一般來(lái)說(shuō)，添加進(jìn)來(lái)的圖片都應(yīng)該轉(zhuǎn)換為圖形元件，如果該圖形元件要?jiǎng)?，就再轉(zhuǎn)換為影片剪輯。在結(jié)構(gòu)上，相當(dāng)于影片剪輯里包了一個(gè)圖形元件，圖形元件再包了一個(gè)圖片。

好，掌握了以上的基礎(chǔ)知識(shí)，接下來(lái)的內(nèi)容就比較容易理解了。那我就開(kāi)始以這個(gè)H5動(dòng)畫(huà)為例，介紹一下部分動(dòng)畫(huà)的制作吧。

實(shí)例示范

吊下來(lái)的蜘蛛：

這是一個(gè)位移動(dòng)畫(huà)，我們?cè)陂_(kāi)始位置和結(jié)束位置將蜘蛛圖形擺放好，再添加一個(gè)運(yùn)動(dòng)漸變就行了。

我們看到例子里蜘蛛的下落有一個(gè)duang一下的彈簧效果，這個(gè)在補(bǔ)間里設(shè)置一下緩動(dòng)函數(shù)就行了。常用緩動(dòng)函數(shù)的選擇是2018版本新增的，個(gè)人感覺(jué)十分實(shí)用。

在H5里，點(diǎn)擊蜘蛛后會(huì)繼續(xù)播放動(dòng)畫(huà)，這個(gè)點(diǎn)擊事件可以讓軟件自動(dòng)生成代碼。選擇蜘蛛圖形，在代碼面板的事件里雙擊需要的事件，軟件便會(huì)立刻生成綁定事件。

我們需要寫(xiě)的只有一句：this.play();

關(guān)于要學(xué)習(xí)的代碼，使用頻率最多的就是這幾句：

//播放

this.[parent.]play();

//暫停

this.[parent.]stop();

//跳到第num幀然后播放

this.[parent.]gotoAndPlay(num);

//跳到第num幀然后暫停

this.[parent.]gotoAndStop(num);

大部分的動(dòng)畫(huà)內(nèi)容都可以看作是位移、縮放、旋轉(zhuǎn)的運(yùn)動(dòng)漸變，因此只要掌握了這幾個(gè)操作，恭喜你已經(jīng)可以勝任一些基本動(dòng)畫(huà)了。

彩色場(chǎng)景的轉(zhuǎn)換：

這兒主要使用了遮罩和形狀漸變。首先在彩色場(chǎng)景圖層上面新建一個(gè)遮罩層，然后在遮罩層做一個(gè)圓形圖案逐漸放大的形狀漸變就行了。

遮罩在這個(gè)H5動(dòng)畫(huà)里用得比較多，仔細(xì)觀察，會(huì)發(fā)現(xiàn)開(kāi)始的打字效果、紅包下落至消失不見(jiàn)那一刻、在沸騰的水中上下竄動(dòng)的紅包、伸舌頭等地方都用上了遮罩效果。

氣泡效果的實(shí)現(xiàn)：

這兒主要做了一個(gè)氣泡放大然后消失不見(jiàn)的動(dòng)畫(huà)，需要注意的是要將放大的準(zhǔn)心往下移，這樣才符合實(shí)際生活。在氣泡最大化后，需要多插上一段空白關(guān)鍵幀，表示氣泡爆破后的一小段空白期。

畫(huà)面上有多個(gè)氣泡，我是用前面說(shuō)的復(fù)用元件的方法去實(shí)現(xiàn)的，此外需再調(diào)整各個(gè)元件實(shí)例的位置和大小，以模擬實(shí)際氣泡的不規(guī)則性。

為了讓氣泡整體看起來(lái)沸騰得更自然，我給各個(gè)元件實(shí)例命了名，并用一個(gè)隨機(jī)函數(shù)控制元件動(dòng)畫(huà)的播放。

function bubbleAni(){

//這次將會(huì)有num個(gè)氣泡隨機(jī)冒出

var num = parseInt(Math.random()*7);

for(var i=0;i<="" p="">

var target = “bubble” parseInt(Math.random()*8 1);

var nextTime = parseInt(Math.random()*100);

setTimeout(function(){

_this[target].play();

},nextTime);

}

//下一次的冒泡時(shí)間

var nextTime2 = parseInt(Math.random()*200);

setTimeout(function(){

bubbleAni();

},nextTime2);

}

bubbleAni();

測(cè)試動(dòng)畫(huà)

做動(dòng)畫(huà)的過(guò)程中，我們可以通過(guò)菜單欄的control->Test將動(dòng)畫(huà)放到瀏覽器里看效果。通過(guò)調(diào)試生成的h5，我們可以發(fā)現(xiàn)Animate CC是在canvas上通過(guò)createjs引擎繪制動(dòng)畫(huà)的。關(guān)于createjs，大家可以看看其中文社區(qū) 、或者ajex的博客來(lái)了解更多。

發(fā)布動(dòng)畫(huà)

完成動(dòng)畫(huà)后，就是將動(dòng)畫(huà)發(fā)布成網(wǎng)頁(yè)了。通過(guò)file->publish就可以發(fā)布，軟件會(huì)在動(dòng)畫(huà)源文件所在目錄導(dǎo)出html、js、css等資源文件。要查看導(dǎo)出效果，可以直接雙擊html打開(kāi)，但遇到點(diǎn)擊事件時(shí)會(huì)報(bào)跨域之類的安全錯(cuò)誤。要解決這個(gè)問(wèn)題，只要將所有文件放在服務(wù)器里再訪問(wèn)就可以了。

性能優(yōu)化

當(dāng)我們?cè)陔娔X上辛辛苦苦地做完動(dòng)畫(huà)后，看著電腦瀏覽器上自己做出來(lái)的賞心悅目的動(dòng)畫(huà)，心里的成就感不禁冉冉上升。接著再當(dāng)你滿心歡喜地拿起安卓手機(jī)欣賞動(dòng)畫(huà)時(shí)，頓時(shí)就暈了：為什么會(huì)卡得那么慘不忍睹？莫急莫急，你該再次慶幸現(xiàn)在看到了這篇文章，讓我慢慢道來(lái)，給你一些優(yōu)化建議吧。

在Animate CC里制作動(dòng)畫(huà)是有fps的概念的，即每秒播放多少幀。在js里我們一般怎樣控制幀率呢？沒(méi)錯(cuò)，就是setTimeout或者setInterval，也正是這個(gè)原因，動(dòng)畫(huà)在安卓機(jī)里播放卡頓。解決辦法就是換用requestanimationframe播放，在fnStartAnimation方法里添加createjs.Ticker.timingMode = createjs.Ticker.RAF。

fnStartAnimation = function() {

createjs.Ticker.setFPS(lib.properties.fps);

createjs.Ticker.addEventListener(“tick”, stage);

//默認(rèn)的設(shè)置

//createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

//建議設(shè)置

createjs.Ticker.timingMode = createjs.Ticker.RAF;

customHandleComplete();

}

由于requestanimationframe動(dòng)畫(huà)一般是60幀每秒，因此只要先將fps調(diào)成60再開(kāi)始制作動(dòng)畫(huà)就可以了。Animate CC 2018 在時(shí)間軸上新增了秒數(shù)的顯示，大大方便了制作動(dòng)畫(huà)時(shí)的時(shí)間考慮，不用再像以前那樣用當(dāng)前幀除以fps來(lái)估算目前在什么時(shí)間點(diǎn)。

在一次動(dòng)畫(huà)測(cè)試中，我發(fā)現(xiàn)制作的動(dòng)畫(huà)在手機(jī)上越來(lái)越卡。使用chrome的memory檢測(cè)后，發(fā)現(xiàn)了有內(nèi)存泄露，且上升速度很快。在查閱了相關(guān)資料后，我認(rèn)為一些默認(rèn)的導(dǎo)出設(shè)置不太合理，例如雪碧圖尺寸太大，竟然有81928192。于是我將雪碧圖改為1024*1024（當(dāng)位置不夠放時(shí)，會(huì)自動(dòng)創(chuàng)建新的雪碧圖來(lái)存放，所以也不用擔(dān)心），并更改了雪碧圖按jpg和png分開(kāi)放、不導(dǎo)出無(wú)用的資源等設(shè)置，具體改為下圖：

經(jīng)調(diào)整后，內(nèi)存占用沒(méi)有快速攀升，而是比較穩(wěn)定了，占用內(nèi)存更小了，動(dòng)畫(huà)也不會(huì)越來(lái)越卡了，優(yōu)化成功！

不過(guò)以我目前做動(dòng)畫(huà)的經(jīng)驗(yàn)來(lái)看，做了上面2點(diǎn)優(yōu)化方案，就可以比較流暢了。

總結(jié)

不知大家看完后是否對(duì)這個(gè)制作動(dòng)畫(huà)的方式產(chǎn)生興趣呢？本文首先通過(guò)指出大家寫(xiě)代碼做動(dòng)畫(huà)時(shí)的痛點(diǎn)和難點(diǎn)，提出了使用Animate CC來(lái)高效直觀地制作動(dòng)畫(huà)的方案，接著結(jié)合實(shí)例對(duì)一些常用的動(dòng)畫(huà)效果進(jìn)行制作示范，并提供一些實(shí)用的優(yōu)化建議。希望大家看完后能比較清晰地了解和入門(mén)這個(gè)軟件，給大家?guī)?lái)一些幫助，friend黎噶嘛。

需要這款軟件的伙伴們 加群領(lǐng)取。

對(duì)于UI設(shè)計(jì)，你是否還是處于一知半解，沒(méi)有頭緒，處于迷茫的境界呢？
沒(méi)關(guān)系，無(wú)論你是什么基礎(chǔ)，無(wú)論是把UI作為愛(ài)好，還是想轉(zhuǎn)行，都可以加入QQ群【704761523】，和大家一起學(xué)習(xí)提升自己

每天提供UI設(shè)計(jì)教程來(lái)學(xué)習(xí)。
無(wú)論是軟件技能方面，還是設(shè)計(jì)理論。
大家加油~