一種基于AnimateCC+Canvas的隨機(jī)粒子動(dòng)畫效果設(shè)計(jì)

潘博

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

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

中圖分類號(hào)： TP37? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）16-0211-02

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

1 Animate CC與Canvas簡(jiǎn)介

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

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

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

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

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

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

2 單個(gè)粒子動(dòng)畫制作

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

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

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

4 效果變化與拓展

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

5 結(jié)語(yǔ)

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

參考文獻(xiàn)：

[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)編輯：唐一東】