Yeomai/SpineViewer
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

网页优化

Browse Source
This commit is contained in:
tianmo committed 2026-10-31 15:26:22 +08:00
1 parent 49dd3b9472
commit f4e69707c3
23 files changed
+123 -235
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

release/SpineViewer站点/assets/demo/raptor/embedded.js
+1 -1
View File
@@ -1,6 +1,6 @@
// 官方 Raptor 示例（Spine 4.3.75-beta 导出）的 JS 内嵌副本。
// 用途：以 file:// 直接打开页面时，浏览器不允许 fetch 本地文本，本地图片也会污染画布，
// 这里预先内嵌 JSON、Atlas 与贴图的 data URL，保证离线与 file:// 场景下同样可以渲染。
// 这里预先内嵌 JSON、Atlas 与贴图的 data URL，保证 file:// 场景下同样可以渲染。
// 数据来源：Esoteric Software spine-runtimes 仓库 examples/raptor/export
// 固定提交：ba17cf88b198c6531c6c51d8d4e1e4b3c3ab47dd（Spine Runtimes License，见 LICENSE.txt）。
window.SPINE_DEMO_DATA = {
release/SpineViewer站点/assets/download/SpineThumbnailGenerateServer.eagleplugin
BIN
View File
Binary file not shown.
release/SpineViewer站点/assets/download/SpineViewer.eagleplugin
BIN
View File
Binary file not shown.
release/SpineViewer站点/index.html
+54 -51
View File
@@ -3,10 +3,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpineViewer — Eagle 插件 · 离线预览 Spine 骨骼动画</title>
<meta name="description" content="SpineViewer 是一个完全离线的 Eagle 插件，在素材库中直接预览 Spine 导出的骨骼动画（skel / skel.bytes / json / atlas / atlas.txt），内置 3.4–4.3 全部官方运行时，支持动画与皮肤切换、关键帧时间轴、PMA 预乘与自动缩略图。">
<title>SpineViewer — Eagle 插件 · Spine 骨骼动画预览</title>
<meta name="description" content="SpineViewer 是一款 Eagle 插件，在素材库中直接预览 Spine 导出的骨骼动画（skel / skel.bytes / json / atlas / atlas.txt），内置 3.4–4.3 全部官方运行时，支持动画与皮肤切换、关键帧时间轴、PMA 预乘与自动缩略图。">
<link rel="icon" href="assets/logo-spineviewer.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css?v=4">
<noscript><style>.reveal { opacity: 1; transform: none; }</style></noscript>
<script>
// 提前应用主题，避免首屏闪白
@@ -15,6 +15,40 @@
document.documentElement.dataset.theme = saved || 'dark';
} catch (e) {}
</script>
<!-- Matomo -->
<script>
(function() {
var host = location.hostname.toLowerCase();
var localHost = location.protocol === 'file:' ||
host === 'localhost' ||
host === '127.0.0.1' ||
host === '0.0.0.0' ||
host === '::1' ||
host === '[::1]' ||
host.endsWith('.localhost') ||
host.endsWith('.local') ||
/^10\./.test(host) ||
/^192\.168\./.test(host) ||
/^172\.(1[6-9]|2\d|3[01])\./.test(host);
if (localHost) return;
var _paq = window._paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
var u = "//web-analysis.yeomai.site/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '3']);
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
document.addEventListener('click', function(event) {
var link = event.target.closest && event.target.closest('a[download]');
if (!link) return;
var file = (link.getAttribute('href') || '').split('/').pop();
_paq.push(['trackEvent', 'Download', 'direct', file]);
});
})();
</script>
<!-- End Matomo Code -->
</head>
<body>
@@ -27,7 +61,7 @@
</a>
<nav class="nav" aria-label="页面导航">
<a href="#features">功能特性</a>
<a href="#ui">实际界面</a>
<a href="#demo">交互演示</a>
<a href="#versions">支持版本</a>
<a href="#install">安装使用</a>
<a href="#faq">常见问题</a>
@@ -37,7 +71,7 @@
<svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5v2.4M12 19.1v2.4M2.5 12h2.4M19.1 12h2.4M5.2 5.2l1.7 1.7M17.1 17.1l1.7 1.7M18.8 5.2l-1.7 1.7M6.9 17.1l-1.7 1.7"/></svg>
<svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.2A8.2 8.2 0 0 1 9.8 4a8.4 8.4 0 1 0 10.2 10.2z"/></svg>
</button>
<a class="btn btn-primary btn-sm" href="https://community-cn.eagle.cool/plugins?search=SpineViewer" target="_blank" rel="noopener">下载插件</a>
<a class="btn btn-primary btn-sm" href="https://community-cn.eagle.cool/plugins?search=SpineViewer" target="_blank" rel="noopener">前往Eagle社区获取插件</a>
</div>
</div>
</header>
@@ -49,22 +83,22 @@
<div class="hero-glow" aria-hidden="true"></div>
<div class="wrap hero-grid">
<div class="hero-copy">
<span class="pill"><i class="dot" aria-hidden="true"></i>Eagle 插件 · 完全离线 · 无 CDN</span>
<span class="pill"><i class="dot" aria-hidden="true"></i>Eagle 插件</span>
<h1>在 Eagle 里直接预览<br><span class="grad">Spine 骨骼动画</span></h1>
<p class="hero-sub">
SpineViewer 接管 <code>skel</code> / <code>skel.bytes</code> / <code>json</code> / <code>atlas</code> / <code>atlas.txt</code>，
自动在素材库中配对骨骼、图集与贴图，识别版本并加载本地运行时。
自动在素材库中配对骨骼、图集与贴图，识别版本并加载匹配的运行时。
点开任意一个文件，就能播放动画、切换皮肤、导出缩略图。
</p>
<div class="hero-cta">
<a class="btn btn-primary" href="https://community-cn.eagle.cool/plugins?search=SpineViewer" target="_blank" rel="noopener">下载插件</a>
<a class="btn btn-ghost" href="#ui">体验界面</a>
<a class="btn btn-primary" href="https://community-cn.eagle.cool/plugins?search=SpineViewer" target="_blank" rel="noopener">前往Eagle社区获取插件</a>
<a class="btn btn-download" href="assets/download/SpineViewer.eagleplugin" download>直接下载</a>
<a class="btn btn-ghost" href="#demo">显示交互演示</a>
<a class="link-arrow" href="#features">功能特性 →</a>
</div>
<ul class="stats">
<li><b>9</b><span>内置运行时版本<br>3.4 – 4.3</span></li>
<li><b>8</b><span>种界面语言<br>简繁英日韩俄西德</span></li>
<li><b>0</b><span>网络请求<br>运行时全部本地化</span></li>
<li><b>400px</b><span>缩略图自动生成<br>可手动更新</span></li>
</ul>
</div>
@@ -100,11 +134,6 @@
<p class="section-lead">下面每一项都对应插件的真实行为：跨 item 文件夹配对、旧版二进制解析、WebGL 渲染、缩略图补刷……不只是“能看动画”。</p>
</div>
<div class="features">
<article class="feature-card reveal">
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 20h.01"/><path d="M5 12.6a10 10 0 0 1 14 0"/><path d="M8.5 16.1a5 5 0 0 1 7 0"/><path d="M2.5 2.5l19 19"/></svg></div>
<h3>完全离线运行</h3>
<p>官方运行时全部拷贝在插件本地 <code>lib/</code> 目录，无 CDN、无网络请求。断网、内网环境同样可用。</p>
</article>
<article class="feature-card reveal">
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M9 15l6-6"/><path d="M10.5 6.6L12.1 5a4 4 0 0 1 5.7 5.7l-1.6 1.6"/><path d="M13.5 17.4L11.9 19a4 4 0 0 1-5.7-5.7l1.6-1.6"/></svg></div>
<h3>跨文件夹自动配对</h3>
@@ -118,7 +147,7 @@
<article class="feature-card reveal">
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8.5 12.2l2.5 2.5 4.7-5"/></svg></div>
<h3>旧版二进制兼容</h3>
<p>3.4–3.7 的 <code>.skel</code> / <code>.skel.bytes</code> 由移植自官方 <code>SkeletonBinary</code> 的解析层处理，保留网格、权重、变形、约束、裁剪与绘制顺序，无需编译或联网。</p>
<p>3.4–3.7 的 <code>.skel</code> / <code>.skel.bytes</code> 由移植自官方 <code>SkeletonBinary</code> 的解析层处理，保留网格、权重、变形、约束、裁剪与绘制顺序。</p>
</article>
<article class="feature-card reveal">
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M10 8.4l6 3.6-6 3.6z"/></svg></div>
@@ -159,40 +188,14 @@
</div>
</section>
<!-- ======== 实际界面 ======== -->
<section class="section alt" id="ui">
<!-- ======== 交互演示 ======== -->
<section class="section alt" id="interaction">
<div class="wrap">
<div class="section-head reveal">
<span class="kicker">REAL UI</span>
<h2>实际界面</h2>
<p class="section-lead">截图取自下方的交互演示，与插件查看器的控件布局、文案完全一致。浮动控制栏、动画列表与时间轴全部悬浮在画布上方，不挤占预览区域。</p>
</div>
<div class="gallery">
<figure class="shot shot-main reveal">
<img class="zoomable" src="assets/ui-window.png" alt="查看器完整窗口截图" width="1600" height="818">
<figcaption>查看器窗口 · 点击可放大</figcaption>
</figure>
<div class="crop-grid">
<figure class="shot crop toolbar reveal">
<img class="zoomable" src="assets/ui-toolbar.png" alt="浮动控制栏截图" width="1600" height="72">
<figcaption>控制栏：皮肤、播放/暂停、循环、速度、背景、版本号、重载</figcaption>
</figure>
<figure class="shot crop animlist reveal">
<img class="zoomable" src="assets/ui-animlist.png" alt="动画列表截图" width="256" height="382">
<figcaption>动画列表：自适应宽度，条目多时独立滚动</figcaption>
</figure>
<figure class="shot crop timeline reveal">
<img class="zoomable" src="assets/ui-timeline.png" alt="时间轴截图" width="1600" height="90">
<figcaption>时间轴：时长与帧号、秒刻度、蓝色关键帧短线</figcaption>
</figure>
</div>
</div>
<div class="demo-block">
<div class="demo-head reveal">
<h3>交互演示</h3>
<p>复刻查看器的控件布局与文案，直接在页面上操作：切换动画、拖动时间轴、缩放画布试试。画面使用官方示例 <strong>Raptor</strong>（Spine 4.3.75-beta 导出，5 个动画），由 4.3 官方运行时 + 插件同款渲染模块在本地实时渲染，断网或直接双击打开同样可用。</p>
<div class="section-head reveal" id="demo">
<span class="kicker">INTERACTIVE DEMO</span>
<h2>交互演示</h2>
<p class="section-lead">复刻查看器的控件布局与文案，直接在页面上操作：切换动画、拖动时间轴、缩放画布试试。画面使用官方示例 <strong>Raptor</strong>（Spine 4.3.75-beta 导出，5 个动画），由 4.3 官方运行时 + 插件同款渲染模块实时渲染。</p>
</div>
<div class="viewer reveal" id="viewerDemo" tabindex="0" aria-label="SpineViewer 查看器界面交互演示">
@@ -306,7 +309,7 @@
<li class="step reveal">
<span class="step-num">03</span>
<h3>识别版本</h3>
<p>读取骨骼数据中的版本号（JSON 读 <code>skeleton.spine</code>，SKEL 读二进制头部），加载匹配的本地运行时。</p>
<p>读取骨骼数据中的版本号（JSON 读 <code>skeleton.spine</code>，SKEL 读二进制头部），加载匹配的运行时。</p>
</li>
<li class="step reveal">
<span class="step-num">04</span>
@@ -331,7 +334,7 @@
<strong>在 Eagle 插件社区获取 SpineViewer</strong>
<span class="dl-meta">插件页提供下载与安装说明；本页面不提供任何文件下载。</span>
</span>
<span class="btn btn-primary">前往插件页 →</span>
<span class="btn btn-primary">前往Eagle社区获取插件</span>
</a>
<p class="dl-note reveal">原生二进制需要与目标平台匹配；如需自行构建，可在源码目录执行 <code>npm ci --omit=dev</code> 后从 Eagle 插件面板打包。</p>
@@ -412,7 +415,7 @@
<img alt="放大查看界面截图">
</div>
<!-- 官方 Spine 4.3 运行时、插件同款渲染模块与演示示例（全部本地打包，无网络请求） -->
<!-- 官方 Spine 4.3 运行时、插件同款渲染模块与演示示例 -->
<script>
// 插件模块是 CommonJS 文件，这里用最小的 module / require 垫片在浏览器中加载它们。
window.__svLibs = {};
release/SpineViewer站点/style.css
+12 -38
View File
@@ -1,7 +1,6 @@
/* ==========================================================================
SpineViewer 插件介绍网站样式
- 品牌色取自插件图标（红），查看器演示区颜色取自 viewer/spine.html
- 零外部依赖，可离线打开
========================================================================== */
:root {
@@ -212,6 +211,14 @@ html[data-theme="dark"] .icon-moon { display: none; }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--cyan) 45%, var(--border)); transform: translateY(-1px); }
.btn-download {
background: linear-gradient(135deg, #1976d2, #4fc1ff);
color: #fff;
box-shadow: 0 10px 26px rgba(25, 118, 210, .28);
}
.btn-download:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(25, 118, 210, .36); }
.btn-sm { padding: 8px 15px; font-size: 13px; border-radius: 9px; }
.link-arrow {
@@ -309,7 +316,7 @@ html[data-theme="dark"] .icon-moon { display: none; }
.stats {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 0;
margin: 0;
@@ -516,39 +523,9 @@ html[data-theme="dark"] .f-icon { color: color-mix(in srgb, var(--accent) 80%, #
font-size: 12.5px;
}
/* ---------- 实际界面 ---------- */
/* ---------- 交互演示 ---------- */
.gallery { display: grid; gap: 16px; }
.crop-grid {
display: grid;
grid-template-columns: minmax(170px, 215px) 1fr;
gap: 16px;
align-items: start;
}
.crop.toolbar { grid-column: 1 / -1; }
.crop.animlist { grid-column: 1; }
.crop.timeline { grid-column: 2; }
.crop.animlist img {
display: block;
width: 100%;
max-width: 128px;
margin: 18px auto;
box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
border-radius: 6px;
}
.crop.toolbar img, .crop.timeline img { border-radius: 6px; }
.demo-block { margin-top: 58px; }
.demo-head h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.01em; }
.demo-head p { margin: 0 0 20px; color: var(--text-dim); font-size: 14.5px; line-height: 1.75; max-width: 780px; }
#interaction { padding-top: 48px; }
/* ---------- 查看器界面复刻（配色与 viewer/spine.html 一致） ---------- */
@@ -1153,9 +1130,6 @@ html[data-theme="light"] .viewer {
@media (max-width: 1020px) {
.hero-grid { grid-template-columns: 1fr; gap: 36px; }
.stats { grid-template-columns: repeat(2, 1fr); }
.crop-grid { grid-template-columns: 1fr; }
.crop.toolbar, .crop.animlist, .crop.timeline { grid-column: 1; }
.crop.animlist img { max-width: 132px; }
}
@media (max-width: 880px) {
@@ -1181,7 +1155,7 @@ html[data-theme="light"] .viewer {
@media (max-width: 520px) {
.wrap { padding: 0 16px; }
.stats { grid-template-columns: 1fr 1fr; gap: 10px; }
.stats { grid-template-columns: 1fr; gap: 10px; }
.brand-ver { display: none; }
.viewer { height: 520px; }
.v-tl-labels { min-width: 96px; }