AE插件bodymovin
这个也是一个流行的2d动画/游戏引擎，体积不算太大，功能还算齐全，支持canvas2d和webgl。
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()">
<script>
function init() {
//Canvas画板
var renderer = new PIXI.CanvasRenderer(600, 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, 'angry_sender_0', true, 0);
//animation.state.addAnimationByName(0, 'angry_recipient_1', true, 0);
animation.state.addAnimationByName(0, 'hiphop01', true, 0);
//设置动画位置
animation.x = 300;
animation.y = 300;
//设置动画比例
animation.scale.x = 0.5;
animation.scale.y = 0.5;
//播放动画
function animate() {
requestAnimationFrame(animate);
renderer.render(stage);
}
animate();
});
}
</script>
</body>
</html>