如何使用canvas实现骨骼动画

tangjin

作者

这篇文章主要介绍了如何使用canvas实现骨骼动画，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

在开始之前，先来了解一下AlloyStick

官方介绍说AlloyStick 是采用HTML5技术开发的一个骨骼动画引擎，可以用于HTML5动画开发、HTML5游戏开发；AlloyStick 主要由骨骼动画引擎和骨骼动画编辑器两部分组成，骨骼动画编辑器提供强大的骨骼动画编辑功能，通过设置动画关键帧，依靠强大的自动补间和骨骼关系，就可以制作出逼真、生动的Canvas骨骼动画，可以畅快的运行在PC、手机、平板等设备里。嗯，说的很轻松又很有吸引力

所谓的骨骼动画从字面意思来说就是通过骨骼去绘制的动画，那么这里的骨骼是长什么样呢？

没错，就是长这样的，也算是符合预想的吧，毕竟人家有和很强大的自动补间功能，可以联想一下每一部分都用很光滑的方式连接起来，有点像PS的羽化吧

既然是很强大的一个功能，肯定有人家自己独特的优势

动画更加的逼真，这是肯定的啊
图片占用的空间很小，这也能看出来，这个人只有头，手和腿三部分组成
过渡动画自动补间，让动作更加灵活
骨骼可控
骨骼事件帧，动画直行待某个动作或某个帧，触发自定义事件行为
动作数据继承，多角色可用一套动画数据
可结合屋里引擎
结合精灵图动画制作混合动画

下面来开始小demo

一个骨骼动画主要由3部分组成：骨骼数据、蒙皮数据、动画数据，有了这三部分数据，就可以由AlloyStick渲染出生动的骨骼动画了。这三部分数据当然不需要手动生成，只需要在编辑器中操作，即可自动生成。生成数据后，就可以向下面这样调用执行骨骼动画了，第一步引入alloysk.js，再加入资源resource.js。其中注意的是蒙皮png是以img标签引入，当然也可js的方式加载。resource.js里面包括蒙皮数据，骨骼关系数据，和所有动作数据包括动画名字和参数。第二步，根据资源文件new出舞台对象Stage和角色对象Armature，Stage对象管理Armature对象。playTo方法时核心方法，让角色播放不同动作动画，你可以增加事件去切换不同动作。最后启动舞台stage.start().

//第一步还是要先搭建canvas
<canvasid="canvas"width="800px"height="600px">抱歉，你的浏览器不支持canvas，建议你使用Chrome浏览器</canvas>

//第二步以图片形式或者js方式引入蒙皮资源
<imgsrc="img/texture.png"id="xiaoxiaoImg"style="display:none;">

//第三步引入alloysk.js和resource.js
//第四步准备工作
varcanvas=document.getElementById('canvas')
vartextureImg=document.getElementById('xiaoxiaoImg')
varscene=newalloyge.Scene(canvas.getContext('2d'))
varplayer=newalloysk.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动画的大门&hellip;&hellip;