HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画
Spine做骨骼动画是比较流行的，使用起来可能相对复杂，但功能毕竟强大，所以市场占有率较大。
在unity、cocos2d、starling中使用spine已经很成熟了，而HTML5这一块可能刚刚起步，暂时spine对这一块也没有做得非常完善。
整理了一下，找了一些比较好的方法，分享一下。
createjs
这是HTML5动画引擎比较好用，也比较小的一个，如果项目纯碎为了播放骨骼动画，而不是一个游戏，强烈推荐用这个。缺点是对webgl支持不好，官方也没什么动作去做好webgl的支持。
代码比较复杂，是我从github找到的一个项目，还没有把功能封装起来，不过还好，功能不算太复杂，可以自行看看源代码，做点封装，可以参考下边即将讲的min2d。
步骤大概是：
- 引入spine官方的spine.js
- 读取纹理atlas，根据atlas部件数量，建立相应的createjs图元和从属关系
- 读取动画json，新建spine.Skeleton、spine.AnimationState等
- 调用state.addAnimationByName，播放某个动作序列
代码较长，就不贴了。
DEMO：http://kenkozheng.github.io/spine/easeljs.html
源代码：https://github.com/kenkozheng/HTML5_research/tree/master/spine-min2d-createjs-pixi
min2d
这。。。这不是一个出名流行的动画库或者游戏引擎。。。暂时没有人认识这货。
因为这是我暂时自娱自乐做的动画/游戏引擎，目标是做极简的webgl/canvas2d图形库，抛弃一切纷繁复杂的功能，只保留最核心的动画播放。
相对市面支持webgl的动画库中，min2d暂时应该是非常非常小的，是不是最小不清楚。混淆后只有13KB，而createjs达到100+KB，PIXI是287KB，更不用说白鹭引擎和cocos2d-js了，相对而言，他们就是巨无霸。
当然，这个项目，主要目的是为了今年即将迎来的移动webgl浪潮，为普通H5页面做高效动画做准备的，并不是针对游戏。
暂时还在开发中，所以暂时还没开放源码。相信未来会像Fanvas（flash转H5动画http://code.tencent.com/fanvas.html）一样，走腾讯官方开源，敬请期待。
整个思路跟createjs类似，但我做了一层封装，所以播放spine动画会相对简单一些。
- 引入min2d.min.js
- 引入spine.js
- 引入spine-min2d插件
- 新建min2d.Spine，添加到舞台，增加动作，即可播放
var stage = this.stage = new min2d.Stage(this.canvas, 30);
var dancer = this.dancer = new min2d.Spine(this.atlas, this.xhr.response, this.image);
stage.addChild(dancer); dancer.state.addAnimationByName(0, ‘move’, true, 0);
DEMO：http://kenkozheng.github.io/spine/min2d.html
源代码：https://github.com/kenkozheng/HTML5_research/tree/master/spine-min2d-createjs-pixi
补充一句：createjs和min2d都只支持region类型的attachment，不支持skinnedmesh。可以理解为，只支持最简单的零件式spine动画，不支持spine蒙皮骨骼动画。
PIXI
这个也是一个流行的2d动画/游戏引擎，体积不算太大，功能还算齐全，支持canvas2d和webgl。
https://github.com/pixijs/pixi.js
https://github.com/pixijs/pixi-spine
相对上述两个方案来说，PIXI就能全面支持spine，这也是2015年年中才加入的支持。这归功于pixi和spine两个团队的人走得比较近吧。
使用步骤：
- 引入pixi、pixi-spine
- load json
- new PIXI.spine.Spine
- state.addAnimationByName播放动画
- 逐帧重绘（pixi没有提供现成的定时器，有点奇怪）
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">
<meta charset="UTF-8">
<title>spine-js</title>
<script src="js/pixi/pixi.js"></script>
<script src="js/pixi/pixi-spine.js"></script>
</head>
<body onLoad="init()">
<div id="wrapper">
</div>
<script>
function init() {
var renderer = new PIXI.CanvasRenderer(400, 600);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
PIXI.loader.add('spineCharacter', 'data/Boy_ShortsShirt_Angry.json')
// PIXI.loader.add('spineCharacter', 'data/skeleton.json')
.load(function (loader, resources) {
var animation = new PIXI.spine.Spine(resources.spineCharacter.spineData);
stage.addChild(animation);
// animation.state.addAnimationByName(0, 'hiphop02', true, 0);
animation.state.addAnimationByName(0, 'angry_sender_0', true, 0);
// animation.state.addAnimationByName(0, 'angry_recipient_1', true, 0);
animation.x = 100;
animation.y = 300;
animation.scale.x = 0.5;
animation.scale.y = 0.5;
animate(); function animate() {
requestAnimationFrame(animate);
renderer.render(stage);
}
}); }
</script>
</body>
</html>
DEMO：http://kenkozheng.github.io/spine/pixi.html
源代码：https://github.com/kenkozheng/HTML5_research/tree/master/spine-min2d-createjs-pixi
HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画的更多相关文章
- Spine学习二 -播放Spine动画
要想播放一个Spine动画,必须要在一个物体上绑定一个Spine播放的组件,这里暂时使用SkeletonAnimation组件. 然后就是编写动画的控制脚本. 这里提一个特性: [SpineAnima ...
- SpineRuntime-Presentation - 基于 spine-libgdx 实现在 AndroidPresentation 上展示 Spine 动画
SpineRuntime-Presentation 基于 spine-libgdx 实现在 AndroidPresentation 上展示 Spine 动画 Github地址 效果 可以在 Andro ...
- Unity中的动画系统和Timeline(3) 混合树和动画匹配
混合树 前面我们通过在Animation界面添加单独的动作来控制动画,这样做比较麻烦,每个单独的属性,比如站立,奔跑等,都需要单独的代码来控制.现在我们可以通过使用混合树,其基本思想是将相近的动画混合 ...
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- css3 动画demo
1)http://www.yyyweb.com/demo/css-cokecan/inner.html 2)页面切换效果demo http://www.yyyweb.com/demo/page-tra ...
- CABasicAnimation学习Demo 包含了一些经常使用的动画效果
个人写的一些样例: // // ViewController.m // CABasicAnimationDemo // // Created by haotian on 14-6-13. // Cop ...
- css3 一个六边形 和 放大旋转动画DEMO演示
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...
- 添加三维动画 demo
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...
- [Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画
今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程.在开始制作之前,请确保你已经拥有一个Mugeda网站的账号.如果还没有,你可以登录 www.mugeda ...
随机推荐
- Selenium2+python自动化5-操作浏览器基本方法
前言 前面已经把环境搭建好了,这从这篇开始,正式学习selenium的webdriver框架.我们平常说的 selenium自动化,其实它并不是类似于QTP之类的有GUI界面的可视化工具,我们要学的是 ...
- div mouseenter 事件在IE下无效
解决方法是在div style上加个背景色: background: rgba(0, 0, 0, 0);filter:alpha(opacity=0); background: rgba(0, 0, ...
- 洛谷P1738 洛谷的文件夹
原题目:点我 题目是一个略水的题,我机制地用面向对象做了...所以代码量急剧加大,100行233 模拟即可,字符串处理麻烦点.如果没有找到子文件夹就新建文件夹,如果有就进入该文件夹. 提示:高能,指针 ...
- DNS主从TSIG加密传输
BIND服务程序为了能够安全的提供解析服务而支持了TSIG加密机制,TSIG主要是利用密码编码方式保护区域信息的传送(Zone Transfer),也就是说保证了DNS服务器之间传送区域信息的安全. ...
- AIX网络性能优化简介
在AIX 中,网络性能的优化可从以下几方面进行: 网络内存(network memory)的调整 socket 缓冲区 (socket buffer) 的调整 网络接口(network interfa ...
- Oracle 截取、查找字符函数（持续更新）
整理一些常用的截取.查找字符函数: 1.查找某一个字符串中某一个字符(串)出现的次数 SELECT LENGTH(REGEXP_REPLACE(REPLACE('anne<br>lily& ...
- getContextPath、getServletPath、getRequestURI的区别
假定你的web application 项目名称为news,你在浏览器中输入请求路径: http://localhost:8080/news/main/list.jsp 则执行下面向行代码后打印出如下 ...
- UWP好文
如何将GridViewEX升级到UWP(Universal Windows Platform)平台 : http://blog.csdn.net/powertoolsteam/article/deta ...
- ajax返回类型dataType json和text比较
$.ajax({ type: "post", url: "${ctx}/modules/fos/reference/echart", //dataType:'j ...
- 关于GP的理解
连续式中,CMMI有5个GG:阶段式只有3个.多出来的2个GG,一个对应的是阶段4的量化,一个是阶段5的持续优化,确保了阶段式和连续式在范围上的一致性. GG就是讲各个过程中的共有元素抽取出来,形成的 ...