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

HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

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蒙皮骨骼动画。

HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放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动画

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&gt ...
添加三维动画 demo
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...
[Mugeda HTML5技术教程之3] Hello World&colon; 第一个Mugeda动画
今天我们开始我们的第一个Mugeda动画作品,并通过它来看看制作Mugeda动画的一些通用流程.在开始制作之前,请确保你已经拥有一个Mugeda网站的账号.如果还没有,你可以登录 www.mugeda ...

随机推荐

给员工授予svn相关权限
步骤: 了解:地址2.4是代码svn.地址2.16是文档svn 以授予 SVN地址是:http://172.16.2.16/svn/SystemNetworkBU 权限组为mam_group,是只读 ...
hadoop2&period;0单机安装
hadoop发行的版本:apache hadoop;HDP;CDH -----这里只使用apache hadoop---可以在网站hadoop.apache.org网站上找到 hadoop安装方式:自 ...
[转载] leveldb日知录
原文: http://www.cnblogs.com/haippy/archive/2011/12/04/2276064.html 对leveldb非常好的一篇学习总结文章郑重声明:本篇博客是自己学 ...
Redhat Enterprise Linux中如何关闭SELinux？
转自http://www.cnitblog.com/lywaml/archive/2005/06/21/468.html 红帽企业 Linux 4 包括了一个 SELinux 的实现.SELinux ...
Django 入门案例开发（下）——创建项目应用及模型类
前面两章是在已经开发好的项目上用来描述环境和业务,这一章创建一个全新的项目来用作开发,你可以跟着我的步骤进行开发,如果有不理解的地方可以给我留言. 今天的任务是创建好项目和用户(users)应用及让它 ...
WPF宝典Url
https://sourceforge.net/directory/os:windows/https://archive.codeplex.com/ https://code.msdn.microso ...
Cocos2d-x游戏导出android工程，提取cocos的so文件
Cocos2d-x游戏导出android工程,提取cocos的so文件原本cocos游戏的android工程编译时,需要将cocos的库文件进行编译,这些文件大部分是cpp文件, 使用ndk ...
JS form跳转到新标签页并用post传参
通过js实现跳转到一个新的标签页,并且传递参数.(使用post传参方式) 1 超链接<a>标签 (get传参) <a href="http://www.cnblogs. ...
xcode 筛选error
程序编译出太多warning,想从中找到error很不容易,xcode中可以作筛选,点左下角的叹号即可只显示error:
android扁平化ProgressBar--progressWheel
ProgressWheel是git是一个开源项目,为开发者提供一个扁平化的ProgressBar,并可对其进行深度定制 1,将ProgressWheel的源码拷贝到项目中 public class ...