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


Posted in HTML / CSS onJune 12, 2018

最近学习到了一种关于canvas的骨骼动画,听这个名字就知道他和canvas之前的动画不同,不知道你有没有兴趣了解一下呢?

关于骨骼动画最初是无意间在腾讯团队上看到的,但是由于他官网的教程是在是少之又少,也就仅有一个小demo供参考,官方下载的案例也很奇怪的运行不出来,可能是我的操作不对,但是没关系,就通过这个小demo了解一下这个很高大上的骨骼东动画吧,我也是刚接触,了解的也不是很全面,还请见谅

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

官方介绍说AlloyStick 是采用HTML5技术开发的一个骨骼动画引擎,可以用于HTML5动画开发、HTML5游戏开发;AlloyStick 主要由骨骼动画引擎和骨骼动画编辑器两部分组成,骨骼动画编辑器提供强大的骨骼动画编辑功能,通过设置动画关键帧,依靠强大的自动补间和骨骼关系,就可以制作出逼真、生动的Canvas骨骼动画,可以畅快的运行在PC、手机、平板等设备里。嗯,说的很轻松又很有吸引力

所谓的骨骼动画从字面意思来说就是通过骨骼去绘制的动画,那么这里的骨骼是长什么样呢?

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

没错,就是长这样的,也算是符合预想的吧,毕竟人家有和很强大的自动补间功能,可以联想一下每一部分都用很光滑的方式连接起来,有点像PS的羽化吧

既然是很强大的一个功能,肯定有人家自己独特的优势

  1. 动画更加的逼真,这是肯定的啊
  2. 图片占用的空间很小,这也能看出来,这个人只有头,手和腿三部分组成
  3. 过渡动画自动补间,让动作更加灵活
  4. 骨骼可控
  5. 骨骼事件帧,动画直行待某个动作或某个帧,触发自定义事件行为
  6. 动作数据继承,多角色可用一套动画数据
  7. 可结合屋里引擎
  8. 结合精灵图动画制作混合动画

下面来开始小demo

一个骨骼动画主要由3部分组成:骨骼数据、蒙皮数据、动画数据,有了这三部分数据,就可以由AlloyStick渲染出生动的骨骼动画了。这三部分数据当然不需要手动生成,只需要在编辑器中操作,即可自动生成。生成数据后,就可以向下面这样调用执行骨骼动画了,第一步引入alloysk.js,再加入资源resource.js。其中注意的是蒙皮png是以img标签引入,当然也可js的方式加载。resource.js里面包括蒙皮数据,骨骼关系数据,和所有动作数据包括动画名字和参数。第二步,根据资源文件new出舞台对象Stage和角色对象Armature,Stage对象管理Armature对象。playTo方法时核心方法,让角色播放不同动作动画,你可以增加事件去切换不同动作。最后启动舞台stage.start().

// 第一步 还是要先搭建canvas
<canvas id="canvas" width="800px" height="600px">抱歉,你的浏览器不支持canvas,建议你使用Chrome浏览器</canvas>
// 第二步 以图片形式或者js方式引入蒙皮资源
<img src="img/texture.png" id="xiaoxiaoImg" style="display: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动画的大门……

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

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

由于是刚接触,很多东西还不是很了解,有时间会在整理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
详解android与HTML混合开发总结
Jun 06 #HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 #HTML / CSS
Html5之title吸顶功能
Jun 04 #HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 #HTML / CSS
HTML5中的websocket实现直播功能
May 21 #HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 #HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 #HTML / CSS
You might like
解析MySql与Java的时间类型
2013/06/22 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python 调用HBase的简单实例
2016/12/18 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
python3中确保枚举值代码分析
2020/12/02 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
优秀大学生职业生涯规划书
2014/02/27 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
离职感谢信怎么写
2015/01/22 职场文书
歌咏比赛主持词
2015/06/29 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android