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

潘博

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

關(guān)鍵詞：Animate;Canvas;粒子動畫;HTML5

中圖分類號： TP37? ? ? ? 文獻標(biāo)識碼：A

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

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

1 Animate CC與Canvas簡介

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

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

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

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

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

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

2 單個粒子動畫制作

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

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

3 代碼編寫，效果實現(xiàn)

4 效果變化與拓展

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

5 結(jié)語

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

參考文獻：

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

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

【通聯(lián)編輯：唐一東】