robert
/
xjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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);
      border: 1px solid #262626;
      border-radius: 12px;
      padding: 14px;
      overflow: hidden;
      position: relative;
      min-height: 220px;
      display: grid;
      place-items: center;
    }
    .panel {
      background: rgba(0,0,0,0.18);
      border: 1px solid #262626;
      border-radius: 12px;
      padding: 14px;
      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;
      stroke: rgba(255,255,255,0.12);
      stroke-width: 2.2;
      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>
  <div class="container">
    <div class="page-top">
      <div class="crumb">ANIMATION › SVG</div>
      <div class="since">SINCE 1.0.0</div>
    </div>

    <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">=&gt;</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">&lt;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">/&gt;</span>
<span class="tag">&lt;g</span> <span class="attr">id</span>=<span class="val">"runner"</span><span class="tag">&gt;</span>...<span class="tag">&lt;/g&gt;</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">
            <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>
        </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>
  </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>