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

  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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: