robert
/
xjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG draw() - Animal.js</title>
  <link rel="stylesheet" href="../demo.css">
  <style>
    .demo-visual {
      padding: 26px 30px;
      background: #151515;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: center;
    }
    .card {
      background: rgba(0,0,0,0.25);
      border: 1px solid #262626;
      border-radius: 12px;
      padding: 14px;
      overflow: hidden;
      min-height: 160px;
      position: relative;
    }
    .tag {
      position: absolute;
      left: 12px;
      top: 12px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: #6f6f6f;
      background: rgba(255,255,255,0.02);
      border: 1px solid #2a2a2a;
      padding: 4px 8px;
      border-radius: 999px;
    }
    svg { width: 100%; height: 100%; }
    .stroke-base {
      fill: none;
      stroke: rgba(255,255,255,0.10);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .stroke-draw {
      fill: none;
      stroke: var(--accent-color);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 6px rgba(255,159,67,0.18));
    }
    .stroke-red { stroke: var(--highlight-color); }
    .hint {
      color: #9a9a9a;
      font-size: 12px;
      line-height: 1.65;
      margin-top: -8px;
      margin-bottom: 16px;
    }
  </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>draw() 路径描边</h1>
    <p class="description">把 SVG path/line/circle 变成“正在被画出来”的效果，做 Logo、Loading、强调线条都很香。</p>
    <p class="hint">
      <strong>它怎么做到的？</strong>核心是 <code class="inline">stroke-dasharray</code> 和 <code class="inline">stroke-dashoffset</code>：
      先把“虚线间隔”设成路径总长度，再把 dashoffset 从总长度动画到 0。
    </p>

    <div class="box-container">
      <div class="box-header">
        <div class="box-title">SVG draw() 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">'#p1'</span><span class="punc">)</span>.<span class="fun">draw</span><span class="punc">({</span>
  duration<span class="punc">:</span> <span class="num">900</span><span class="punc">,</span>
  easing<span class="punc">:</span> <span class="str">'ease-out'</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">'#p2'</span><span class="punc">)</span>.<span class="fun">draw</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="punc">[</span><span class="num">0.2</span><span class="punc">,</span> <span class="num">0.8</span><span class="punc">,</span> <span class="num">0.2</span><span class="punc">,</span> <span class="num">1</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;svg</span> <span class="attr">viewBox</span>=<span class="val">"0 0 240 120"</span><span class="tag">&gt;</span>
  <span class="tag">&lt;path</span> <span class="attr">id</span>=<span class="val">"p1"</span> <span class="attr">d</span>=<span class="val">"M..."</span> <span class="tag">/&gt;</span>
  <span class="tag">&lt;path</span> <span class="attr">id</span>=<span class="val">"p2"</span> <span class="attr">d</span>=<span class="val">"M..."</span> <span class="tag">/&gt;</span>
<span class="tag">&lt;/svg&gt;</span>
      </div>

      <pre id="css-code" class="css-view">.stroke-draw { fill: none; stroke: var(--accent-color); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }</pre>

      <div class="feature-desc">
        <strong>功能说明：</strong>
        <br>- <code class="inline">xjs(svgPath).draw()</code> 会自动读取 <code class="inline">getTotalLength()</code> 并设置 dasharray/dashoffset。
        <br>- 你可以把多个路径一起 draw：例如 logo 的多段笔画同时或分批画出来。
      </div>

      <div class="demo-visual">
        <div class="card">
          <div class="tag">SQUIGGLE</div>
          <svg viewBox="0 0 240 120">
            <path class="stroke-base" d="M16,84 C48,18 94,18 120,60 C146,102 194,102 224,36" />
            <path id="p1" class="stroke-draw" d="M16,84 C48,18 94,18 120,60 C146,102 194,102 224,36" />
          </svg>
        </div>
        <div class="card">
          <div class="tag">STAR</div>
          <svg viewBox="0 0 240 120">
            <path class="stroke-base" d="M120 14 L144 54 L188 60 L154 88 L164 110 L120 94 L76 110 L86 88 L52 60 L96 54 Z" />
            <path id="p2" class="stroke-draw stroke-red" d="M120 14 L144 54 L188 60 L154 88 L164 110 L120 94 L76 110 L86 88 L52 60 L96 54 Z" />
          </svg>
        </div>
      </div>

      <div class="action-bar">
        <button class="play-btn" onclick="runDemo()">REPLAY</button>
        <button class="play-btn secondary" onclick="runStagger()">STAGGER</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_draw_path.html';

    function reset() {
      // draw() will re-init dash values, but we also clear offsets to avoid flashes
      document.querySelectorAll('#p1, #p2').forEach(p => {
        p.style.strokeDasharray = '';
        p.style.strokeDashoffset = '';
      });
    }

    function runDemo() {
      reset();
      xjs('#p1').draw({ duration: 900, easing: 'ease-out' });
      xjs('#p2').draw({ duration: 1200, easing: [0.2, 0.8, 0.2, 1] });
    }

    function runStagger() {
      reset();
      xjs('#p1').draw({ duration: 800, easing: 'ease-out' });
      setTimeout(() => xjs('#p2').draw({ duration: 1100, easing: 'ease-in-out' }), 220);
    }

    function goPrev() { window.parent?.docNavigatePrev?.(CURRENT); }
    function goNext() { window.parent?.docNavigateNext?.(CURRENT); }

    DocPage.enableTabKeyboardNav();
    DocPage.syncMiddleActive(CURRENT);
    DocPage.syncPrevNext(CURRENT);
    setTimeout(runDemo, 320);
  </script>
</body>
</html>