robert
/
xjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>duration / delay - Animal.js</title>
  <link rel="stylesheet" href="../demo.css">
  <style>
    .row {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 18px;
      align-items: center;
      padding: 18px 0;
      border-bottom: 1px solid #222;
    }
    .row:last-child { border-bottom: none; }
    .hint {
      color: #9a9a9a;
      font-size: 12px;
      line-height: 1.65;
      margin-top: -8px;
      margin-bottom: 16px;
    }
    .dot {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      background: var(--accent-color);
      will-change: transform;
    }
    .track {
      position: relative;
      height: 1px;
      background: #262626;
      margin: 18px 0 8px;
    }
    .panel {
      background: rgba(255,255,255,0.02);
      border: 1px solid #262626;
      border-radius: 10px;
      padding: 14px 14px 10px;
    }
    .control {
      display: grid;
      grid-template-columns: 90px 1fr 64px;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
    }
    .control label { color: #bdbdbd; font-size: 12px; font-weight: 700; }
    .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%; }
    .badge {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid #2a2a2a;
      background: rgba(255,255,255,0.02);
      color: #cfcfcf;
      font-size: 12px;
      font-weight: 700;
    }
    .blink {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #444;
    }
    .blink.on { background: var(--highlight-color); box-shadow: 0 0 0 4px rgba(255,75,75,0.12); }
  </style>
</head>
<body>
  <div class="container">
    <div class="page-top">
      <div class="crumb">ANIMATION › TWEEN PARAMETERS</div>
      <div class="since">SINCE 1.0.0</div>
    </div>

    <h1>duration / delay</h1>
    <p class="description">让动画<strong>快一点/慢一点</strong>，以及<strong>晚一点才开始</strong>。</p>
    <p class="hint">
      <strong>小窍门：</strong><code class="inline">delay</code> 只影响“开始时间”，不会改变动画跑完所需的 <code class="inline">duration</code>。
      你可以把 delay 当成“起跑前的倒计时”。
    </p>

    <div class="box-container">
      <div class="box-header">
        <div class="box-title">duration / delay 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> duration <span class="punc">=</span> <span class="num">900</span><span class="punc">;</span>
<span class="kwd">const</span> delay <span class="punc">=</span> <span class="num">200</span><span class="punc">;</span>

<span class="fun">xjs</span><span class="punc">(</span><span class="str">'.dot'</span><span class="punc">)</span>.<span class="fun">animate</span><span class="punc">({</span>
  x<span class="punc">:</span> <span class="str">'18rem'</span><span class="punc">,</span>
  duration<span class="punc">,</span>
  delay<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>
      </div>

      <div id="html-code" class="html-view">
<span class="tag">&lt;div</span> <span class="attr">class</span>=<span class="val">"dot"</span><span class="tag">&gt;&lt;/div&gt;</span>
      </div>

      <pre id="css-code" class="css-view">.dot { width: 16px; height: 16px; border-radius: 4px; background: var(--accent-color); }</pre>

      <div class="feature-desc">
        <strong>功能说明：</strong>
        <br>- <code class="inline">duration</code>：动画跑完一次需要的时间（毫秒）。
        <br>- <code class="inline">delay</code>：动画开始前等待的时间（毫秒）。
        <br>你可以用 delay 做“队列编排”：比如多个元素按 0ms/80ms/160ms 依次启动。
      </div>

      <div class="demo-visual">
        <div class="row">
          <div>
            <div class="badge"><span id="blink" class="blink"></span><span id="statusText">READY</span></div>
            <div class="track" aria-hidden="true"></div>
            <div class="dot" id="dot"></div>
          </div>
          <div class="panel">
            <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 class="control">
              <label for="del">delay</label>
              <input id="del" type="range" min="0" max="1200" step="50" value="200" />
              <output id="delOut">200ms</output>
            </div>
          </div>
        </div>
      </div>

      <div class="action-bar">
        <button class="play-btn" onclick="runDemo()">REPLAY</button>
        <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">Tween parameters</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 = 'tween_parameters/test_duration_delay.html';
    let __ctl = null;

    const elDot = document.getElementById('dot');
    const elDur = document.getElementById('dur');
    const elDel = document.getElementById('del');
    const elDurOut = document.getElementById('durOut');
    const elDelOut = document.getElementById('delOut');
    const elBlink = document.getElementById('blink');
    const elStatus = document.getElementById('statusText');

    function read() {
      const duration = Number(elDur.value);
      const delay = Number(elDel.value);
      elDurOut.textContent = duration + 'ms';
      elDelOut.textContent = delay + 'ms';
      return { duration, delay };
    }

    function setStatus(s, on) {
      elStatus.textContent = s;
      elBlink.classList.toggle('on', !!on);
    }

    function reset() {
      if (elDot) elDot.style.transform = 'none';
      try { __ctl?.cancel?.(); } catch {}
      __ctl = null;
      setStatus('READY', false);
    }

    function runDemo() {
      reset();
      const { duration, delay } = read();
      setStatus(delay ? ('WAIT ' + delay + 'ms…') : 'GO!', true);
      __ctl = xjs(elDot).animate({
        x: '18rem',
        duration,
        delay,
        easing: 'ease-out',
        begin: () => setStatus('RUNNING', true),
        complete: () => setStatus('DONE', false)
      });
    }

    function randomize() {
      elDur.value = String(200 + Math.floor(Math.random() * 45) * 50);
      elDel.value = String(Math.floor(Math.random() * 25) * 50);
      read();
      runDemo();
    }

    elDur.addEventListener('input', () => { read(); });
    elDel.addEventListener('input', () => { read(); });

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

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