中创动力网站建设,网络初始网站,找建设项目的网站,翻译网站建设方案最近学习到了一种关于canvas的骨骼动画#xff0c;听这个名字就知道他和canvas之前的动画不同#xff0c;不知道你有没有兴趣了解一下呢#xff1f;关于骨骼动画最初是无意间在腾讯团队上看到的#xff0c;但是由于他官网的教程是在是少之又少#xff0c;也就仅有一个小de…最近学习到了一种关于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和角色对象ArmatureStage对象管理Armature对象。playTo方法时核心方法让角色播放不同动作动画你可以增加事件去切换不同动作。最后启动舞台stage.start().// 第一步 还是要先搭建canvas
canvas idcanvas width800px height600px抱歉你的浏览器不支持canvas建议你使用Chrome浏览器/canvas// 第二步 以图片形式或者js方式引入蒙皮资源
img srcimg/texture.png idxiaoxiaoImg styledisplay:none;// 第三步 引入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动画的大门……经过不懈的努力终于开通了gif的大门上动图啦终于大demo运行失败的问题也解决了在下载后首先要找到example/stickman/js/demo.js文件然后做以下更改增加一个{ } 这样代码就可以运行了
有关骨骼动画的讲解可以参考 http://www.mamicode.com/info-detail-85763.html相关代码以上传到github上 https://github.com/aurora-polaris/canvas3
由于是刚接触很多东西还不是很了解有时间会在整理
