一種基于AnimateCC+Canvas的隨機粒子動畫效果設計

潘博

摘要：粒子動畫是一種應用廣泛的動畫效果，也有不同的制作方法。Animate CC是Flash的延續和發展，在動畫制作方面功能強大，而Canvas是HTML5在網頁中繪制圖形、制作動畫的核心元素。本文通過描述動畫制作、代碼編輯、效果拓展幾個環節，介紹了一種基于Animate CC+Canvas的粒子動畫制作方法，以求簡單、高效地制作粒子動畫，并能跨平地展示、應用。

關鍵詞：Animate;Canvas;粒子動畫;HTML5

中圖分類號： TP37? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2020）16-0211-02

粒子動畫是動畫、視頻和特效中常用的一種動畫效果，如雨、雪、花瓣飛舞、煙花等動畫都可以看作是粒子動畫，在網頁特效和MG動畫里面也經常能看到各種粒子動畫效果，這些粒子動畫因其良好視覺沖擊力，往往容易吸引人的眼球。粒子動畫的制作方法很多，如使用HTML5+Canvas或JavaScript等篇寫代碼實現，3dsmax、Maya或Cinema 4D制作3D粒子動畫，After Effects使用表達式制作粒子特效等等。這些方法往往伴隨著復雜的代碼編寫，或者制作的粒子效果不易拓展。本文另辟蹊徑，介紹一種基于Animate CC+Canvas的粒子動畫制作方法。這種方法先在Animate CC里制作單個粒子動畫，通過腳本編輯形成多個粒子效果。

1 Animate CC與Canvas簡介

Flash動畫因其制作簡單、功能強大，曾經在PC互聯網時代大行其道，但隨著移動互聯網的廣泛應用和智能手機的普及，Flash安全性方面的問題越來越突出，于是逐漸退出了互聯網江湖，Adobe轉而推出了Animate CC。Animate CC實際是Flash在移動互聯網時代的延續和發展，相比于其他網頁動畫制作方法，它具有以下幾點優勢：

1.制作流程完整，用戶基礎龐大。因為Animate CC繼承于Flash，保留了Flash操作簡單、矢量化、交互功能強大等優點，從繪圖、動畫制作、音視頻支持、腳本編寫到輸出，具有完整的制作流程。而且Flash的用戶群非常龐大，可以快速適應Animate CC的使用。

2.代碼編寫量小。因為Animate CC是基本時間軸的動畫制作方式，無須編寫代碼就可以生成動畫，即便帶有交互功能的動畫，利用軟件提供的代碼片段也能輕松實現，相比HTML5+Canvas或JavaScript等全代碼實現方式，對非程序設計人員來講友好很多。

3.支持跨平臺輸出。Animate CC既可以將動畫發布成傳統的swf和視頻文檔，輸出到傳統PC平臺，也可以利用Canvas將時間軸動畫發布成網頁格式（html+Javascript）文件輸出到移動端，實現同一個時間軸動畫跨平臺輸出不同的格式文件。

Animate CC 使用 CreateJS 庫和Canvas文檔發布跨平臺的HTML5 內容。CreateJS 是一個模塊化的庫和工具套件，它集成在了Animate CC中，支持通過 HTML5 開放的 Web 技術創建豐富的交互性內容1。Canvas 是 HTML5 中的一個新元素，可以動態生成及渲染圖形、圖表、圖像及動畫。Animate 中新增了一種文檔類型 HTML5 Canvas，它對創建豐富的交互性 HTML5 內容提供本地支持，即通過創建HTML5 Canvas文檔并制作時間軸動畫，可以生成跨平臺的HTML5輸出2。

綜上所述，將Aniamte CC和Canvas結合起來，是很適合制作可跨平臺呈現的粒子動畫的，下面介紹具體制作過程。

2 單個粒子動畫制作

為了減少代碼編寫量，可先在Animate CC中制作一顆粒子的運動動畫。建一個HTML5 Canvas文檔，先繪制一顆粒子，如一個小圓形或小矩形、雪花形狀等都可以，將其轉換為元件放置在元件庫中。再新建一個影片剪輯元件，將剛才的粒子元件放在其中。使用引導層動畫或補間動畫的形式，給粒子制作一段沿弧線緩慢移動的動畫，向上或向下都可以，可以添加緩動、旋轉和透明度變化等效果。時間軸及畫面效果如圖1所示：

在元件庫中，給影片剪輯設置一個鏈接并命名，如“dot”，即把這個單顆粒子動畫定義為一個類，目的在于供后面代碼使用。至此，單個粒子動畫制作完成。此時舞臺上沒有任何對象，對象及動畫都在庫中。

3 代碼編寫，效果實現

4 效果變化與拓展

將以上影片剪輯和代碼稍加改變，即可生成更加豐富多樣的粒子動畫效果，如將粒子圖形改為閃爍的漸變圓點，可模仿螢火蟲飛舞;將粒子圖形改為雪花，并將粒子起點Y軸坐標設置為0，縮放量設置為-scale，可模仿雪花飛舞;將粒子改為花瓣和樹葉，又可模仿花飛葉舞的效果;將粒子運動起點集中在一個點并向四周擴散，可形成煙花效果等，如圖3所示。

5 結語

粒子動畫的效果和制作方法千萬種，制作難度和適用場景各異。本文介紹的這種Animate CC+HTML5 Canvas結合的方法比較適合一般的動畫設計人員，沒有復雜的邏輯結構，無須編寫大量代碼，稍加改變可衍生出豐富多樣的粒子效果，應該是一種可廣泛使用的方法。

參考文獻：

[1] ABOUT CREATEJS. CreateJS. http：//www.createjs.com/#！ /CreateJS

[2] Adobe 官方網站，在Animate CC中創建和發布 HTML5 Canvas 文檔，https：//helpx.adobe.com/cn/animate/using/creating-publishing-html5-canvas-document.html

【通聯編輯：唐一東】