本文摘自PHP中文网，作者不言，侵删。
这篇文章主要介绍了基于canvas的骨骼动画的示例代码的相关资料，内容挺不错的，现在分享给大家，也给大家做个参考。最近学习到了一种关于canvas的骨骼动画，听这个名字就知道他和canvas之前的动画不同，不知道你有没有兴趣了解一下呢？
关于骨骼动画最初是无意间在腾讯团队上看到的，但是由于他官网的教程是在是少之又少，也就仅有一个小demo供参考，官方下载的案例也很奇怪的运行不出来，可能是我的操作不对，但是没关系，就通过这个小demo了解一下这个很高大上的骨骼东动画吧，我也是刚接触，了解的也不是很全面，还请见谅
在开始之前，先来了解一下AlloyStick
官方介绍说AlloyStick 是采用HTML5技术开发的一个骨骼动画引擎，可以用于HTML5动画开发、HTML5游戏开发；AlloyStick 主要由骨骼动画引擎和骨骼动画编辑器两部分组成，骨骼动画编辑器提供强大的骨骼动画编辑功能，通过设置动画关键帧，依靠强大的自动补间和骨骼关系，就可以制作出逼真、生动的Canvas骨骼动画，可以畅快的运行在PC、手机、平板等设备里。嗯，说的很轻松又很有吸引力
所谓的骨骼动画从字面意思来说就是通过骨骼去绘制的动画，那么这里的骨骼是长什么样呢？
没错，就是长这样的，也算是符合预想的吧，毕竟人家有和很强大的自动补间功能，可以联想一下每一部分都用很光滑的方式连接起来，有点像PS的羽化吧
既然是很强大的一个功能，肯定有人家自己独特的优势
动画更加的逼真，这是肯定的啊
图片占用的空间很小，这也能看出来，这个人只有头，手和腿三部分组成
过渡动画自动补间，让动作更加灵活
骨骼可控
骨骼事件帧，动画直行待某个动作或某个帧，触发自定义事件行为
动作数据继承，多角色可用一套动画数据
可结合屋里引擎
结合精灵图动画制作混合动画
下面来开始小demo
相关阅读 >>
html5中的canvas 和 svg分别是什么？它们的区别在何处？（实例）
canvas引入跨域的图片导致todataurl()报错的问题的解决
canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结
更多相关阅读请进入《canvas》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
