网页优化
This commit is contained in:
tianmo committed
1 parent
49dd3b9472
commit
f4e69707c3
23 files changed
+123
-235
No files matched your search
@@ -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 = {};
|
||||
|
||||
Reference in new issue
Block a user