Spine做骨骼動畫是比較流行的，使用起來可能相對復雜，但功能畢竟強大，所以市場占有率較大。
在unity、cocos2d、starling中使用spine已經很成熟了，而HTML5這一塊可能剛剛起步，暫時spine對這一塊也沒有做得非常完善。
整理了一下，找了一些比較好的方法，分享一下。
createjs
這是HTML5動畫引擎比較好用，也比較小的一個，如果項目純碎為了播放骨骼動畫，而不是一個游戲，強烈推薦用這個。缺點是對webgl支持不好，官方也沒什么動作去做好webgl的支持。
代碼比較復雜，是我從github找到的一個項目，還沒有把功能封裝起來，不過還好，功能不算太復雜，可以自行看看源代碼，做點封裝，可以參考下邊即將講的min2d。
步驟大概是：
- 引入spine官方的spine.js
- 讀取紋理atlas，根據atlas部件數量，建立相應的createjs圖元和從屬關系
- 讀取動畫json，新建spine.Skeleton、spine.AnimationState等
- 調用state.addAnimationByName，播放某個動作序列
代碼較長，就不貼了。
DEMO：http://kenkozheng.github.io/spine/easeljs.html
源代碼：https://github.com/kenkozheng/HTML5_research/tree/master/spine-min2d-createjs-pixi
min2d
這。。。這不是一個出名流行的動畫庫或者游戲引擎。。。暫時沒有人認識這貨。
因為這是我暫時自娛自樂做的動畫/游戲引擎，目標是做極簡的webgl/canvas2d圖形庫，拋棄一切紛繁復雜的功能，只保留最核心的動畫播放。
相對市面支持webgl的動畫庫中，min2d暫時應該是非常非常小的，是不是最小不清楚。混淆后只有13KB，而createjs達到100+KB，PIXI是287KB，更不用說白鷺引擎和cocos2d-js了，相對而言，他們就是巨無霸。
當然，這個項目，主要目的是為了今年即將迎來的移動webgl浪潮，為普通H5頁面做高效動畫做准備的，並不是針對游戲。
暫時還在開發中，所以暫時還沒開放源碼。相信未來會像Fanvas（flash轉H5動畫http://code.tencent.com/fanvas.html）一樣，走騰訊官方開源，敬請期待。
整個思路跟createjs類似，但我做了一層封裝，所以播放spine動畫會相對簡單一些。
- 引入min2d.min.js
- 引入spine.js
- 引入spine-min2d插件
- 新建min2d.Spine，添加到舞台，增加動作，即可播放
var stage = this.stage = new min2d.Stage(this.canvas, 30); var dancer = this.dancer = new min2d.Spine(this.atlas, this.xhr.response, this.image); stage.addChild(dancer); dancer.state.addAnimationByName(0, ‘move’, true, 0);
DEMO：http://kenkozheng.github.io/spine/min2d.html
源代碼：https://github.com/kenkozheng/HTML5_research/tree/master/spine-min2d-createjs-pixi
補充一句：createjs和min2d都只支持region類型的attachment，不支持skinnedmesh。可以理解為，只支持最簡單的零件式spine動畫，不支持spine蒙皮骨骼動畫。
PIXI
這個也是一個流行的2d動畫/游戲引擎，體積不算太大，功能還算齊全，支持canvas2d和webgl。
https://github.com/pixijs/pixi.js
https://github.com/pixijs/pixi-spine
相對上述兩個方案來說，PIXI就能全面支持spine，這也是2015年年中才加入的支持。這歸功於pixi和spine兩個團隊的人走得比較近吧。
使用步驟：
- 引入pixi、pixi-spine
- load json
- new PIXI.spine.Spine
- state.addAnimationByName播放動畫
- 逐幀重繪（pixi沒有提供現成的定時器，有點奇怪）
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">
<meta charset="UTF-8">
<title>spine-js</title>
<script src="js/pixi/pixi.js"></script>
<script src="js/pixi/pixi-spine.js"></script>
</head>
<body onLoad="init()">
<div id="wrapper">
</div>
<script>
function init() {
var renderer = new PIXI.CanvasRenderer(400, 600);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
PIXI.loader.add('spineCharacter', 'data/Boy_ShortsShirt_Angry.json')
// PIXI.loader.add('spineCharacter', 'data/skeleton.json')
.load(function (loader, resources) {
var animation = new PIXI.spine.Spine(resources.spineCharacter.spineData);
stage.addChild(animation);
// animation.state.addAnimationByName(0, 'hiphop02', true, 0);
animation.state.addAnimationByName(0, 'angry_sender_0', true, 0);
// animation.state.addAnimationByName(0, 'angry_recipient_1', true, 0);
animation.x = 100;
animation.y = 300;
animation.scale.x = 0.5;
animation.scale.y = 0.5;
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(stage);
}
});
}
</script>
</body>
</html>
DEMO：http://kenkozheng.github.io/spine/pixi.html
源代碼：https://github.com/kenkozheng/HTML5_research/tree/master/spine-min2d-createjs-pixi
