canvas动画的实现原理,canvas画动图

　　最近学了一种关于画布的骨架动画。听这个名字就知道和以前的canvas动画不一样。不知道你有没有兴趣了解一下？

　　一开始无意中看到腾讯团队上的骷髅动画，但是由于他在官网的教程少之又少，只有一个小demo供参考，官方下载的案例奇怪的无法运行。也许我的操作是错的，但没关系。让我们通过这个小demo来了解一下这个高大的骷髅动画。我是新手，理解不是很全面。请原谅我。

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

　　官方称AlloyStick是一个用HTML5技术开发的骨架动画引擎，可用于HTML5动画开发和HTML5游戏开发；AlloyStick主要由骨架动画引擎和骨架动画编辑器两部分组成。骨骼动画编辑器提供了强大的骨骼动画编辑功能。通过设置动画关键帧，依靠强大的自动补间和骨架关系，可以制作出逼真的画布骨架动画，可以在PC、手机、平板等设备上流畅运行。嗯，说起来很容易，也很吸引人。

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

　　没错，就是这个样子，也符合预期。毕竟人家有很强大的自动修补功能。你可以把每一个部分都想的很流畅的连接起来，有点像PS的出现。

　　既然是一个非常强大的功能，那它一定有自己独特的优势。

　　动画更真实，这是肯定的。图片占的空间很小，这个也能看出来。这个人只有头、手、腿三个部位，让过渡动画自动弥补空隙，让动作更加灵活。骨架可以控制骨架事件帧，动画直奔某个动作或某帧，触发自定义事件行为动作数据的继承。多角色可以使用一组动画数据，通过将房子中的引擎与精灵动画相结合来制作混合动画。让我们开始小演示。

　　一个骨骼动画主要由三部分组成：骨骼数据、皮肤数据和动画数据。有了这三部分数据，AlloyStick就可以渲染出生动的骨骼动画。当然，这三部分数据不需要手动生成。只有在编辑器中操作才能自动生成。数据生成后，您可以调用以下代码来执行骨骼动画。第一步是引入alloysk.js，然后加入resource.js注意皮肤png是作为img标签引入的，但是也可以作为js加载。Resource.js包括皮肤数据、骨骼关系数据和所有动作数据，包括动画名称和参数。其次，根据资源文件新建，舞台对象和角色对象，甲胄，舞台对象管理甲胄对象。播放方法是核心方法，可以让角色播放不同的动作动画。您可以添加事件来切换不同的操作。最后，启动stage stage.start()。

　　//第一步是构建canvas canvas ID= canvas width= 800 px height= 600 px 。抱歉，您的浏览器不支持画布。推荐你使用Chrome浏览器/canvas//第二步，以图片或js的形式引入皮肤资源img src= img/texture.png ID=小小img 。//第三步是介绍alloysk.js和resource.js//.第四步是做准备。Var canvas=document . getelementbyid( canvas )Var texture img=document . getelementbyid(小小img )Var scene=new alloy . scene(canvas . get context( 2d ))Var player=new alloy sk . armature(小小，texture img)//第五步动画//动作速度参数：动作状态，速度，初速度，是否一直在执行，其他动作可以在这里设置，比如滚滚。//更新了几个动作状态：run Run Rolling Rolling simpleHit用右手扔东西secondHit用右手打拳。//jump_kick侧踢comeon挑拨relax Soap Picking Soap player . playto( run ，50，15，true)；//动画位置player.setPos(300，300)；player . seteasetype(true)；scene . addobj(player)；//启动FPS监听器(不需要辅助功能)alloyge.monitorFPS(场景)；//启动场景中的动画，可以在回调循环中调用。//最后一步是执行动画scene . start()；//效果就是下面这个少年这样跑。原谅我没有打开gif动画的大门.

　　上传到github https://github.com/aurora-polaris/canvas3的相关代码

　　因为初来乍到，还不是很了解，有时间会整理一下。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。