H5動畫開發快車道 AnimateCC與createjs開發實踐

聆木

前言

以往做一些H5的運營項目,都是動畫設計師使用Animate cc(原來的Flash)先設計好動畫原型,然後交給我們UI開發來實現。做過動畫開發的童鞋都知道動畫開發都是比較耗費時間精力的,而且還要高質量的還原動畫設計師設計好的動畫,來回溝通成本也非常高。

那有沒有一種高效的方法來改善這種流程,提高開發效率的同時還能完成高品質的動畫呢?

經過一段時間的摸索,發現AnimateCC(就是原來的Flash)可以導出canvas動畫,而且是基於createjs這個開發輕量級遊戲的js庫的,非常適合用來做移動端的一些h5動畫。不僅縮短製作動畫所需要的時間。同時它也是一個可視化的IDE,不需要編寫代碼就可以完成高品質的動畫效果;還可以通過Javascript,為動畫效果添加交互性。

比如下面這一頁動畫,如果使用傳統的html css3的動畫開發或者是canvas方式來硬寫代碼來實現,切圖加上動畫開發沒有一天應該是搞不定的;而使用AnimateCC導出配合自己寫一點點代碼,一兩個小時就可以搞定。

dani

一些需要了解的概念

開始之前先來了解下Animate CC中做動畫的概念。

幀頻

是指每秒鐘放映或顯示的幀或圖像的數量,這個數值設置越大,動畫越快,但同時也是性能消耗大戶,一般設置24幀就可以了。

圖形與影片剪輯

我們可以將單獨的動畫,放到一個獨立的影片剪輯里,這樣可以更好的控制動畫。幾個獨立的剪片剪輯,可以組成一個完整的動畫。

當我們把圖片從資源庫拖到舞台時,它這個時候,只是普通的位圖,並不能做補幀動畫,所以我們必須把它轉換成元件。

圖形由矢量圖或者是位圖組成。

影片剪輯包含在動畫影片中的影片片段,有自己的時間軸和屬性。具有交互性,是用途最廣、功能最多的部分。

時間軸

時間軸是我們創作動畫時使用層和幀組織和控制動畫內容的窗口,層和幀中的內容隨時間的改變而發生變化,從而產生了動畫。時間軸主要由層、幀和播放頭組成。

Createjs

CreateJS為CreateJS庫,可以說是一款為HTML5遊戲開發的引擎。目前被Adobe整合到Animate CC中,作為導出canvas動畫的基礎javascript庫。

它是一款為HTML5遊戲開發的引擎,包含:

EaselJS:用於 Sprites、動畫、位圖的繪製,交互體驗(包含多點觸控)功能。

TweenJS:補間動畫”引擎

SoundJS:音頻播放引擎

PrloadJS:資源預加載

具體的文檔和Demo介紹以及API的使用方法,可以通過官網來了解:http://createjs.com/docs

怎麼快速導出canvas動畫?

一般動畫設計給我們都是單個的使用Animate CC導出的fla源文件,就以我上面說的demo為例,長這樣:

111

拿到之後我們需要做一點點整理工作,先在Animate CC裡面建立一個影片剪輯元件:

hhh

建好之後在Animate CC中的庫面板中就會生成剛剛建好的影片剪輯元件,點擊剛剛建好影片剪輯元件鏈接的欄目就會變成可編輯的狀態,然後取個名字,比如我這裡取名為view1:

555

然後雙擊這個元件,時間軸裡面是空白的,這個時候需要做的事情就是打開動畫設計師給我們的fla源文件,複製時間軸上所有的圖層粘貼到剛剛新建的影片剪輯里時間軸里。

這樣我們這個叫page1的影片剪輯就包含了這一頁的所有動畫,想一想如果你是要做有5頁遊動畫的h5項目,就單獨把每一頁的動畫放到對應的影片剪輯里。這幾個單獨的影片剪輯就組成了一個完整的動畫。

做完這一步整理工作後,就可以點擊導出了。

1430208028_90_w1010_h618

它會直接把資源導出到你當前fla文件所在的目錄:

1480772757_43_w693_h174

images -> 動畫所用的圖片資源
1.hmt -> html文件
1.js -> canvas所需要的圖形全部轉成canvas繪製的元件庫

打開導出的js文件,可以看到剛剛在影片剪輯里做的類鏈接已經在js生成了一個view1的方法在裡頭:

pro

然後可以發現在導出來的html文件里中混合了js代碼,我們可以新建一個main.js文件把html文件中的js代碼放進去,專門用來控制動畫的播放以及一些交互邏輯的編寫,整理代碼如下:

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>
<!--可以下載下來放在自己的服務器-->
<script src="createjs-2015.11.26.min.js"></script>
<script src="1.js"></script>
<script src="main.js"></script>
</body>
</html>

下面是整理好的js代碼:

// 聲明相關變量
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation, view1;
var stageWidth =  document.documentElement.clientWidth;
var stageHeight = document.documentElement.clientHeight;
var stageScale = stageWidth/(750/2);
function init() {
    canvas = document.getElementById("canvas");
    anim_container = document.getElementById("animation_container");
    dom_overlay_container = document.getElementById("dom_overlay_container");
    images = images||{};
    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {  
    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} )
    }
    // 這裡需要把我們上面聲明好導出來的類方法進行替換
    exportRoot = new lib.view1;
    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot); 
    //監聽事件
    fnStartAnimation = function() {
        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);
    }       
    //處理屏幕自適應
    function makeResponsive(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();
    }
    makeResponsive();   
    fnStartAnimation();
}

從代碼中可以發現我們把動畫方法修改為我們在cc中定義好的類鏈接方法:

exportRoot = new lib.view1;

瀏覽器上就可以顯示出剛才在animate cc裡面經過類鏈接的影片剪輯的動畫。

一個動畫效果就完成,當然剛開始的時候可能要花點時間來熟悉。一旦熟悉這個套路後,後面就會越發越熟練了。

比如下面這個小的h5動畫,使用上面的animate cc和createjs兩天就可以搞定:

rzz

雪碧圖功能

如果碰到圖片很多的項目怎麼辦呢?Animate CC也支持導出雪碧圖的功能,在發布之前設置下就可以了:

sp

這裡要注意的是在選擇的時候選擇兩者兼有,這樣就會把jpg和png格式分別導出;png品質選擇32位的就可以了。

ss

左邊是沒有選擇雪碧圖的,右邊是選擇導出雪碧圖的,圖片數量瞬間少了很多。導出雪碧圖就是這麼簡單。

性能問題

說到做動畫性能是繞不開的話題,同樣在使用fla導出canvas動畫的時候也會碰到性能問題,這裡總結下遇到的性能問題,一般都是在用Animate CC做動畫的時候可以規避掉,總結一句話就是:

減少矢量 減少影片剪輯(movie clip) 減少嵌套  減少濾鏡特效。

詳情如下:

1、嵌套規範

在使用CC設計動畫效果時,盡量不要太多的嵌套,比如:影片剪輯裡面再嵌套影片剪輯或者是幀裡面再嵌套其它幀。

2、濾鏡和動畫規範

不要使用濾鏡特效比如(陰影濾鏡和發光濾鏡)來做動畫,因為這樣會非常耗費性能,在移動端上性能不可控。

可以使用逐幀圖片來代替相關濾鏡特效來實現動畫效果。比如下面效果裡面的花瓣飄落和螢火蟲的效果可以使用逐幀圖片來做。

3、素材規範

少用矢量多用位圖,Text shape都算矢量(如果是用 flashCC或者animateCC做的,在裡面就直接把字和矢量圖轉成位圖)。

使用Animate CC做動畫效果的基本知識就介紹到這了,有什麼問題可以留言一起交流交流。

各位設計的小夥伴們,可以嘗試下使用Animate CC來做動畫效果,特別是H5類型的動效。不僅高效還可以高質的還原出設計師的動畫效果。

使用Animate CC來設計動效,你好,我好,大家都好!

下面給大家推薦一個學習an和createjs方面的非常不錯的博客,把上面的教程看完,基本上就可以出師了:

更好的利用flash-cc進行項目實戰

Tags: , , , , , ,

聆木
搞點新意思-QQiPad主題帶你飛
上一遍
銳變啟程 化繁為簡
下一遍
20,478
QQ空間 新浪微博 Facebook Google+

相關推薦

留下你的想法吧