Spine做骨骼动画是比较流行的，使用起来可能相对复杂，但功能毕竟强大，所以市场占有率较大。

在unity、cocos2d、starling中使用spine已经很成熟了，而HTML5这一块可能刚刚起步，暂时spine对这一块也没有做得非常完善。

整理了一下，找了一些比较好的方法，分享一下。

createjs

这是HTML5动画引擎比较好用，也比较小的一个，如果项目纯碎为了播放骨骼动画，而不是一个游戏，强烈推荐用这个。缺点是对webgl支持不好，官方也没什么动作去做好webgl的支持。

代码比较复杂，是我从github找到的一个项目，还没有把功能封装起来，不过还好，功能不算太复杂，可以自行看看源代码，做点封装，可以参考下边即将讲的min2d。

步骤大概是：

  1. 引入spine官方的spine.js
  2. 读取纹理atlas，根据atlas部件数量，建立相应的createjs图元和从属关系
  3. 读取动画json，新建spine.Skeleton、spine.AnimationState等
  4. 调用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动画会相对简单一些。

  1. 引入min2d.min.js
  2. 引入spine.js
  3. 引入spine-min2d插件
  4. 新建min2d.Spine，添加到舞台，增加动作，即可播放
  1. var stage = this.stage = new min2d.Stage(this.canvas, 30);
  2. var dancer = this.dancer = new min2d.Spine(this.atlas, this.xhr.response, this.image);
  3. stage.addChild(dancer);
  4.  
  5. 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两个团队的人走得比较近吧。

使用步骤：

  1. 引入pixi、pixi-spine
  2. load json
  3. new PIXI.spine.Spine
  4. state.addAnimationByName播放动画
  5. 逐帧重绘（pixi没有提供现成的定时器，有点奇怪）
  1. <html>
  2. <head>
  3.     <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">
  4.     <meta charset="UTF-8">
  5.     <title>spine-js</title>
  6.     <script src="js/pixi/pixi.js"></script>
  7.     <script src="js/pixi/pixi-spine.js"></script>
  8. </head>
  9. <body onLoad="init()">
  10. <div id="wrapper">
  11. </div>
  12. <script>
  13.     function init() {
  14.         var renderer = new PIXI.CanvasRenderer(400, 600);
  15.         document.body.appendChild(renderer.view);
  16.         var stage = new PIXI.Container();
  17.         PIXI.loader.add('spineCharacter', 'data/Boy_ShortsShirt_Angry.json')
  18. //        PIXI.loader.add('spineCharacter', 'data/skeleton.json')
  19.                 .load(function (loader, resources) {
  20.                     var animation = new PIXI.spine.Spine(resources.spineCharacter.spineData);
  21.                     stage.addChild(animation);
  22. //                    animation.state.addAnimationByName(0, 'hiphop02', true, 0);
  23.                     animation.state.addAnimationByName(0, 'angry_sender_0', true, 0);
  24. //                    animation.state.addAnimationByName(0, 'angry_recipient_1', true, 0);
  25.                     animation.x = 100;
  26.                     animation.y = 300;
  27.                     animation.scale.x = 0.5;
  28.                     animation.scale.y = 0.5;
  29.                     animate();
  30.  
  31.                     function animate() {
  32.                         requestAnimationFrame(animate);
  33.                         renderer.render(stage);
  34.                     }
  35.                 });
  36.  
  37.     }
  38. </script>
  39. </body>
  40. </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动画的更多相关文章

  1. Spine学习二 -播放Spine动画

    要想播放一个Spine动画,必须要在一个物体上绑定一个Spine播放的组件,这里暂时使用SkeletonAnimation组件. 然后就是编写动画的控制脚本. 这里提一个特性: [SpineAnima ...

  2. SpineRuntime-Presentation - 基于 spine-libgdx 实现在 AndroidPresentation 上展示 Spine 动画

    SpineRuntime-Presentation 基于 spine-libgdx 实现在 AndroidPresentation 上展示 Spine 动画 Github地址 效果 可以在 Andro ...

  3. Unity中的动画系统和Timeline(3) 混合树和动画匹配

    混合树 前面我们通过在Animation界面添加单独的动作来控制动画,这样做比较麻烦,每个单独的属性,比如站立,奔跑等,都需要单独的代码来控制.现在我们可以通过使用混合树,其基本思想是将相近的动画混合 ...

  4. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  5. css3 动画demo

    1)http://www.yyyweb.com/demo/css-cokecan/inner.html 2)页面切换效果demo http://www.yyyweb.com/demo/page-tra ...

  6. CABasicAnimation学习Demo 包含了一些经常使用的动画效果

    个人写的一些样例: // // ViewController.m // CABasicAnimationDemo // // Created by haotian on 14-6-13. // Cop ...

  7. css3 一个六边形 和 放大旋转动画DEMO演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...

  8. 添加三维动画 demo

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  9. [Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画

    今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程.在开始制作之前,请确保你已经拥有一个Mugeda网站的账号.如果还没有,你可以登录 www.mugeda ...

随机推荐

  1. CSS3，JS可用于刷新按钮或者加载动画的动画

    html: <input type="button" id="zidong3" style="top: 12px;" /> cs ...

  2. JavaWeb---图书馆管理系统

    写在开头,以后每天写记录. 今天,初步了解了一下,项目需求,用现在自己所学的知识,很多还不能做出来. 先用目前的知识,一步步的做出来,不断的完善,今天遇到的问题: 任务分析: 01.list页面的ad ...

  3. iOS工作笔记(十四)

    1.scrollview的frame指的是其可视范围,contentSize指的是其滚动范围,分别是在水平方向和竖直方向上的 所以要让scrollview在水平方向不能滚动,那么需要如下设置 _scr ...

  4. XHTML跟HTML的区别

    其实二者并没有什么区别,只是THTML的要求更加严格,比如说 1.XHTML 元素必须被正确地嵌套. 错误:<p><span>this is example.</p> ...

  5. 如何正确接收 GitHub 的消息邮件

    背景 我厂的开发流程通常都是基于 GitHub 的.在 GitHub 上 review 代码,也是我日常工作的重要组成部分.对我来说,在 code review 过程中最讨厌的莫过于,我在 pull ...

  6. VB6.0 读取Excel文件并返还数据集RecordSet

    读取Excel文件并返还数据集RecordSet 该方法适用于.xls,.xlsx类型的文件 读取Excel文件的Function: '取得数据集 Function getRecordSetForEx ...

  7. picurl

    from lxml import etreeimport requestsdef getHtml(html): novelcontent = requests.get(html).content re ...

  8. vb.net加密解密方法

    1.vb.net加密解密方法 Private Function getLicenseDate() As String Dim b() As Byte Dim path As String = Serv ...

  9. 重载new和delete

    当我们创建一个new表达式时,会发生两件事.首先使用operator new()分配内存,然后调用构造函数.在delete表达式里,调用了析构函数,然后使用operator delete()释放内存. ...

  10. 360极速浏览器UA怪异以及如何用js判断360浏览器

    本文最后一次更新于7个月前,文章内容可能略有出入.若发现文章中有错误之处,可以留言评论告诉作者. 1.360极速浏览器UA因域名不同而异 今天在写一个判断浏览器.浏览器版本.操作系统.操作系统版本.浏 ...