基于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 

因为是刚接触，不少东西还不是很了解，有时间会在整理