|
|
@@ -6,20 +6,12 @@
|
|
|
<title>SVG Motion Path - Animal.js</title>
|
|
|
<link rel="stylesheet" href="../demo.css">
|
|
|
<style>
|
|
|
- .hint {
|
|
|
- color: #9a9a9a;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 1.65;
|
|
|
- margin-top: -8px;
|
|
|
- margin-bottom: 16px;
|
|
|
- }
|
|
|
.demo-visual {
|
|
|
padding: 26px 30px;
|
|
|
background: #151515;
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 280px;
|
|
|
gap: 16px;
|
|
|
- align-items: stretch;
|
|
|
}
|
|
|
.stage {
|
|
|
background: rgba(0,0,0,0.25);
|
|
|
@@ -27,7 +19,6 @@
|
|
|
border-radius: 12px;
|
|
|
padding: 14px;
|
|
|
overflow: hidden;
|
|
|
- position: relative;
|
|
|
min-height: 220px;
|
|
|
display: grid;
|
|
|
place-items: center;
|
|
|
@@ -40,40 +31,7 @@
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 12px;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .control {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 90px 1fr 64px;
|
|
|
- gap: 10px;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .control label { color: #bdbdbd; font-size: 12px; font-weight: 800; }
|
|
|
- .control output { color: #e6e6e6; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }
|
|
|
- input[type="range"] { width: 100%; }
|
|
|
- .chip {
|
|
|
- display: inline-flex;
|
|
|
- gap: 10px;
|
|
|
- align-items: center;
|
|
|
- padding: 8px 10px;
|
|
|
- border-radius: 12px;
|
|
|
- border: 1px solid #2a2a2a;
|
|
|
- background: rgba(255,255,255,0.02);
|
|
|
- color: #cfcfcf;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- .lamp {
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- border-radius: 50%;
|
|
|
- background: #444;
|
|
|
}
|
|
|
- .lamp.on {
|
|
|
- background: var(--accent-color);
|
|
|
- box-shadow: 0 0 0 5px rgba(255,159,67,0.14);
|
|
|
- }
|
|
|
-
|
|
|
svg { width: 100%; height: 100%; max-height: 260px; }
|
|
|
.path {
|
|
|
fill: none;
|
|
|
@@ -82,18 +40,10 @@
|
|
|
stroke-linecap: round;
|
|
|
stroke-linejoin: round;
|
|
|
}
|
|
|
- .path.hint {
|
|
|
- stroke-dasharray: 6 6;
|
|
|
- stroke: rgba(255,255,255,0.12);
|
|
|
- }
|
|
|
.runner {
|
|
|
fill: var(--accent-color);
|
|
|
filter: drop-shadow(0 0 8px rgba(255,159,67,0.25));
|
|
|
}
|
|
|
- .runner-eye {
|
|
|
- fill: rgba(0,0,0,0.55);
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -105,197 +55,44 @@
|
|
|
|
|
|
<h1>沿路径运动（Motion Path）</h1>
|
|
|
<p class="description">让一个小点沿着 path 跑：像小飞机巡航、像精灵带路、像 UI 的“引导线”。</p>
|
|
|
- <p class="hint">
|
|
|
- <strong>实现思路：</strong>把动画进度（0..1）映射到 path 的长度，然后用 <code class="inline">getPointAtLength()</code>
|
|
|
- 取出坐标，再把坐标写到目标的 transform 上。
|
|
|
- </p>
|
|
|
|
|
|
<div class="box-container">
|
|
|
- <div class="box-header">
|
|
|
- <div class="box-title">Motion path code example</div>
|
|
|
- <div class="box-right">
|
|
|
- <button class="icon-btn" type="button" title="Copy" onclick="DocPage.copyActiveCode()" aria-label="Copy code">
|
|
|
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
|
- <rect x="9" y="9" width="13" height="13" rx="2"></rect>
|
|
|
- <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
|
- </svg>
|
|
|
- </button>
|
|
|
- <div class="tabs" role="tablist" aria-label="Code tabs">
|
|
|
- <div class="tab active" role="tab" aria-selected="true" tabindex="0" onclick="DocPage.switchTab('js')">JavaScript</div>
|
|
|
- <div class="tab" role="tab" aria-selected="false" tabindex="-1" onclick="DocPage.switchTab('html')">HTML</div>
|
|
|
- <div class="tab" role="tab" aria-selected="false" tabindex="-1" onclick="DocPage.switchTab('css')">CSS</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="js-code" class="code-view active">
|
|
|
-<span class="kwd">const</span> path <span class="punc">=</span> document.<span class="fun">querySelector</span>(<span class="str">'#track'</span>)<span class="punc">;</span>
|
|
|
-<span class="kwd">const</span> runner <span class="punc">=</span> document.<span class="fun">querySelector</span>(<span class="str">'#runner'</span>)<span class="punc">;</span>
|
|
|
-<span class="kwd">const</span> len <span class="punc">=</span> path.<span class="fun">getTotalLength</span>()<span class="punc">;</span>
|
|
|
-
|
|
|
-<span class="fun">xjs</span><span class="punc">({</span>p<span class="punc">:</span> <span class="num">0</span><span class="punc">}</span><span class="punc">)</span>.<span class="fun">animate</span><span class="punc">({</span>
|
|
|
- p<span class="punc">:</span> <span class="punc">[</span><span class="num">0</span><span class="punc">,</span> <span class="num">1</span><span class="punc">]</span><span class="punc">,</span>
|
|
|
- duration<span class="punc">:</span> <span class="num">1400</span><span class="punc">,</span>
|
|
|
- easing<span class="punc">:</span> <span class="str">'ease-in-out'</span><span class="punc">,</span>
|
|
|
- update<span class="punc">:</span> <span class="punc">({</span>progress<span class="punc">})</span> <span class="punc">=></span> <span class="punc">{</span>
|
|
|
- <span class="kwd">const</span> pt <span class="punc">=</span> path.<span class="fun">getPointAtLength</span>(len <span class="punc">*</span> progress)<span class="punc">;</span>
|
|
|
- runner.<span class="fun">setAttribute</span>(<span class="str">'transform'</span><span class="punc">,</span> <span class="str">`translate(${pt.x} ${pt.y})`</span>)<span class="punc">;</span>
|
|
|
- <span class="punc">}</span>
|
|
|
-<span class="punc">}</span><span class="punc">)</span><span class="punc">;</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="html-code" class="html-view">
|
|
|
-<span class="tag"><path</span> <span class="attr">id</span>=<span class="val">"track"</span> <span class="attr">d</span>=<span class="val">"M..."</span> <span class="tag">/></span>
|
|
|
-<span class="tag"><g</span> <span class="attr">id</span>=<span class="val">"runner"</span><span class="tag">></span>...<span class="tag"></g></span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <pre id="css-code" class="css-view">.runner { fill: var(--accent-color); filter: drop-shadow(0 0 8px rgba(255,159,67,0.25)); }</pre>
|
|
|
-
|
|
|
- <div class="feature-desc">
|
|
|
- <strong>功能说明：</strong>
|
|
|
- <br>- 这里用 <code class="inline">xjs(plainObject)</code> 做“进度发生器”，在 <code class="inline">update</code> 里把进度映射到 path。
|
|
|
- <br>- 好处是：你可以把任何复杂逻辑（路径、碰撞、转向、跟随摄像机）都写在 update 里。
|
|
|
- </div>
|
|
|
-
|
|
|
<div class="demo-visual">
|
|
|
<div class="stage">
|
|
|
- <svg viewBox="0 0 320 180" aria-label="Motion path demo">
|
|
|
+ <svg viewBox="0 0 320 180">
|
|
|
<path id="track" class="path" d="M18,142 C62,14 142,12 176,90 C204,154 262,166 300,42" />
|
|
|
- <path class="path hint" d="M18,142 C62,14 142,12 176,90 C204,154 262,166 300,42" />
|
|
|
<g id="runner" transform="translate(18 142)">
|
|
|
<circle class="runner" cx="0" cy="0" r="10"></circle>
|
|
|
- <circle class="runner-eye" cx="3" cy="-2" r="2.2"></circle>
|
|
|
</g>
|
|
|
</svg>
|
|
|
</div>
|
|
|
<div class="panel">
|
|
|
- <div class="chip"><span id="lamp" class="lamp"></span><span id="stateText">READY</span></div>
|
|
|
- <div>
|
|
|
- <div class="control">
|
|
|
- <label for="dur">duration</label>
|
|
|
- <input id="dur" type="range" min="300" max="3600" step="50" value="1400" />
|
|
|
- <output id="durOut">1400ms</output>
|
|
|
- </div>
|
|
|
- <div class="control">
|
|
|
- <label for="turn">spin</label>
|
|
|
- <input id="turn" type="range" min="0" max="3" step="0.25" value="0.5" />
|
|
|
- <output id="turnOut">0.5turn</output>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="display:flex; gap:10px; justify-content:flex-end;">
|
|
|
- <button class="play-btn secondary" onclick="pauseDemo()">PAUSE</button>
|
|
|
- <button class="play-btn secondary" onclick="resumeDemo()">RESUME</button>
|
|
|
- <button class="play-btn" onclick="runDemo()">REPLAY</button>
|
|
|
- </div>
|
|
|
+ <button class="play-btn" onclick="runDemo()">REPLAY</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="action-bar" style="justify-content:flex-end;">
|
|
|
- <button class="play-btn secondary" onclick="randomize()">SURPRISE</button>
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="doc-nav" aria-label="Previous and next navigation">
|
|
|
- <a href="#" onclick="goPrev(); return false;">
|
|
|
- <span>
|
|
|
- <span class="nav-label">Previous</span><br>
|
|
|
- <span id="prev-title" class="nav-title">—</span>
|
|
|
- </span>
|
|
|
- <span aria-hidden="true">←</span>
|
|
|
- </a>
|
|
|
- <div id="nav-center" class="nav-center">SVG</div>
|
|
|
- <a href="#" onclick="goNext(); return false;">
|
|
|
- <span>
|
|
|
- <span class="nav-label">Next</span><br>
|
|
|
- <span id="next-title" class="nav-title">—</span>
|
|
|
- </span>
|
|
|
- <span aria-hidden="true">→</span>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+ <script src="../page_utils.js"></script>
|
|
|
+ <script src="../../xjs.js"></script>
|
|
|
+ <script>
|
|
|
+ const path = document.getElementById('track');
|
|
|
+ const runner = document.getElementById('runner');
|
|
|
+
|
|
|
+ function runDemo() {
|
|
|
+ const len = path.getTotalLength();
|
|
|
+ xjs({ p: 0 }).animate({
|
|
|
+ p: [0, 1],
|
|
|
+ duration: 1400,
|
|
|
+ easing: 'ease-in-out',
|
|
|
+ update: ({ progress }) => {
|
|
|
+ const pt = path.getPointAtLength(len * progress);
|
|
|
+ runner.setAttribute('transform', `translate(${pt.x} ${pt.y})`);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ setTimeout(runDemo, 320);
|
|
|
+ </script>
|
|
|
</div>
|
|
|
-
|
|
|
- <div id="toast" class="toast" role="status" aria-live="polite"></div>
|
|
|
-
|
|
|
- <script src="../page_utils.js"></script>
|
|
|
- <script src="../../xjs.js"></script>
|
|
|
- <script>
|
|
|
- const CURRENT = 'svg/test_motion_path.html';
|
|
|
- let __ctl = null;
|
|
|
-
|
|
|
- const path = document.getElementById('track');
|
|
|
- const runner = document.getElementById('runner');
|
|
|
- const dur = document.getElementById('dur');
|
|
|
- const turn = document.getElementById('turn');
|
|
|
- const durOut = document.getElementById('durOut');
|
|
|
- const turnOut = document.getElementById('turnOut');
|
|
|
- const lamp = document.getElementById('lamp');
|
|
|
- const stateText = document.getElementById('stateText');
|
|
|
-
|
|
|
- function setState(t, on) {
|
|
|
- stateText.textContent = t;
|
|
|
- lamp.classList.toggle('on', !!on);
|
|
|
- }
|
|
|
-
|
|
|
- function read() {
|
|
|
- const duration = Number(dur.value);
|
|
|
- const spin = Number(turn.value);
|
|
|
- durOut.textContent = duration + 'ms';
|
|
|
- turnOut.textContent = spin + 'turn';
|
|
|
- return { duration, spin };
|
|
|
- }
|
|
|
-
|
|
|
- function reset() {
|
|
|
- try { __ctl?.cancel?.(); } catch {}
|
|
|
- __ctl = null;
|
|
|
- runner.setAttribute('transform', 'translate(18 142) rotate(0)');
|
|
|
- setState('READY', false);
|
|
|
- }
|
|
|
-
|
|
|
- function runDemo() {
|
|
|
- reset();
|
|
|
- const { duration, spin } = read();
|
|
|
- const len = path.getTotalLength();
|
|
|
-
|
|
|
- setState('RUNNING', true);
|
|
|
- __ctl = xjs({ p: 0 }).animate({
|
|
|
- p: [0, 1],
|
|
|
- duration,
|
|
|
- easing: 'ease-in-out',
|
|
|
- update: ({ progress }) => {
|
|
|
- const pt = path.getPointAtLength(len * progress);
|
|
|
- const r = spin * 360 * progress;
|
|
|
- runner.setAttribute('transform', `translate(${pt.x} ${pt.y}) rotate(${r})`);
|
|
|
- },
|
|
|
- complete: () => setState('DONE', false)
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function pauseDemo() {
|
|
|
- try { __ctl?.pause?.(); setState('PAUSED', true); } catch {}
|
|
|
- }
|
|
|
- function resumeDemo() {
|
|
|
- try { __ctl?.play?.(); setState('RUNNING', true); } catch {}
|
|
|
- }
|
|
|
-
|
|
|
- function randomize() {
|
|
|
- dur.value = String(400 + Math.floor(Math.random() * 55) * 50);
|
|
|
- turn.value = String((Math.floor(Math.random() * 13) / 4).toFixed(2));
|
|
|
- read();
|
|
|
- runDemo();
|
|
|
- }
|
|
|
-
|
|
|
- dur.addEventListener('input', read);
|
|
|
- turn.addEventListener('input', read);
|
|
|
-
|
|
|
- function goPrev() { window.parent?.docNavigatePrev?.(CURRENT); }
|
|
|
- function goNext() { window.parent?.docNavigateNext?.(CURRENT); }
|
|
|
-
|
|
|
- DocPage.enableTabKeyboardNav();
|
|
|
- DocPage.syncMiddleActive(CURRENT);
|
|
|
- DocPage.syncPrevNext(CURRENT);
|
|
|
- read();
|
|
|
- setTimeout(runDemo, 320);
|
|
|
- </script>
|
|
|
</body>
|
|
|
</html>
|
|
|
-
|
robert