npm 包 spineify 使用教程

介绍

spineify 是一个开源的 npm 包，用于将一组修改过的 spines 骨骼动画转化为可供渲染的 webgl 序列帧动画。它能够在 web、移动端等应用中高效地播放动画，支持平滑缩放和旋转等各种变换，对于前端开发者来说是一个非常实用且方便的工具包。

安装

请在命令行或终端中输入以下命令进行安装：

npm install spineify

使用

在项目中引入 spineify 整个包或者部分模块：

var Spineify = require('spineify');

加载 spines 文件

首先我们需要加载要使用的 spines 骨骼动画文件，通常使用 Spine.js 进行相应的实现：

var loader = new Spine.loaders.Json, assetManager = new Spine.AssetManager(loader);

assetManager.loadAsset('character.json', function (error, asset) {
  var skeleton = asset.createSkeleton();
});

接下来的操作中我们假设已经成功加载了 spines 文件，并使用 skeleton 表示。

初始化 spineify

我们可以在构造函数中初始化 spineify，指定相应的配置参数：

var options = {
  fps: 30,
  scale: 1,
  width: 256,
  height: 256
};

var spine = new Spineify(skeleton, options);

其中参数意义如下：

• fps：帧率，默认为 30
• scale：动画的缩放，默认为 1
• width 和 height：渲染的画布宽度和高度，默认为 256

渲染动画

如果要在页面中展示动画，需要将动画渲染到画布上，Spineify 支持多种渲染方式，本例介绍主要的 Canvas 渲染方式：

首先在 HTML 中新建一个 Canvas 元素：

<canvas id="canvas"></canvas>

接着在 javascript 代码中指定绘制的位置：

var canvas = document.getElementById('canvas');
spine.attachCanvas(canvas);

最后调用 animate() 方法启动动画循环：

spine.animate();

至此，我们就可以看到页面中展示了我们加载的 spines 动画啦！

添加事件

我们可以为动画添加各种事件监听器，比如播放完成后自动停止：

spine.on('animationComplete', function () {
  spine.stop();
});

其他各种事件的监听和绑定方式与此类似，详细见官方文档。

示例代码

下面是一个完整的示例代码，包括加载 spines 文件、初始化 spineify，渲染动画等操作：

-- -------------------- ---- -------
--- -------- - --------------------

--- ------ - --- ------------------- ------------ - --- ---------------------------

---------------------------------------- -------- ------- ------ -
  --- -------- - -----------------------

  --- ------- - -
    ---- ---
    ------ --
    ------ ----
    ------- ---
  --

  --- ----- - --- ------------------ ---------
  --- ------ - ----------------------------------
  ---------------------------
  ----------------

  -- -------
  ----------------------------- -------- -- -
    -------------
  ---
---

参考文献

• Spineify 官方文档
• Spine 官方文档

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709b8ccae46eb111ef8e