给你的网页加入Spine动画

这里放一个Demo，是超级帅气的黄盖大叔🤤

点击左下角重置能重置Spine位置，可以拖动，滚轮/双指缩放

首先你要准备好Spine资源，我们不提供，一般来说，完整的Spine资源导出有三个文件：.skel/.json, .atlas, .png。

用于展示的Demo使用Spine 3.7版本，建议导出.skel二进制文件，加载会快一点。但考虑到很多旧版本Spine（比如3.6）Runtime不支持.skel文件，我们这里使用的是.json。选用了Spine-ts Runtime中的Spine Web Player，3.6及之前版本似乎没有。

Spine Player配置

到GitHub下载spine-player.js。地址为spine-runtimes/spine-ts at 4.0 · EsotericSoftware/spine-runtimes · GitHub，注意需要在左上角版本选取找到符合你的Spine版本，否则会有读取问题。

然后在你的网页中导入相关js和css（可以偷example里面的）。

<script src="./spine-player.js"></script>
<link rel="stylesheet" href="./spine-player.css">

为我们的player创建一个容器

<div id="move-container" style="position:fixed;z-index:999; width: 720px; height: 1080px">
    <!-- z-index保证显示在大部分元素之上，使用较大的width和height能保证渲染结果的高清，之后再使用scale对大小进行缩放 -->
    <!-- 如果你想要节约浏览器资源可以将width和height改小 -->
  <div id="container" style="width:100%;height:100%"></div>
</div>

在Script里面简单写上几句，就能加载我们的模型出来了

<script>
  new spine.SpinePlayer("container", {
    jsonUrl: "你的Spine文件.json",
    atlasUrl: "你的Spine文件.atlas",
    animation: "指定初始动画的名称，可以不填，Spine会默认第一个动画",
    premultipliedAlpha: true,

    backgroundColor: "#00000000",
    alpha: true,
    // 这两行是为了透明背景
    viewport: {
      padLeft: "2%",
      padRight: "2%",
      padTop: "1%",
      padBottom: "1%",
      // 这些上下左右边距设定自行掌控
      // debugRender: true,
      // 开启debugRender能让你看到模型的边界
    },
    showControls: false,
    // 不使用控制按钮，前期调试阶段可以打开
  });
</script>

接下来的拖动及放大逻辑是关键，晚点更新。