robert
/
xjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Morph (path d) - 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: 300px;
      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%; }

    svg { width: 100%; height: 100%; max-height: 340px; overflow: visible; }
    .ref {
      fill: none;
      stroke: rgba(255,255,255,0.10);
      stroke-width: 2;
      stroke-dasharray: 6 6;
      opacity: 0.75;
    }
    .ref.to { stroke: rgba(255,159,67,0.32); }
    .ref.from { stroke: rgba(255,75,75,0.28); }
    .path {
      fill: rgba(255,159,67,0.12);
      stroke: rgba(255,159,67,0.62);
      stroke-width: 2.2;
      filter: drop-shadow(0 0 22px rgba(255,159,67,0.10));
    }
    .label {
      fill: rgba(255,255,255,0.22);
      font-weight: 800;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      letter-spacing: 0.8px;
    }
    .meter {
      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: 800;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #444;
    }
    .dot.on {
      background: var(--accent-color);
      box-shadow: 0 0 0 5px rgba(255,159,67,0.14);
    }
    .tools {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .mini-btn {
      background: rgba(255,255,255,0.02);
      border: 1px solid #2a2a2a;
      color: #cfcfcf;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .mini-btn:hover {
      border-color: var(--orange);
      color: var(--orange);
    }
  </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>变形动画：path 的 <code class="inline">d</code></h1>
    <p class="description">
      这就是你想要的“形状变形”。在本库里，只要两段 <code class="inline">d</code> 字符串<strong>结构一致</strong>（命令序列相同，数字数量相同），
      就能直接插值，做出平滑 morph。
    </p>
    <p class="hint">
      <strong>关键点：</strong>不要试图让“完全不相干”的两条 path 直接互变。先让它们有相同的命令结构（比如都用 4 段 cubic Bézier），再改数值。
      <br>下面 demo 会显示两条参考虚线（From/To），中间那条橙色实体才是正在 morph 的路径。
    </p>

    <div class="box-container">
      <div class="box-header">
        <div class="box-title">Morph (path d) 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> FROM <span class="punc">=</span> <span class="str">'M160 60 C204 60 240 96 240 140 C240 184 204 220 160 220 C116 220 80 184 80 140 C80 96 116 60 160 60 Z'</span><span class="punc">;</span>
<span class="kwd">const</span> TO <span class="punc">=</span> <span class="str">'M160 34 C252 62 260 112 224 140 C188 168 196 238 160 224 C124 210 132 168 96 140 C60 112 68 62 160 34 Z'</span><span class="punc">;</span>

<span class="fun">xjs</span><span class="punc">(</span><span class="str">'#m'</span><span class="punc">)</span>.<span class="fun">animate</span><span class="punc">({</span>
  d<span class="punc">:</span> <span class="punc">[</span>FROM<span class="punc">,</span> TO<span class="punc">]</span><span class="punc">,</span>
  duration<span class="punc">:</span> <span class="num">1200</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> console.<span class="fun">log</span>(progress)
<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">"m"</span> <span class="attr">d</span>=<span class="val">"M160 40 C..."</span> <span class="tag">/&gt;</span>
      </div>

      <pre id="css-code" class="css-view">.path { fill: rgba(255,159,67,0.12); stroke: rgba(255,159,67,0.62); stroke-width: 2.2; }</pre>

      <div class="feature-desc">
        <strong>功能说明：</strong>
        <br>- 本库会把字符串里的数字提取出来逐个插值，然后把字符串“拼回去”写回属性。
        <br>- 适合：logo 变形、icon morph、液体/呼吸形状、SVG 插画过渡。
      </div>

      <div class="demo-visual">
        <div class="stage">
          <svg viewBox="0 0 320 260" aria-label="Morph path demo">
            <path id="refFrom" class="ref from"
              d="M160 60 C204 60 240 96 240 140 C240 184 204 220 160 220 C116 220 80 184 80 140 C80 96 116 60 160 60 Z"></path>
            <path id="refTo" class="ref to"
              d="M160 34 C252 62 260 112 224 140 C188 168 196 238 160 224 C124 210 132 168 96 140 C60 112 68 62 160 34 Z"></path>
            <path id="m" class="path"
              d="M160 60 C204 60 240 96 240 140 C240 184 204 220 160 220 C116 220 80 184 80 140 C80 96 116 60 160 60 Z"></path>
            <text class="label" x="160" y="252" text-anchor="middle">path d morph (watch orange shape)</text>
          </svg>
        </div>
        <div class="panel">
          <div>
            <div class="meter">
              <span id="runDot" class="dot"></span>
              <span id="pText">progress: 0%</span>
            </div>
            <div class="tools">
              <button class="mini-btn" type="button" onclick="setFrom()">SET FROM</button>
              <button class="mini-btn" type="button" onclick="setTo()">SET TO</button>
              <button class="mini-btn" type="button" onclick="logNow()">LOG d</button>
            </div>
            <div class="control">
              <label for="dur">duration</label>
              <input id="dur" type="range" min="200" max="3200" step="50" value="1200" />
              <output id="durOut">1200ms</output>
            </div>
            <div class="control">
              <label for="loop">loop</label>
              <input id="loop" type="range" min="1" max="6" step="1" value="2" />
              <output id="loopOut">2</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>

    <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?v=1"></script>
  <script src="../../xjs.js?v=2"></script>
  <script>
    // Debug helper
    /* window.addEventListener('load', () => { ... }) */
  </script>
  <script>
    const CURRENT = 'svg/test_morph_path.html';
    let __ctls = [];
    let __lastD = '';

    const m = document.getElementById('m');
    const dur = document.getElementById('dur');
    const loop = document.getElementById('loop');
    const durOut = document.getElementById('durOut');
    const loopOut = document.getElementById('loopOut');
    const pText = document.getElementById('pText');
    const runDot = document.getElementById('runDot');

    const FROM = 'M160 60 C204 60 240 96 240 140 C240 184 204 220 160 220 C116 220 80 184 80 140 C80 96 116 60 160 60 Z';
    const TO = 'M160 34 C252 62 260 112 224 140 C188 168 196 238 160 224 C124 210 132 168 96 140 C60 112 68 62 160 34 Z';

    function read() {
      const d = Number(dur.value);
      const l = Number(loop.value);
      durOut.textContent = d + 'ms';
      loopOut.textContent = String(l);
      return { d, l };
    }

    function reset() {
      (__ctls || []).forEach(c => { try { c?.cancel?.(); } catch {} });
      __ctls = [];
      m.setAttribute('d', FROM);
      __lastD = m.getAttribute('d') || '';
      if (pText) pText.textContent = 'progress: 0%';
      if (runDot) runDot.classList.remove('on');
    }

    function bboxText() {
      try {
        const bb = m.getBBox();
        const w = Math.round(bb.width);
        const h = Math.round(bb.height);
        return `bbox:${w}×${h}`;
      } catch {
        return 'bbox:n/a';
      }
    }

    function setFrom() {
      reset();
      m.setAttribute('d', FROM);
      __lastD = m.getAttribute('d') || '';
      if (pText) pText.textContent = 'manual: FROM  |  ' + bboxText();
    }

    function setTo() {
      reset();
      m.setAttribute('d', TO);
      __lastD = m.getAttribute('d') || '';
      if (pText) pText.textContent = 'manual: TO  |  ' + bboxText();
    }

    function logNow() {
      const cur = m.getAttribute('d') || '';
      console.log('[morph:d]', { len: cur.length, head: cur.slice(0, 60), bbox: bboxText() });
      if (pText) pText.textContent = 'logged  |  ' + bboxText();
    }

    function runDemo() {
      reset();
      const { d, l } = read();
      if (runDot) runDot.classList.add('on');
      __ctls.push(xjs(m).animate({
        d: [FROM, TO],
        duration: d,
        easing: 'ease-in-out',
        direction: 'alternate',
        loop: l,
        update: ({ progress }) => {
          const pct = Math.round(progress * 100);
          const cur = m.getAttribute('d') || '';
          const changed = cur && cur !== __lastD;
          if (changed) __lastD = cur;
          if (pText) {
            const head = cur ? cur.slice(0, 18).replace(/\s+/g, ' ') : '';
            pText.textContent = 'progress: ' + pct + '%  |  d: ' + (changed ? 'changing' : 'stuck') + '  |  ' + bboxText() + '  |  ' + head + (cur ? '…' : '');
          }
        },
        complete: () => {
          if (runDot) runDot.classList.remove('on');
        }
      }));
    }

    function pauseDemo() { (__ctls || []).forEach(c => { try { c?.pause?.(); } catch {} }); }
    function resumeDemo() { (__ctls || []).forEach(c => { try { c?.play?.(); } catch {} }); }

    dur.addEventListener('input', read);
    loop.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>