微笑小站 微笑小站
首页 推荐 给你的网页加入Spine动画

给你的网页加入Spine动画

微笑 11月前

这里放一个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>

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

0
微笑
用自己的眼睛去读世间这一部书。

评论 (0)

返回
    发表评论

猜你喜欢

  • 与CTF有关的一些网站
14 2月, 2019

CTF中常见PHP漏洞的利用

相关文章

安恒 | 工具 - CaptfEncoder
4年前
CTF中常见PHP漏洞的利用
4年前
Ubuntu 下 ShadowsocksR 客户端的安装与配置
4年前
微笑
10
文章
3
评论
12
获赞
Copyright © 2019-2023 微笑小站. Designed by nicetheme.