|
|
@@ -0,0 +1,407 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Layer 背景动画 - Animal.js</title>
|
|
|
+ <link rel="stylesheet" href="../demo.css">
|
|
|
+ <link rel="stylesheet" href="../../xjs.css">
|
|
|
+ <style>
|
|
|
+ /* Keep Layer above the doc UI */
|
|
|
+ .layer-overlay { z-index: 99999; }
|
|
|
+ </style>
|
|
|
+ <style>
|
|
|
+ .controls {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px 12px;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #b7b7b7;
|
|
|
+ }
|
|
|
+ .controls label {
|
|
|
+ display: inline-flex;
|
|
|
+ gap: 8px;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ .controls input { accent-color: var(--highlight-color); }
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ appearance: none;
|
|
|
+ border: 1px solid rgba(255,255,255,0.12);
|
|
|
+ background: rgba(255,255,255,0.04);
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 999px;
|
|
|
+ padding: 10px 14px;
|
|
|
+ font-weight: 650;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: border-color 0.15s ease, background 0.15s ease;
|
|
|
+ }
|
|
|
+ .btn:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
|
|
|
+ .demo-visual { padding: 22px 24px; }
|
|
|
+ .hint { font-size: 12px; color: #8c8c8c; line-height: 1.5; margin-top: 10px; }
|
|
|
+ .split { margin-top: 10px; width: 100%; height: 1px; background: rgba(255,255,255,0.08); }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <div class="page-top">
|
|
|
+ <div class="crumb">UI › LAYER</div>
|
|
|
+ <div class="since">BACKGROUND ANIMATION</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h1>背景动画 / 背景图案</h1>
|
|
|
+ <p class="description">
|
|
|
+ 使用 <code class="inline">background</code> 设置 <code class="inline">layer-popup</code> 的整体背景，
|
|
|
+ 支持三种形式：<code class="inline">svg(...)</code> / <code class="inline">url(...)</code> / <code class="inline">css(...)</code>。
|
|
|
+ 在 Steps 模式下，当背景不同会随内容左右切换；相同背景则保持不动，仅切换内容。
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <div class="box-container">
|
|
|
+ <div class="demo-visual">
|
|
|
+ <div class="controls" style="margin-bottom: 14px;">
|
|
|
+ <label><input id="optIcon" type="checkbox" checked> showIcon</label>
|
|
|
+ <label><input id="optPopup" type="checkbox" checked> popupAnimation</label>
|
|
|
+ <label><input id="optEsc" type="checkbox" checked> closeOnEsc</label>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <button class="btn" type="button" onclick="openSingle('svg')">SVG 背景</button>
|
|
|
+ <button class="btn" type="button" onclick="openSingle('image')">图片背景</button>
|
|
|
+ <button class="btn" type="button" onclick="openSingle('css')">CSS 背景</button>
|
|
|
+ </div>
|
|
|
+ <div class="row" style="margin-top: 12px;">
|
|
|
+ <button class="btn" type="button" onclick="openSingle('svg', 'compact')">SVG + 紧凑尺寸</button>
|
|
|
+ <button class="btn" type="button" onclick="openSingle('image', 'wide')">图片 + 宽屏尺寸</button>
|
|
|
+ <button class="btn" type="button" onclick="openSingle('css', 'tall')">CSS + 高屏尺寸</button>
|
|
|
+ </div>
|
|
|
+ <div class="split"></div>
|
|
|
+ <div class="row" style="margin-top: 12px;">
|
|
|
+ <button class="btn" type="button" onclick="openSteps('same')">Steps（相同背景）</button>
|
|
|
+ <button class="btn" type="button" onclick="openSteps('diff')">Steps（不同背景）</button>
|
|
|
+ </div>
|
|
|
+ <div class="hint">
|
|
|
+ Tip: Lottie 背景从 <code class="inline">/svg</code> 目录读取 JSON，示例为 <code class="inline">svg(BallSorting.json)</code>。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="box-header">
|
|
|
+ <div class="box-title">Controls</div>
|
|
|
+ <div class="tabs">
|
|
|
+ <div class="tab active" onclick="switchTab('js')">JavaScript</div>
|
|
|
+ <div class="tab" onclick="switchTab('html')">HTML</div>
|
|
|
+ <div class="tab" onclick="switchTab('css')">CSS</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <pre id="js-code" class="code-view active">const BACKGROUNDS = {
|
|
|
+ svg: 'svg(BallSorting.json)',
|
|
|
+ image: 'url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=60")',
|
|
|
+ css: 'css(background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(0,0,0,0.25)); filter: saturate(1.2))'
|
|
|
+};
|
|
|
+
|
|
|
+const SIZE_PRESETS = {
|
|
|
+ normal: null,
|
|
|
+ compact: { width: 340, height: 220 },
|
|
|
+ wide: { width: '60vw', height: 260 },
|
|
|
+ tall: { width: 360, height: '60vh' }
|
|
|
+};
|
|
|
+
|
|
|
+function openSingle(type, sizeKey) {
|
|
|
+ const showIcon = !!document.getElementById('optIcon')?.checked;
|
|
|
+ const popupAnimation = !!document.getElementById('optPopup')?.checked;
|
|
|
+ const closeOnEsc = !!document.getElementById('optEsc')?.checked;
|
|
|
+ const size = SIZE_PRESETS[sizeKey] || null;
|
|
|
+
|
|
|
+ $.layer({
|
|
|
+ title: 'Background: ' + type.toUpperCase(),
|
|
|
+ text: 'Layer popup background demo.',
|
|
|
+ background: BACKGROUNDS[type],
|
|
|
+ width: size ? size.width : null,
|
|
|
+ height: size ? size.height : null,
|
|
|
+ icon: showIcon ? 'svg:BallSorting' : null,
|
|
|
+ popupAnimation,
|
|
|
+ closeOnEsc
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function openSteps(mode) {
|
|
|
+ const showIcon = !!document.getElementById('optIcon')?.checked;
|
|
|
+ const popupAnimation = !!document.getElementById('optPopup')?.checked;
|
|
|
+ const closeOnEsc = !!document.getElementById('optEsc')?.checked;
|
|
|
+
|
|
|
+ const same = BACKGROUNDS.svg;
|
|
|
+ const a = BACKGROUNDS.svg;
|
|
|
+ const b = BACKGROUNDS.image;
|
|
|
+
|
|
|
+ $.layer({
|
|
|
+ title: 'Step 1',
|
|
|
+ text: 'Background should follow when different.',
|
|
|
+ background: mode === 'same' ? same : a,
|
|
|
+ icon: showIcon ? 'info' : null,
|
|
|
+ popupAnimation,
|
|
|
+ closeOnEsc,
|
|
|
+ showCancelButton: true
|
|
|
+ })
|
|
|
+ .step({
|
|
|
+ title: 'Step 2',
|
|
|
+ text: 'Swipe left/right to see background transition.',
|
|
|
+ background: mode === 'same' ? same : b
|
|
|
+ })
|
|
|
+ .step({
|
|
|
+ title: 'Step 3',
|
|
|
+ text: 'Back to the first background.',
|
|
|
+ background: mode === 'same' ? same : a
|
|
|
+ })
|
|
|
+ .run();
|
|
|
+}</pre>
|
|
|
+
|
|
|
+ <pre id="html-code" class="html-view"><div class="demo-visual">
|
|
|
+ <div class="controls" style="margin-bottom: 14px;">
|
|
|
+ <label><input id="optIcon" type="checkbox" checked> showIcon</label>
|
|
|
+ <label><input id="optPopup" type="checkbox" checked> popupAnimation</label>
|
|
|
+ <label><input id="optEsc" type="checkbox" checked> closeOnEsc</label>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <button class="btn" type="button" onclick="openSingle('svg')">SVG 背景</button>
|
|
|
+ <button class="btn" type="button" onclick="openSingle('image')">图片背景</button>
|
|
|
+ <button class="btn" type="button" onclick="openSingle('css')">CSS 背景</button>
|
|
|
+ </div>
|
|
|
+ <div class="row" style="margin-top: 12px;">
|
|
|
+ <button class="btn" type="button" onclick="openSingle('svg', 'compact')">SVG + 紧凑尺寸</button>
|
|
|
+ <button class="btn" type="button" onclick="openSingle('image', 'wide')">图片 + 宽屏尺寸</button>
|
|
|
+ <button class="btn" type="button" onclick="openSingle('css', 'tall')">CSS + 高屏尺寸</button>
|
|
|
+ </div>
|
|
|
+ <div class="split"></div>
|
|
|
+ <div class="row" style="margin-top: 12px;">
|
|
|
+ <button class="btn" type="button" onclick="openSteps('same')">Steps（相同背景）</button>
|
|
|
+ <button class="btn" type="button" onclick="openSteps('diff')">Steps（不同背景）</button>
|
|
|
+ </div>
|
|
|
+</div></pre>
|
|
|
+
|
|
|
+ <pre id="css-code" class="css-view">/* Keep Layer above the doc UI */
|
|
|
+.layer-overlay { z-index: 99999; }
|
|
|
+
|
|
|
+.controls {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px 12px;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #b7b7b7;
|
|
|
+}
|
|
|
+.controls label {
|
|
|
+ display: inline-flex;
|
|
|
+ gap: 8px;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+.controls input { accent-color: var(--highlight-color); }
|
|
|
+.row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ appearance: none;
|
|
|
+ border: 1px solid rgba(255,255,255,0.12);
|
|
|
+ background: rgba(255,255,255,0.04);
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 999px;
|
|
|
+ padding: 10px 14px;
|
|
|
+ font-weight: 650;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: border-color 0.15s ease, background 0.15s ease;
|
|
|
+}
|
|
|
+.btn:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
|
|
|
+.demo-visual { padding: 22px 24px; }
|
|
|
+.hint { font-size: 12px; color: #8c8c8c; line-height: 1.5; margin-top: 10px; }
|
|
|
+.split { margin-top: 10px; width: 100%; height: 1px; background: rgba(255,255,255,0.08); }</pre>
|
|
|
+
|
|
|
+ <div class="feature-desc">
|
|
|
+ <strong>功能说明：</strong>本页验证 Layer 的 <code class="inline">background</code> 支持
|
|
|
+ Lottie SVG / 图片 / CSS 三种形式，并在 Steps 中按方向切换背景。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="doc-nav" aria-label="Previous and next navigation">
|
|
|
+ <a href="#" id="prevLink" onclick="goPrev(); return false;">
|
|
|
+ <span><span class="nav-label">Previous</span><br><span class="nav-title" id="prevTitle">—</span></span>
|
|
|
+ <span aria-hidden="true">←</span>
|
|
|
+ </a>
|
|
|
+ <div class="nav-center" id="navCenter">Layer</div>
|
|
|
+ <a href="#" id="nextLink" onclick="goNext(); return false;">
|
|
|
+ <span><span class="nav-label">Next</span><br><span class="nav-title" id="nextTitle">—</span></span>
|
|
|
+ <span aria-hidden="true">→</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="../highlight_css.js"></script>
|
|
|
+ <!-- Dev/test: load source files directly with cache-bust (avoid stale iframe cache) -->
|
|
|
+ <script>
|
|
|
+ (function () {
|
|
|
+ var b = Date.now();
|
|
|
+ document.write('<script src="../../animal.js?_=' + b + '"><\/script>');
|
|
|
+ document.write('<script src="../../layer.js?_=' + b + '"><\/script>');
|
|
|
+ document.write('<script>try{if(window.animal&&!window.xjs)window.xjs=window.animal;}catch(e){}<\/script>');
|
|
|
+ })();
|
|
|
+ </script>
|
|
|
+ <script>
|
|
|
+ const CURRENT = 'layer/test_custom_animation_background.html';
|
|
|
+ const BACKGROUNDS = {
|
|
|
+ svg: 'svg(BallSorting.json)',
|
|
|
+ image: 'url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=60")',
|
|
|
+ css: 'css(background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(0,0,0,0.25)); filter: saturate(1.2))'
|
|
|
+ };
|
|
|
+ const SIZE_PRESETS = {
|
|
|
+ normal: null,
|
|
|
+ compact: { width: 340, height: 220 },
|
|
|
+ wide: { width: '60vw', height: 260 },
|
|
|
+ tall: { width: 360, height: '60vh' }
|
|
|
+ };
|
|
|
+
|
|
|
+ function switchTab(tab) {
|
|
|
+ document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
|
+ document.querySelectorAll('.code-view, .html-view, .css-view').forEach(v => v.classList.remove('active'));
|
|
|
+ if (tab === 'js') {
|
|
|
+ document.querySelector('.tabs .tab:nth-child(1)')?.classList.add('active');
|
|
|
+ document.getElementById('js-code')?.classList.add('active');
|
|
|
+ } else if (tab === 'html') {
|
|
|
+ document.querySelector('.tabs .tab:nth-child(2)')?.classList.add('active');
|
|
|
+ document.getElementById('html-code')?.classList.add('active');
|
|
|
+ } else {
|
|
|
+ document.querySelector('.tabs .tab:nth-child(3)')?.classList.add('active');
|
|
|
+ document.getElementById('css-code')?.classList.add('active');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function setJsCode(code) {
|
|
|
+ const jsPre = document.getElementById('js-code');
|
|
|
+ if (!jsPre) return;
|
|
|
+ jsPre.textContent = code;
|
|
|
+ try { delete jsPre.dataset.highlighted; } catch {}
|
|
|
+ try { jsPre.dataset.highlighted = '0'; } catch {}
|
|
|
+ if (typeof window.__highlightCssViews === 'function') {
|
|
|
+ window.__highlightCssViews();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function openSingle(type, sizeKey) {
|
|
|
+ if (typeof window.$ !== 'function') return;
|
|
|
+ const showIcon = !!document.getElementById('optIcon')?.checked;
|
|
|
+ const popupAnimation = !!document.getElementById('optPopup')?.checked;
|
|
|
+ const closeOnEsc = !!document.getElementById('optEsc')?.checked;
|
|
|
+ const size = SIZE_PRESETS[sizeKey] || null;
|
|
|
+
|
|
|
+ const code = `$.layer({
|
|
|
+ title: 'Background: ${type.toUpperCase()}',
|
|
|
+ text: 'Layer popup background demo.',
|
|
|
+ background: '${BACKGROUNDS[type]}',
|
|
|
+ width: ${size ? JSON.stringify(size.width) : 'null'},
|
|
|
+ height: ${size ? JSON.stringify(size.height) : 'null'},
|
|
|
+ icon: ${showIcon ? "'svg:BallSorting'" : 'null'},
|
|
|
+ popupAnimation: ${popupAnimation},
|
|
|
+ closeOnEsc: ${closeOnEsc}
|
|
|
+});`;
|
|
|
+ setJsCode(code);
|
|
|
+
|
|
|
+ $.layer({
|
|
|
+ title: 'Background: ' + type.toUpperCase(),
|
|
|
+ text: 'Layer popup background demo.',
|
|
|
+ background: BACKGROUNDS[type],
|
|
|
+ width: size ? size.width : null,
|
|
|
+ height: size ? size.height : null,
|
|
|
+ icon: showIcon ? 'svg:BallSorting' : null,
|
|
|
+ popupAnimation,
|
|
|
+ closeOnEsc
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function openSteps(mode) {
|
|
|
+ if (typeof window.$ !== 'function') return;
|
|
|
+ const showIcon = !!document.getElementById('optIcon')?.checked;
|
|
|
+ const popupAnimation = !!document.getElementById('optPopup')?.checked;
|
|
|
+ const closeOnEsc = !!document.getElementById('optEsc')?.checked;
|
|
|
+
|
|
|
+ const same = BACKGROUNDS.svg;
|
|
|
+ const a = BACKGROUNDS.svg;
|
|
|
+ const b = BACKGROUNDS.image;
|
|
|
+
|
|
|
+ const code = `$.layer({
|
|
|
+ title: 'Step 1',
|
|
|
+ text: 'Background should follow when different.',
|
|
|
+ background: ${mode === 'same' ? 'same' : 'a'},
|
|
|
+ icon: ${showIcon ? "'info'" : 'null'},
|
|
|
+ popupAnimation: ${popupAnimation},
|
|
|
+ closeOnEsc: ${closeOnEsc},
|
|
|
+ showCancelButton: true
|
|
|
+})
|
|
|
+.step({
|
|
|
+ title: 'Step 2',
|
|
|
+ text: 'Swipe left/right to see background transition.',
|
|
|
+ background: ${mode === 'same' ? 'same' : 'b'}
|
|
|
+})
|
|
|
+.step({
|
|
|
+ title: 'Step 3',
|
|
|
+ text: 'Back to the first background.',
|
|
|
+ background: ${mode === 'same' ? 'same' : 'a'}
|
|
|
+})
|
|
|
+.run();`;
|
|
|
+ setJsCode(code.replace(/\b(same|a|b)\b/g, (m) => {
|
|
|
+ if (m === 'same') return `'${same}'`;
|
|
|
+ if (m === 'a') return `'${a}'`;
|
|
|
+ return `'${b}'`;
|
|
|
+ }));
|
|
|
+
|
|
|
+ $.layer({
|
|
|
+ title: 'Step 1',
|
|
|
+ text: 'Background should follow when different.',
|
|
|
+ background: mode === 'same' ? same : a,
|
|
|
+ icon: showIcon ? 'info' : null,
|
|
|
+ popupAnimation,
|
|
|
+ closeOnEsc,
|
|
|
+ showCancelButton: true
|
|
|
+ })
|
|
|
+ .step({
|
|
|
+ title: 'Step 2',
|
|
|
+ text: 'Swipe left/right to see background transition.',
|
|
|
+ background: mode === 'same' ? same : b
|
|
|
+ })
|
|
|
+ .step({
|
|
|
+ title: 'Step 3',
|
|
|
+ text: 'Back to the first background.',
|
|
|
+ background: mode === 'same' ? same : a
|
|
|
+ })
|
|
|
+ .run();
|
|
|
+ }
|
|
|
+
|
|
|
+ function goPrev() { window.parent?.docNavigatePrev?.(CURRENT); }
|
|
|
+ function goNext() { window.parent?.docNavigateNext?.(CURRENT); }
|
|
|
+
|
|
|
+ function syncNavLabels() {
|
|
|
+ const api = window.parent?.docGetPrevNext;
|
|
|
+ if (typeof api !== 'function') return;
|
|
|
+ const { prev, next, current } = api(CURRENT) || {};
|
|
|
+ const prevLink = document.getElementById('prevLink');
|
|
|
+ const nextLink = document.getElementById('nextLink');
|
|
|
+ if (prev) document.getElementById('prevTitle').textContent = prev.title || prev.url;
|
|
|
+ else { prevLink.style.visibility = 'hidden'; }
|
|
|
+ if (next) document.getElementById('nextTitle').textContent = next.title || next.url;
|
|
|
+ else { nextLink.style.visibility = 'hidden'; }
|
|
|
+ document.getElementById('navCenter').textContent = (current && current.group) ? current.group : 'Layer';
|
|
|
+ }
|
|
|
+
|
|
|
+ try { window.parent?.setMiddleActive?.(CURRENT); } catch {}
|
|
|
+ syncNavLabels();
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
robert