頭條楓林網
文章摘要： 大家估一下這個 H5 需要做多久時間遮罩在這個 H5動畫裡用得比較多
看完本文，前端能快速開發一些 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
這兩類元件在製作動畫時會經常打交道，這個需要了解清楚。（敲黑板！）
當我們將圖片拖到舞臺上時，圖片只是一個位圖，並沒有很多諸如建立補間動畫、設定透明度等編輯功能。
而當它轉換為圖片元件後，就有了上述的功能了。實際上，這是在圖片外包了一層，如果雙擊圖片元件，會進入元件內部，看到轉換前的圖片。在前端開發中，這相當於新建了一個多功能的元件並將圖片賦值到裏面。
而影片剪輯就是一個可動的圖形元件，它有自己的時間軸。例如下圖的氣泡動畫，就是一個影片剪輯。
元件可以複用，例如在某個畫面需要很多氣泡，只需要將氣泡元件放置多個到舞臺上便能實現。通過雙擊元件對裏面的畫面進行編輯，將同時改變所有其他該元件的例項的畫面。
一般來說，新增進來的圖片都應該轉換為圖形元件，如果該圖形元件要動，就再轉換為影片剪輯。在結構上，相當於影片剪輯裡包了一個圖形元件，圖形元件再包了一個圖片。
好，掌握了以上的基礎知識，接下來的內容就比較容易理解了。那我就開始以這個 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
三、測試動畫
做動畫的過程中，我們可以通過選單欄的 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頁面實戰案例」