@alphardex/spine-viewer

v1.0.4

Published

9 months ago

A custom HTML element for displaying Spine animations using PIXI.js

Downloads

0High
0Medium
0Low

alphardex

spine animation pixi web-component custom-element html

Spine Viewer

一个用于在网页中显示 Spine 动画的自定义 HTML 元素，基于 PIXI.js 构建。

注：支持 Spine 4.1 及以下版本，4.2 暂不支持。

安装

npm install @alphardex/spine-viewer

依赖

确保你的项目中已安装以下依赖：

npm install [email protected] pixi-spine

使用方法

1. 导入组件

import "@alphardex/spine-viewer";

2. 在 HTML 中使用

<spine-viewer
  src="/path/to/your/animation.skel"
  animation-name="idle"
  scale="0.6"
>
</spine-viewer>

3. 通过 JavaScript 控制

const viewer = document.querySelector("spine-viewer");

// 设置动画
viewer.setAnimation("walk", true);

// 设置缩放
viewer.setScale(0.8);

// 获取所有动画列表
const animations = viewer.getAnimations();
console.log("可用动画:", animations);

属性

| 属性 | 类型 | 默认值 | 描述 | | ---------------- | ------ | ------ | ------------------------------ | | src | string | - | Spine .skel 文件的路径（必需） | | animation-name | string | 'idle' | 要播放的动画名称 | | scale | number | 0.6 | 缩放比例 |

API 方法

`setAnimation(animationName, loop)`

设置要播放的动画。

animationName (string): 动画名称
loop (boolean): 是否循环播放，默认为 true

`getAnimations()`

返回所有可用的动画名称数组。

`setScale(scale)`

设置动画的缩放比例。

scale (number): 缩放比例

样式

你可以通过 CSS 来设置 spine-viewer 元素的大小和样式：

spine-viewer {
  width: 800px;
  height: 400px;
}

文件结构要求

确保你的 Spine 动画文件按以下结构组织：

animations/
├── character.skel
├── character.atlas
└── character.png

所有文件必须具有相同的基础名称（如 character），组件会自动查找对应的 .atlas 和 .png 文件。

示例

基础示例

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import "@alphardex/spine-viewer";
    </script>
    <style>
      spine-viewer {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <spine-viewer
      src="/animations/character.skel"
      animation-name="idle"
      scale="0.6"
    >
    </spine-viewer>
  </body>
</html>

动态控制示例

<spine-viewer id="myViewer" src="/animations/character.skel"></spine-viewer>

<button onclick="changeAnimation('walk')">走路</button>
<button onclick="changeAnimation('run')">跑步</button>
<input
  type="range"
  min="0.1"
  max="1.0"
  step="0.1"
  value="0.6"
  onchange="changeScale(this.value)"
/>

<script>
  const viewer = document.getElementById("myViewer");

  function changeAnimation(name) {
    viewer.setAnimation(name, true);
  }

  function changeScale(scale) {
    viewer.setScale(parseFloat(scale));
  }
</script>

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

1.0.0

初始版本
支持基础 Spine 动画播放
支持动态动画切换和缩放

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme