基于canvas的骨骼动画的示例代码

源码坊

最近学习到了一种关于canvas的骨骼动画，听这个名字就知道他和canvas之前的动画不同，不知道你有没有兴趣了解一下呢？
关于骨骼动画最初是无意间在腾讯团队上看到的，但是由于他官网的教程是在是少之又少，也就仅有一个小demo供参考，官方下载的案例也很奇怪的运行不出来，可能是我的操作不对，但是没关系，就通过这个小demo了解一下这个很高大上的骨骼东动画吧，我也是刚接触，了解的也不是很全面，还请见谅
在开始之前，先来了解一下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().

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

复制代码

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

复制代码

1. // 第三步 引入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动画的大门……

复制代码

相关代码以上传到github上 https://github.com/aurora-polaris/canvas3
由于是刚接触，很多东西还不是很了解，有时间会在整理
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持模板人源码语。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！模板人源码·版权声明


本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传，对此类作品本站仅提供交流平台，不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。
      本网站所提供的信息，只供参考之用学习交流，切勿用作非法用途。本网站不保证信息的准确性、有效性、及时性和完整性。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误，对用户或任何其他人士负任何直接或间接责任。在法律允许的范围内，本网站在此声明，不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。        唯一网址: https://www.mubanren.com/thread-297-1-1.html