基于canvas的骨骼动画
最近学习到了一种关于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和角色对象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动画的大门……经过不懈的努力终于开通了gif的大门,上动图啦
终于大demo运行失败的问题也解决了,在下载后,首先要找到example/stickman/js/demo.js文件,然后做以下更改
增加一个{ } , 这样代码就可以运行了
有关骨骼动画的讲解可以参考 http://www.mamicode.com/info-detail-85763.html
相关代码以上传到github上 https://github.com/aurora-polaris/canvas3
由于是刚接触,很多东西还不是很了解,有时间会在整理
基于canvas的骨骼动画相关推荐
- 7个华丽的基于Canvas的HTML5动画
说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...
- html中canvas动画游戏显示,【Fes】基于canvas的前端动画/游戏入门(一)
前言 本系列虽说是基础教程,但这是相对动画/游戏领域来说,在前端领域算是中级教程了,不适合前端小白或萌新.阅读前请确保自己对前端三大件(JavaScript+CSS+HTML)的基础已经十分熟悉,而且 ...
- 基于可编程图形处理器的骨骼动画算法及其比较
2009-10-19 作者: 季卓尔 张景峤 来源: 万方数据 关键字: 骨骼动画 可编程图形处理器 计算机图形 蒙皮网格 统一 骨骼动画相对于之前的动画方法具有占用空间小的优点,但是其代价是计算量的 ...
- Skeletal Animation(骨骼动画)
Skeletal Animation(骨骼动画) 有关骨骼动画的东西都放在这里好了. http://en.wikipedia.org/wiki/Skeletal_animation Skeletal ...
- DirectX12(D3D12)基础教程(十七)——让小姐姐翩翩起舞(3D骨骼动画渲染【4】)
目录 8.动画基本原理 9.四元数和SQT组合变换 9.1.四元数 9.2.SQT变换综合 9.3.存储方面的考虑 8.动画基本原理 对于一般的2D动画,甚至视频来说,相信各位已经很了解其原理了, ...
- [七夕节]——一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效
Canvas基本介绍 Canvas介绍 1.canvas是html5的一个新标签,属于h5的新特性 2.canvas标签是一个图形的容器,简单点说就是一块画布,你可以在上画矩形,圆形,三角形,折线等等 ...
- 基于Canvas的动画基本原理与数理分析
转载自https://www.jianshu.com/p/e70c9cfbdb38 什么是动画? 就像思考哲学问题无法回避思维和存在的关系一样,制作动画同样无法逃避的问题是动画的原理是什么?这里提一句 ...
- php 3d animation,基于three.js的酷炫Canvas 3D线条动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效 ...
- 基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果
写在最前 本次分享一个用canvas粒子渲染文字的"完整"版实现,功能包括:随机粒子缓动动画,粒子汇聚.发散,并拼出你想要的文字.本文继续上面一节基于canvas使用粒子拼出你想要 ...
最新文章
- jvm调优工具_JVM性能调优监控工具jps、jstack、jmap、jhat、hprof使用详解
- 扬帆起航 继续前行1 nginx+lua+template+cache
- C# winform开发:Graphics、pictureBox同时画多个矩形
- docker多个容器一起打包_详解Docker 容器基础系统镜像打包
- wxWidgets:wxArchiveIterator类用法
- es查询index生成时间_Elasticsearch第二谈(ES核心概念、ES简单操作、构建查询、查询结果过滤排序分页、term和match查询区别、自定义查询结果高亮)...
- mov eax,dword ptr fs:[0] 指令
- 【Linux系统编程学习】 GCC编译器
- Unable to locate the default servlet for serving static content. Please set the 'defaultServletName'
- Win7旗舰版系统时间不准确怎么办
- 三元运算符最终结果的数据类型
- DirectX编程:[初级]C#中利用DirectSound播放WAV格式声音[最少只要4句话]
- 链队列约瑟夫环c++代码_数据结构之约瑟夫环C语言实现
- android app wifi密码,手机WiFi密码显示APP
- 同路光芒 一亿光年同路光芒战略合作签约仪式圆满成功
- 2020阿里招聘岗位要求
- 歌曲转调之后和弦如何转换
- 简单有效解决onenote无法设置或修改默认的英文字体“Calibri”(简单实用)
- Android手机商城
- 【Java】Java中GUI之布局管理器
热门文章
- linux 域账户密码忘记,linux基础命令-用户域用户组管理
- which oracle linux,(总结)Linux下Oracle11gR2的ORA-00845错误解决方法
- Synchronized总结
- chrome面板介绍
- 2018/7/31 -zznu-oj -问题 C: 磨刀- 【扩展欧几里得算法的基本应用】
- 自动计算高度的方法 iOS, height为0, 可以自动计算weith,
- Hive高级用法汇总
- Api demo源码学习(8)--App/Activity/QuickContactsDemo --获取系统联系人信息
- COMET彗星(三)构建自己的COMET核心
- python语言程序设计计算机二级难不难_全国计算机二级的难度有多大?