介绍
spineify 是一个开源的 npm 包，用于将一组修改过的 spines 骨骼动画转化为可供渲染的 webgl 序列帧动画。它能够在 web、移动端等应用中高效地播放动画，支持平滑缩放和旋转等各种变换，对于前端开发者来说是一个非常实用且方便的工具包。
安装
请在命令行或终端中输入以下命令进行安装：
--- ------- --------
使用
在项目中引入 spineify 整个包或者部分模块：
--- -------- - --------------------
加载 spines 文件
首先我们需要加载要使用的 spines 骨骼动画文件，通常使用 Spine.js 进行相应的实现：
--- ------ - --- ------------------- ------------ - --- --------------------------- ---------------------------------------- -------- ------- ------ - --- -------- - ----------------------- ---
接下来的操作中我们假设已经成功加载了 spines 文件，并使用 skeleton 表示。
初始化 spineify
我们可以在构造函数中初始化 spineify，指定相应的配置参数：
--- ------- - - ---- --- ------ -- ------ ---- ------- --- -- --- ----- - --- ------------------ ---------
其中参数意义如下：
fps：帧率，默认为 30scale：动画的缩放，默认为 1width和height：渲染的画布宽度和高度，默认为 256
渲染动画
如果要在页面中展示动画，需要将动画渲染到画布上，Spineify 支持多种渲染方式，本例介绍主要的 Canvas 渲染方式：
首先在 HTML 中新建一个 Canvas 元素：
------- ---------------------
接着在 javascript 代码中指定绘制的位置：
--- ------ - ---------------------------------- ---------------------------
最后调用 animate() 方法启动动画循环：
----------------
至此，我们就可以看到页面中展示了我们加载的 spines 动画啦！
添加事件
我们可以为动画添加各种事件监听器，比如播放完成后自动停止：
----------------------------- -------- -- - ------------- ---
其他各种事件的监听和绑定方式与此类似，详细见官方文档。
示例代码
下面是一个完整的示例代码，包括加载 spines 文件、初始化 spineify，渲染动画等操作：
--- -------- - --------------------
--- ------ - --- ------------------- ------------ - --- ---------------------------
---------------------------------------- -------- ------- ------ -
--- -------- - -----------------------
--- ------- - -
---- ---
------ --
------ ----
------- ---
--
--- ----- - --- ------------------ ---------
--- ------ - ----------------------------------
---------------------------
----------------
-- -------
----------------------------- -------- -- -
-------------
---
---参考文献
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006709b8ccae46eb111ef8e