2017-1-23 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
Janilychen：以往做一些H5的運(yùn)營(yíng)項(xiàng)目，都是動(dòng)畫設(shè)計(jì)師使用Animate cc（原來(lái)的Flash）先設(shè)計(jì)好動(dòng)畫原型，然后交給我們UI開(kāi)發(fā)來(lái)實(shí)現(xiàn)。做過(guò)動(dòng)畫開(kāi)發(fā)的童鞋都知道動(dòng)畫開(kāi)發(fā)都是比較耗費(fèi)時(shí)間精力的，而且還要高質(zhì)量的還原動(dòng)畫設(shè)計(jì)師設(shè)計(jì)好的動(dòng)畫，來(lái)回溝通成本也非常高。
那有沒(méi)有一種的方法來(lái)改善這種流程，提高開(kāi)發(fā)效率的同時(shí)還能完成高品質(zhì)的動(dòng)畫呢？
經(jīng)過(guò)一段時(shí)間的摸索，發(fā)現(xiàn)AnimateCC（就是原來(lái)的Flash）可以導(dǎo)出canvas動(dòng)畫，而且是基于createjs這個(gè)開(kāi)發(fā)輕量級(jí)游戲的js庫(kù)的，非常適合用來(lái)做移動(dòng)端的一些h5動(dòng)畫。不僅縮短制作動(dòng)畫所需要的時(shí)間。同時(shí)它也是一個(gè)可視化的IDE，不需要編寫代碼就可以完成高品質(zhì)的動(dòng)畫效果；還可以通過(guò)Javascript，為動(dòng)畫效果添加交互性。
比如下面這一頁(yè)動(dòng)畫，如果使用傳統(tǒng)的html css3的動(dòng)畫開(kāi)發(fā)或者是canvas方式來(lái)硬寫代碼來(lái)實(shí)現(xiàn)，切圖加上動(dòng)畫開(kāi)發(fā)沒(méi)有一天應(yīng)該是搞不定的；而使用AnimateCC導(dǎo)出配合自己寫一點(diǎn)點(diǎn)代碼，一兩個(gè)小時(shí)就可以搞定。
開(kāi)始之前先來(lái)了解下Animate CC中做動(dòng)畫的概念。
幀頻
是指每秒鐘放映或顯示的幀或圖像的數(shù)量，這個(gè)數(shù)值設(shè)置越大，動(dòng)畫越快，但同時(shí)也是性能消耗大戶，一般設(shè)置24幀就可以了。
圖形與影片剪輯
我們可以將單獨(dú)的動(dòng)畫，放到一個(gè)獨(dú)立的影片剪輯里，這樣可以更好的控制動(dòng)畫。幾個(gè)獨(dú)立的剪片剪輯，可以組成一個(gè)完整的動(dòng)畫。
當(dāng)我們把圖片從資源庫(kù)拖到舞臺(tái)時(shí)，它這個(gè)時(shí)候，只是普通的位圖，并不能做補(bǔ)幀動(dòng)畫，所以我們必須把它轉(zhuǎn)換成元件。
圖形由矢量圖或者是位圖組成。
影片剪輯包含在動(dòng)畫影片中的影片片段，有自己的時(shí)間軸和屬性。具有交互性，是用途最廣、功能最多的部分。
時(shí)間軸
時(shí)間軸是我們創(chuàng)作動(dòng)畫時(shí)使用層和幀組織和控制動(dòng)畫內(nèi)容的窗口，層和幀中的內(nèi)容隨時(shí)間的改變而發(fā)生變化，從而產(chǎn)生了動(dòng)畫。時(shí)間軸主要由層、幀和播放頭組成。
Createjs
CreateJS為CreateJS庫(kù)，可以說(shuō)是一款為HTML5游戲開(kāi)發(fā)的引擎。目前被Adobe整合到Animate CC中，作為導(dǎo)出canvas動(dòng)畫的基礎(chǔ)javascript庫(kù)。
它是一款為HTML5游戲開(kāi)發(fā)的引擎，包含：
EaselJS：用于 Sprites、動(dòng)畫、位圖的繪制，交互體驗(yàn)（包含多點(diǎn)觸控）功能。
TweenJS：補(bǔ)間動(dòng)畫”引擎
SoundJS：音頻播放引擎
PrloadJS：資源預(yù)加載
具體的文檔和Demo介紹以及API的使用方法，可以通過(guò)官網(wǎng)來(lái)了解：http://createjs.com/docs
一般動(dòng)畫設(shè)計(jì)給我們都是單個(gè)的使用Animate CC導(dǎo)出的fla源文件，就以我上面說(shuō)的demo為例，長(zhǎng)這樣：
拿到之后我們需要做一點(diǎn)點(diǎn)整理工作，先在Animate CC里面建立一個(gè)影片剪輯元件：
建好之后在Animate CC中的庫(kù)面板中就會(huì)生成剛剛建好的影片剪輯元件，點(diǎn)擊剛剛建好影片剪輯元件鏈接的欄目就會(huì)變成可編輯的狀態(tài)，然后取個(gè)名字，比如我這里取名為view1：
然后雙擊這個(gè)元件，時(shí)間軸里面是空白的，這個(gè)時(shí)候需要做的事情就是打開(kāi)動(dòng)畫設(shè)計(jì)師給我們的fla源文件，復(fù)制時(shí)間軸上所有的圖層粘貼到剛剛新建的影片剪輯里時(shí)間軸里。
這樣我們這個(gè)叫page1的影片剪輯就包含了這一頁(yè)的所有動(dòng)畫，想一想如果你是要做有5頁(yè)游動(dòng)畫的h5項(xiàng)目，就單獨(dú)把每一頁(yè)的動(dòng)畫放到對(duì)應(yīng)的影片剪輯里。這幾個(gè)單獨(dú)的影片剪輯就組成了一個(gè)完整的動(dòng)畫。
做完這一步整理工作后，就可以點(diǎn)擊導(dǎo)出了。
它會(huì)直接把資源導(dǎo)出到你當(dāng)前fla文件所在的目錄：
images -> 動(dòng)畫所用的圖片資源：
1. hmt -> html文件
1. js -> canvas所需要的圖形全部轉(zhuǎn)成canvas繪制的元件庫(kù)
打開(kāi)導(dǎo)出的js文件，可以看到剛剛在影片剪輯里做的類鏈接已經(jīng)在js生成了一個(gè)view1的方法在里頭：
然后可以發(fā)現(xiàn)在導(dǎo)出來(lái)的html文件里中混合了js代碼，我們可以新建一個(gè)main.js文件把html文件中的js代碼放進(jìn)去，專門用來(lái)控制動(dòng)畫的播放以及一些交互邏輯的編寫，整理代碼如下（詳細(xì)的說(shuō)明有寫注釋）：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>1</title>
<style type="text/css">
body {
overflow:hidden;
}
</style>
</head>
<body onload="init();" style="margin:0px;">
<canvas id="canvas" width="750" height="1206"></canvas>
<!--可以下載下來(lái)放在自己的服務(wù)器-->
<script src="createjs-2015.11.26.min.js"></script>
<script src="1.js"></script>
<script src="main.js"></script>
</body>
</html>
接下來(lái)只要把js中對(duì)應(yīng)的兩行代碼修改為下面這兩句代碼就可以運(yùn)行我們的動(dòng)畫：
var view1； view1= new lib.view();
stage.addChild(view);
瀏覽器上就可以顯示出剛才在animate cc里面經(jīng)過(guò)類鏈接的影片剪輯的動(dòng)畫。
但是有時(shí)候有些額外的對(duì)象或者方法是需要放在view1里面的，那怎么辦呢？ 我們新建一個(gè)View1的類把a(bǔ)nimate cc里的view1給復(fù)合進(jìn)去。
//view1
(function() {
"use strict";
function View1(){
this.Container_constructor();
this.back = new lib.view1();
this.addChild(this.back);
this.show = function (){
//這里可以寫額外的方法
}
//this.con = new createjs.Container() 這里可以是額外處理的對(duì)象
}
var p = createjs.extend(View1,createjs.Container);
cls.View1 = createjs.promote(View1, "Container");
}());
然后創(chuàng)建這個(gè)類把它放到舞臺(tái)上就可以了：
js代碼：
view = new cls.View(); stage.addChild(view);
最后js代碼整理如下，相關(guān)代碼已經(jīng)有詳細(xì)的注釋：
// 定義一些需要用到的變量
var canvas, stage, exportRoot, cls={};
// model來(lái)專門處理接收事件，記得要是EventDispatcher類
model = new createjs.EventDispatcher();
stageWidth = document.documentElement.clientWidth;
stageHeight = document.documentElement.clientHeight;
stageScale = stageWidth/(750/2);
canvas = document.getElementById("canvas");
if(stageWidth/stageHeight > 0.665)
{
stageScale = stageHeight/(1206/2);
}
else
{
stageScale = stageWidth/(750/2);
}
canvas.style.width = 750/2*stageScale + 'px';
canvas.style.height = 1206/2*stageScale + 'px';
function init() {
canvas = document.getElementById("canvas");
images = images||{};
// LoadQueue是一個(gè)預(yù)加載類，可以把需要加載的資源提前加載，基本支持大多數(shù)的文件預(yù)加載。
//我這里主要處理了它的2個(gè)事件，fileload，complete。
var loader = new createjs.LoadQueue(false); //這里一共可以是3個(gè)參數(shù) 第一個(gè)是是否用XHR模式加載 第二個(gè)是基礎(chǔ)路徑 第三個(gè)是跨域
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
//這是單個(gè)文件加載完成的事件，把它保存到一個(gè)地方之后可以直接拿來(lái)創(chuàng)建對(duì)象
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete(evt) {
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for(i=0; i<ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
}
view1 = new cls.View1();
stage = new createjs.Stage(canvas); //獲取舞臺(tái) Stage是我們的舞臺(tái)類，可以理解為所有canvas內(nèi)部對(duì)象的總?cè)萜骰蛘哒f(shuō)是根顯示對(duì)象。
stage.addChild(view1); //將容器放在舞臺(tái)上
model.addEventListener("complete",function (){
alert("complete");
})
//Ticker是一個(gè)計(jì)時(shí)類，不過(guò)他是每過(guò)一幀觸發(fā)一次的，也就是說(shuō)跟時(shí)間其實(shí)沒(méi)關(guān)系（因?yàn)閹l是會(huì)波動(dòng)的）。
// createjs.Ticker.setFPS();和createjs.Ticker.addEventListener("tick", stageBreakHandler);是必須要加的，stageBreakHandler里面放的是刷新舞臺(tái)的方法，因?yàn)閏reatejs需要不停的刷新舞臺(tái)來(lái)刷新動(dòng)畫，也就是一個(gè)重繪的過(guò)程。 平時(shí)也可以拿Ticker類做動(dòng)畫。
fnStartAnimation = function() {
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stageBreakHandler);
}
fnStartAnimation();
}
function stageBreakHandler(event)
{
if(stageWidth!=document.documentElement.clientWidth||stageHeight!= document.documentElement.clientHeight)
{
stageWidth = document.documentElement.clientWidth;
stageHeight = document.documentElement.clientHeight;
if(stageWidth/stageHeight > 0.665)
{
stageScale = stageHeight/(1206/2);
}
else
{
stageScale = stageWidth/(750/2);
}
canvas.style.width = 750/2*stageScale + 'px';
canvas.style.height = 1206/2*stageScale + 'px';
}
stage.update();
}
//view1
(function() {
"use strict";
function View1(){
this.Container_constructor();
this.back = new lib.view1();
this.addChild(this.back);
}
var p = createjs.extend(View1,createjs.Container);
cls.View1 = createjs.promote(View1, "Container");
}());
一個(gè)動(dòng)畫效果就完成，當(dāng)然剛開(kāi)始的時(shí)候可能要花點(diǎn)時(shí)間來(lái)熟悉。一旦熟悉這個(gè)套路后，后面就會(huì)越發(fā)越熟練了。
像我們一般做這些運(yùn)營(yíng)項(xiàng)目，都會(huì)和用戶發(fā)生些交互動(dòng)作或者是監(jiān)聽(tīng)頁(yè)面的動(dòng)畫事件來(lái)做進(jìn)一步反饋，這個(gè)是還怎么辦呢？
這里有一個(gè)小訣竅，我們可以在幀上加上dispatchEvent，來(lái)告知程序動(dòng)畫結(jié)束了，或者播放到哪個(gè)關(guān)鍵地方了。 比如這里我們?cè)趧?dòng)畫的最后一幀上加上：
this.stop();
if(model) model.dispatchEvent("complete");
然后在js上新建一個(gè)model來(lái)專門處理接收事件，記得要是EventDispatcher類：
model = new createjs.EventDispatcher();
然后在代碼中監(jiān)聽(tīng)就可以了：
model.addEventListener("complete",function (){
alert("complete");
})
在動(dòng)畫結(jié)束的時(shí)候就會(huì)監(jiān)聽(tīng)到complete事件了：
如果碰到圖片很多的項(xiàng)目怎么辦呢？Animate CC也支持導(dǎo)出雪碧圖的功能，在發(fā)布之前設(shè)置下就可以了：
這里要注意的是在選擇的時(shí)候選擇兩者兼有，這樣就會(huì)把jpg和png格式分別導(dǎo)出；png品質(zhì)選擇32位的就可以了。
左邊是沒(méi)有選擇雪碧圖的，右邊是選擇導(dǎo)出雪碧圖的，圖片數(shù)量瞬間少了很多。導(dǎo)出雪碧圖就是這么簡(jiǎn)單。
說(shuō)到做動(dòng)畫性能是繞不開(kāi)的話題，同樣在使用fla導(dǎo)出canvas動(dòng)畫的時(shí)候也會(huì)碰到性能問(wèn)題，這里總結(jié)下遇到的性能問(wèn)題，一般都是在用Animate CC做動(dòng)畫的時(shí)候可以規(guī)避掉，總結(jié)一句話就是：
減少矢量 減少影片剪輯（movie clip） 減少嵌套 減少濾鏡。
詳情如下：
1、嵌套規(guī)范
在使用CC設(shè)計(jì)動(dòng)畫效果時(shí)，盡量不要太多的嵌套，比如：影片剪輯里面再嵌套影片剪輯或者是幀里面再嵌套其它幀。
2、濾鏡和動(dòng)畫規(guī)范
不要使用濾鏡比如（陰影濾鏡和發(fā)光濾鏡）來(lái)做動(dòng)畫，因?yàn)檫@樣會(huì)非常耗費(fèi)性能，在移動(dòng)端上性能不可控。
可以使用逐幀圖片來(lái)代替相關(guān)濾鏡來(lái)實(shí)現(xiàn)動(dòng)畫效果。比如下面效果里面的花瓣飄落和螢火蟲的效果可以使用逐幀圖片來(lái)做。
3、素材規(guī)范
少用矢量多用位圖，Text shape都算矢量（如果是用 flashCC或者animateCC做的，在里面就直接把字和矢量圖轉(zhuǎn)成位圖）。
使用Animate CC做動(dòng)畫效果的基本知識(shí)就介紹到這了，有什么問(wèn)題可以留言一起交流交流。
各位設(shè)計(jì)的小伙伴們，可以嘗試下使用Animate CC來(lái)做動(dòng)畫效果，特別是H5類型的動(dòng)效。不僅還可以高質(zhì)的還原出設(shè)計(jì)師的動(dòng)畫效果。
使用Animate CC來(lái)設(shè)計(jì)動(dòng)效，你好，我好，大家都好！
原文地址：騰訊ISUX
藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://yvirxh.cn