robert
/
xjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Transforms - 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: 260px;
      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: 320px; overflow: visible; }
    .grid-bg {
      stroke: rgba(255,255,255,0.06);
      stroke-width: 1;
    }
    .box {
      fill: rgba(255,159,67,0.15);
      stroke: rgba(255,159,67,0.45);
      stroke-width: 2;
      rx: 10;
      ry: 10;
      transform-box: fill-box;
      transform-origin: center;
    }
    .box.red {
      fill: rgba(255,75,75,0.12);
      stroke: rgba(255,75,75,0.45);
    }
    .box.gray {
      fill: rgba(255,255,255,0.06);
      stroke: rgba(255,255,255,0.16);
    }
    .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;
    }
  </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>SVG transform（x/y/rotate/scale）</h1>
    <p class="description">
      SVG 元素也能像普通 DOM 一样做 transform 动画：<code class="inline">x</code>/<code class="inline">y</code>、<code class="inline">rotate</code>、<code class="inline">scale</code>。
      这类通常会走 WAAPI，性能也更稳。
    </p>
    <p class="hint">
      <strong>建议：</strong>如果你要做“动起来的图标/插画”，优先用 transform（位移/旋转/缩放），再配合 opacity / filter。
    </p>

    <div class="box-container">
      <div class="box-header">
        <div class="box-title">SVG transforms 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="fun">xjs</span><span class="punc">(</span><span class="str">'#b1'</span><span class="punc">)</span>.<span class="fun">animate</span><span class="punc">({</span> x<span class="punc">:</span> <span class="str">'6rem'</span><span class="punc">,</span> rotate<span class="punc">:</span> <span class="str">'1turn'</span><span class="punc"> }</span><span class="punc">)</span><span class="punc">;</span>
<span class="fun">xjs</span><span class="punc">(</span><span class="str">'#b2'</span><span class="punc">)</span>.<span class="fun">animate</span><span class="punc">({</span> y<span class="punc">:</span> <span class="str">'-3rem'</span><span class="punc">,</span> scale<span class="punc">:</span> <span class="punc">[</span><span class="num">1</span><span class="punc">,</span> <span class="num">1.35</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;rect</span> <span class="attr">id</span>=<span class="val">"b1"</span> <span class="attr">x</span>=<span class="val">"78"</span> <span class="attr">y</span>=<span class="val">"92"</span> <span class="attr">width</span>=<span class="val">"44"</span> <span class="attr">height</span>=<span class="val">"44"</span> <span class="tag">/&gt;</span>
      </div>

      <pre id="css-code" class="css-view">.box { transform-box: fill-box; transform-origin: center; }</pre>

      <div class="feature-desc">
        <strong>功能说明：</strong>
        <br>- 对 SVG 做 transform 动画时，建议设置 <code class="inline">transform-box</code> 和 <code class="inline">transform-origin</code>，旋转更符合直觉。
        <br>- 你可以把多个图形组合成一个小“角色”，用一套参数让它动起来。
      </div>

      <div class="demo-visual">
        <div class="stage">
          <svg viewBox="0 0 320 240" aria-label="SVG transforms demo">
            <!-- background grid -->
            <g opacity="1">
              <path class="grid-bg" d="M16 40 H304"></path>
              <path class="grid-bg" d="M16 80 H304"></path>
              <path class="grid-bg" d="M16 120 H304"></path>
              <path class="grid-bg" d="M16 160 H304"></path>
              <path class="grid-bg" d="M16 200 H304"></path>
              <path class="grid-bg" d="M64 24 V216"></path>
              <path class="grid-bg" d="M112 24 V216"></path>
              <path class="grid-bg" d="M160 24 V216"></path>
              <path class="grid-bg" d="M208 24 V216"></path>
              <path class="grid-bg" d="M256 24 V216"></path>
            </g>

            <rect id="b1" class="box" x="78" y="92" width="44" height="44" rx="10" ry="10"></rect>
            <rect id="b2" class="box gray" x="138" y="92" width="44" height="44" rx="10" ry="10"></rect>
            <rect id="b3" class="box red" x="198" y="92" width="44" height="44" rx="10" ry="10"></rect>
            <text class="label" x="160" y="230" text-anchor="middle">x / y / rotate / scale</text>
          </svg>
        </div>
        <div class="panel">
          <div>
            <div class="control">
              <label for="dist">distance</label>
              <input id="dist" type="range" min="20" max="140" step="5" value="96" />
              <output id="distOut">96px</output>
            </div>
            <div class="control">
              <label for="dur">duration</label>
              <input id="dur" type="range" min="200" max="2400" step="50" value="900" />
              <output id="durOut">900ms</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"></script>
  <script src="../../xjs.js"></script>
  <script>
    const CURRENT = 'svg/test_svg_transforms.html';
    let __ctls = [];

    const b1 = document.getElementById('b1');
    const b2 = document.getElementById('b2');
    const b3 = document.getElementById('b3');
    const dist = document.getElementById('dist');
    const dur = document.getElementById('dur');
    const distOut = document.getElementById('distOut');
    const durOut = document.getElementById('durOut');

    function read() {
      const d = Number(dist.value);
      const t = Number(dur.value);
      distOut.textContent = d + 'px';
      durOut.textContent = t + 'ms';
      return { d, t };
    }

    function reset() {
      (__ctls || []).forEach(c => { try { c?.cancel?.(); } catch {} });
      __ctls = [];
      [b1, b2, b3].forEach(el => { if (el) el.style.transform = 'none'; });
    }

    function runDemo() {
      reset();
      const { d, t } = read();
      __ctls.push(xjs(b1).animate({ x: d, rotate: '1turn', duration: t, easing: 'ease-out' }));
      __ctls.push(xjs(b2).animate({ y: -Math.round(d * 0.55), scale: [1, 1.35], duration: t, easing: 'ease-in-out' }));
      __ctls.push(xjs(b3).animate({ x: -d, rotate: '-1turn', duration: t, easing: 'ease-out' }));
    }

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

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