基於canvas的骨骼動畫

最近學習到了一種關於canvas的骨骼動畫，聽這個名字就知道他和canvas以前的動畫不一樣，不知道你有沒有興趣瞭解一下呢？

關於骨骼動畫最初是無心間在騰訊團隊上看到的，可是因爲他官網的教程是在是少之又少，也就僅有一個小demo供參考，官方下載的案例也很奇怪的運行不出來，多是個人操做不對，可是不要緊，就經過這個小demo瞭解一下這個很高大上的骨骼東動畫吧，我也是剛接觸，瞭解的也不是很全面，還請見諒

在開始以前，先來了解一下AlloyStick

官方介紹說AlloyStick 是採用HTML5技術開發的一個骨骼動畫引擎，能夠用於HTML5動畫開發、HTML5遊戲開發；AlloyStick 主要由骨骼動畫引擎和骨骼動畫編輯器兩部分組成，骨骼動畫編輯器提供強大的骨骼動畫編輯功能，經過設置動畫關鍵幀，依靠強大的自動補間和骨骼關係，就能夠製做出逼真、生動的Canvas骨骼動畫，能夠暢快的運行在PC、手機、平板等設備裏。嗯，說的很輕鬆又頗有吸引力

所謂的骨骼動畫從字面意思來講就是經過骨骼去繪製的動畫，那麼這裏的骨骼是長什麼樣呢？

沒錯，就是長這樣的，也算是符合預想的吧，畢竟人家有和很強大的自動補間功能，能夠聯想一下每一部分都用很光滑的方式鏈接起來，有點像PS的羽化吧

• 既然是很強大的一個功能，確定有人家本身獨特的優點

1. 動畫更加的逼真，這是確定的啊
2. 圖片佔用的空間很小，這也能看出來，這我的只有頭，手和腿三部分組成
3. 過渡動畫自動補間，讓動做更加靈活
4. 骨骼可控
5. 骨骼事件幀，動畫直行待某個動做或某個幀，觸發自定義事件行爲
6. 動做數據繼承，多角色可用一套動畫數據
7. 可結合屋裏引擎
8. 結合精靈圖動畫製做混合動畫

• 下面來開始小demo

一個骨骼動畫主要由3部分組成：骨骼數據、蒙皮數據、動畫數據，有了這三部分數據，就能夠由AlloyStick渲染出生動的骨骼動畫了。這三部分數據固然不須要手動生成，只須要在編輯器中操做，便可自動生成。生成數據後，就能夠向下面這樣調用執行骨骼動畫了，第一步引入alloysk.js，再加入資源resource.js。其中注意的是蒙皮png是以img標籤引入，固然也可js的方式加載。resource.js裏面包括蒙皮數據，骨骼關係數據，和全部動做數據包括動畫名字和參數。第二步，根據資源文件new出舞臺對象Stage和角色對象Armature，Stage對象管理Armature對象。playTo方法時核心方法，讓角色播放不一樣動做動畫，你能夠增長事件去切換不一樣動做。最後啓動舞臺stage.start().

// 第一步 仍是要先搭建canvas
<canvas id="canvas" width="800px" height="600px">抱歉，你的瀏覽器不支持canvas，建議你使用Chrome瀏覽器</canvas>
複製代碼

// 第二步 以圖片形式或者js方式引入蒙皮資源
<img src="img/texture.png" id="xiaoxiaoImg" style="display:none;">
複製代碼

// 第三步 引入alloysk.js和resource.js
// 第四步 準備工做
var canvas = document.getElementById('canvas')
var textureImg = document.getElementById('xiaoxiaoImg')
var scene = new alloyge.Scene(canvas.getContext('2d'))
var player = new alloysk.Armature('xiaoxiao',textureImg)
// 第五步 製做動畫
// 動做快慢 參數：動做狀態，速度，初始速度，是否一直執行，這裏還能夠設置其餘動做，好比翻滾 roll
// 更新了幾個動做狀態：run 奔跑  roll 翻滾  simpleHit 右手扔東西   secondHit  右手打拳
 //  jump_kick  側踢 comeon 挑釁   relax 放鬆  soap 撿肥皂
player.playTo('run',50,15,true);
// 動畫位置
player.setPos(300,300); 

player.setEaseType(true);		
scene.addObj(player);
 // 啓動FPS監聽器 (輔助功能 非必須)
alloyge.monitorFPS(scene);
// 開始場景裏的動畫，而且能夠傳入callback循環調用
// 最後一步 執行動畫
scene.start(); 
// 效果就是下面這樣奔跑的少年啦，原諒我還沒開通作gif動畫的大門……
 通過不懈的努力終於開通了gif的大門，上動圖啦複製代碼

終於大demo運行失敗的問題也解決了，在下載後，首先要找到example/stickman/js/demo.js文件，而後作如下更改

增長一個{ } ， 這樣代碼就能夠運行了

有關骨骼動畫的講解能夠參考 http://www.mamicode.com/info-detail-85763.html

相關代碼以上傳到github上 https://github.com/aurora-polaris/canvas3 

因爲是剛接觸，不少東西還不是很瞭解，有時間會在整理