html动画引擎,AlloyStic HTML5骨骼动画

快速上手

一个骨骼动画主要由3部分组成：骨骼数据、蒙皮数据、动画数据，有了这三部分数据，就可以由AlloyStick渲染出生动的骨骼动画了。这三部分数据当然不需要手动生成，只需要在编辑器中操作，即可自动生成。生成数据后，就可以向下面这样调用执行骨骼动画了：

骨骼动画Demo

html, body { background-color: #666666;}

body { margin:0; padding:0; overflow:hidden; }

抱歉，你的浏览器不支持canvas，建议你使用Chrome浏览器，杜绝360浏览器。

var demoApp = function(){

var canvas = document.getElementById('canvas'),

textureImg = document.getElementById('xiaoxiaoImg');

var scene = new alloyge.Scene(canvas.getContext('2d'));

var player = new alloysk.Armature('xiaoxiao',textureImg);

// animationName ,totalFrames,transitionFrame,isLoop

player.playTo('roll',100,15,true);

player.setPos(300,300);

player.setEaseType(false);

scene.addObj(player);

// 启动FPS监听器 (辅助功能 非必须)

alloyge.monitorFPS(scene);

// 开始场景里的动画，并且可以传入callback循环调用

scene.start();

}

window.onload = demoApp;

第一步引入alloysk.js，再加入资源resource.js。其中注意的是蒙皮png是以img标签引入，当然也可js的方式加载。resource.js里面包括蒙皮数据，骨骼关系数据，和所有动作数据包括动画名字和参数。第二步，根据资源文件new出舞台对象Stage和角色对象Armature，Stage对象管理Armature对象。playTo方法时核心方法，让角色播放不同动作动画，你可以增加事件去切换不同动作。最后启动舞台stage.start().