HTML5骨骼动画Demo |
您所在的位置：网站首页 › 2d骨骼动画素材 › HTML5骨骼动画Demo |
HTML5骨骼动画Demo
|
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，添加到舞台，增加动作，即可播放代码语言：javascript复制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-spineload jsonnew PIXI.spine.Spinestate.addAnimationByName播放动画逐帧重绘（pixi没有提供现成的定时器，有点奇怪）代码语言：javascript复制 spine-js 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); } }); }DEMO：http://kenkozheng.github.io/spine/pixi.html 源代码：https://github.com/kenkozheng/HTML5_research/tree/master/spine-min2d-createjs-pixi  QQ截图20160127160159
|
【本文地址】