看完本文，前端能快速開發一些 H5動畫，設計師也能高效地制作出合自己心意的動畫來讓別人高保真還原，希望能給大家帶來一點幫助。

前言

說起動畫H5，作為一個前端，可謂是「又愛又恨」。愛的是加上動畫動效后 H5會變得生動有趣，吸引力 Max；恨的是做動畫時都是一邊在腦海中 yy效果，一邊用 css、js代碼模擬出來，既低效又不直觀，正所謂「產品一句話，設計一根線，重構一身汗」。慶幸的是，你現在看到了這篇文章了，我將結合實例來介紹一下 Adobe Animate CC 如何高效直觀地實現動畫效果，并指出一些2018版本新特性。

一、好戲來了

首先我們先來看一個動畫，大家估一下這個 H5 需要做多久時間？ 答案是一天。

能這么快完成這個 h5，靠的是可視化動畫制作軟件 Adobe Animate CC。Adobe Animate CC 前身是 Adobe FlashProfessional CC，由于 H5 的出現，很多以前需要用 flash 才能實現的動畫現在也可以用 H5 來實現了，另外 flash 一直以來備受不安全的詬病，使得業界越來越排斥 flash，例如 iphone 上的網頁上就不能播放 flash。Adobe 心想不能就此沒落啊，于是這個軟件就順勢轉型，在維持原有 Flash 開發工具基礎上，新增制作 H5動畫功能。對于原 flash 開發人員來說可以輕松轉型，對于新手來說，這個軟件也比較容易上手。

在介紹如何做動畫之前，我們先來熟悉一下軟件的界面：

界面左上方是動畫編輯區，區域里有一個舞臺，就是我們最終可以看到的動畫區域，超出舞臺的內容將不會看到。

右上方是工具欄，大部分都和 photoshop 的工具挺相似的，在這就先不詳細展開了。工具欄左邊有個可調節數值的屬性面板，例如目前展示了選中的黃色小圈的位置、寬高等屬性。

左下方是時間軸編輯區。動畫之所以能動，就是我們指定了它在什么時間點上顯示什么畫面。時間軸里有很多層，上面的層將會蓋住下面的層。

右下角我拉了一個代碼編輯面板，常用于通過代碼控制動畫的播放和暫停，編寫點擊物體后的交互邏輯等。

接下來還有幾個概念需要先了解一下：

1. 關鍵幀

關鍵幀用于編輯此刻的動畫狀態，以下圖為例，我們在第10幀添加了一個關鍵幀，并調整了圖形的位置、大小、旋轉角度，播放時會看到圖形在前9幀都不動，而到了關鍵幀時就立刻變成了新調整的狀態。這可以理解為 css3 的 keyframes 里的某個百分比里的狀態。

我們可以在兩個關鍵幀之間添加動作補間，這樣圖片就會隨著時間從初始狀態變化到結束狀態。

我們還可以在兩個形狀之間添加形狀補間，使得他們自然地進行形狀變化。

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

這兩類元件在制作動畫時會經常打交道，這個需要了解清楚。（敲黑板?。?/p>

當我們將圖片拖到舞臺上時，圖片只是一個位圖，并沒有很多諸如創建補間動畫、設置透明度等編輯功能。

而當它轉換為圖片元件后，就有了上述的功能了。實際上，這是在圖片外包了一層，如果雙擊圖片元件，會進入元件內部，看到轉換前的圖片。在前端開發中，這相當于新建了一個多功能的組件并將圖片賦值到里面。

而影片剪輯就是一個可動的圖形元件，它有自己的時間軸。例如下圖的氣泡動畫，就是一個影片剪輯。

元件可以復用，例如在某個畫面需要很多氣泡，只需要將氣泡元件放置多個到舞臺上便能實現。通過雙擊元件對里面的畫面進行編輯，將同時改變所有其他該元件的實例的畫面。

一般來說，添加進來的圖片都應該轉換為圖形元件，如果該圖形元件要動，就再轉換為影片剪輯。在結構上，相當于影片剪輯里包了一個圖形元件，圖形元件再包了一個圖片。

好，掌握了以上的基礎知識，接下來的內容就比較容易理解了。那我就開始以這個 H5動畫為例，介紹一下部分動畫的制作吧。

二、實例示范

1. 吊下來的蜘蛛

這是一個位移動畫，我們在開始位置和結束位置將蜘蛛圖形擺放好，再添加一個運動漸變就行了。

我們看到例子里蜘蛛的下落有一個 duang 一下的彈簧效果，這個在補間里設置一下緩動函數就行了。常用緩動函數的選擇是2018版本新增的，個人感覺十分實用。

在 H5 里，點擊蜘蛛后會繼續播放動畫，這個點擊事件可以讓軟件自動生成代碼。選擇蜘蛛圖形，在代碼面板的事件里雙擊需要的事件，軟件便會立刻生成綁定事件。

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

關于要學習的代碼，使用頻率最多的就是這幾句：

//播放
this.[parent.]play();
//暫停
this.[parent.]stop();
//跳到第num幀然后播放
this.[parent.]gotoAndPlay(num);
//跳到第num幀然后暫停
this.[parent.]gotoAndStop(num);

大部分的動畫內容都可以看作是位移、縮放、旋轉的運動漸變，因此只要掌握了這幾個操作，恭喜你已經可以勝任一些基本動畫了。

2. 彩色場景的轉換

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

遮罩在這個 H5動畫里用得比較多，仔細觀察，會發現開始的打字效果、紅包下落至消失不見那一刻、在沸騰的水中上下竄動的紅包、伸舌頭等地方都用上了遮罩效果。

3. 氣泡效果的實現

這兒主要做了一個氣泡放大然后消失不見的動畫，需要注意的是要將放大的準心往下移，這樣才符合實際生活。在氣泡最大化后，需要多插上一段空白關鍵幀，表示氣泡爆破后的一小段空白期。

畫面上有多個氣泡，我是用前面說的復用元件的方法去實現的，此外需再調整各個元件實例的位置和大小，以模擬實際氣泡的不規則性。

為了讓氣泡整體看起來沸騰得更自然，我給各個元件實例命了名，并用一個隨機函數控制元件動畫的播放。

function bubbleAni(){
 //這次將會有num個氣泡隨機冒出
 var num = parseInt(Math.random()*7);
 for(var i=0;i<num;i++){
 var target = "bubble"+parseInt(Math.random()*8+1);
 var nextTime = parseInt(Math.random()*100);
 setTimeout(function(){
 _this[target].play();
 },nextTime);
 }
 //下一次的冒泡時間
 var nextTime2 = parseInt(Math.random()*200);
 setTimeout(function(){
 bubbleAni();
 },nextTime2);
}
bubbleAni();

三、測試動畫

做動畫的過程中，我們可以通過菜單欄的 control->Test 將動畫放到瀏覽器里看效果。通過調試生成的 h5，我們可以發現 Animate CC 是在 canvas 上通過 createjs 引擎繪制動畫的。關于 createjs，大家可以看看其中文社區 、或者 ajex 的博客來了解更多。

四、發布動畫

完成動畫后，就是將動畫發布成網頁了。通過 file->publish 就可以發布，軟件會在動畫源文件所在目錄導出 html、js、css 等資源文件。要查看導出效果，可以直接雙擊 html 打開，但遇到點擊事件時會報跨域之類的安全錯誤。要解決這個問題，只要將所有文件放在服務器里再訪問就可以了。

五、性能優化

當我們在電腦上辛辛苦苦地做完動畫后，看著電腦瀏覽器上自己做出來的賞心悅目的動畫，心里的成就感不禁冉冉上升。接著再當你滿心歡喜地拿起安卓手機欣賞動畫時，頓時就暈了：為什么會卡得那么慘不忍睹？莫急莫急，你該再次慶幸現在看到了這篇文章，讓我慢慢道來，給你一些優化建議吧。

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

fnStartAnimation = function() {
 createjs.Ticker.setFPS(lib.properties.fps);
 createjs.Ticker.addEventListener("tick", stage);
 //默認的設置
 //createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
 //建議設置
 createjs.Ticker.timingMode = createjs.Ticker.RAF; 
 customHandleComplete();
}

由于 requestanimationframe 動畫一般是60幀每秒，因此只要先將 fps 調成60再開始制作動畫就可以了。Animate CC 2018 在時間軸上新增了秒數的顯示，大大方便了制作動畫時的時間考慮，不用再像以前那樣用當前幀除以 fps 來估算目前在什么時間點。

在一次動畫測試中，我發現制作的動畫在手機上越來越卡。使用 chrome 的 memory 檢測后，發現了有內存泄露，且上升速度很快。在查閱了相關資料后，我認為一些默認的導出設置不太合理，例如雪碧圖尺寸太大，竟然有81928192。于是我將雪碧圖改為1024*1024（當位置不夠放時，會自動創建新的雪碧圖來存放，所以也不用擔心），并更改了雪碧圖按 jpg 和 png 分開放、不導出無用的資源等設置，具體改為下圖：

經調整后，內存占用沒有快速攀升，而是比較穩定了，占用內存更小了，動畫也不會越來越卡了，優化成功！

ajex的博客有一篇《createjs性能優化》，大家可以看看。不過以我目前做動畫的經驗來看，做了上面2點優化方案，就可以比較流暢了。

總結

不知大家看完后是否對這個制作動畫的方式產生興趣呢？本文首先通過指出大家寫代碼做動畫時的痛點和難點，提出了使用 Animate CC 來高效直觀地制作動畫的方案，接著結合實例對一些常用的動畫效果進行制作示范，并提供一些實用的優化建議。希望大家看完后能比較清晰地了解和入門這個軟件，給大家帶來一些幫助。

「H5頁面實戰案例」

• 《H5玩法知多少？騰訊超多實戰案例讓你大開眼界！》
• 《新人想要入場視頻類H5 設計？你需要了解這些》
• 《用這個方法，輕松提高H5動畫的開發效率！》