html-effectiveness-proto

04-proto — 原型

"Motion and interaction can't be described, only felt. A throwaway page with the real easing curve or the real click-through tells you in five seconds what a paragraph of prose never could."

何时用

用户说	用哪个范式	模板
"试一下这个 transition / easing / 时长合适吗"	动画沙盒	../../templates/animation.html
"spring vs cubic-bezier 哪个手感对"	同上	同上
"想感受一下这个 flow / 4 屏的 onboarding"	可点击流	自建（见下）

---

范式 4.1 · 动画沙盒

空间形状：动画在中央 + 滑块控制 duration / easing + Play 按钮。用户调到对了为止。

HTML 骨架：

<div class="stage">
  <div class="ball"></div>
</div>
<div class="controls">
  <label>Duration
    <input type="range" id="dur" min="100" max="2000" value="600" step="50">
    <output>600ms</output>
  </label>
  <label>Easing
    <select id="ease">
      <option>cubic-bezier(.4, 0, .2, 1)</option>
      <option>cubic-bezier(.34, 1.56, .64, 1)</option>
      <option>cubic-bezier(.68, -0.55, .27, 1.55)</option>
      <option>linear</option>
      <option>ease-in-out</option>
    </select>
  </label>
  <button id="play" class="btn primary">Play</button>
  <button id="copy" class="btn ghost">Copy CSS</button>
</div>

关键 JS：

const ball = document.querySelector('.ball');
const dur = document.querySelector('#dur');
const ease = document.querySelector('#ease');
const out = dur.parentElement.querySelector('output');

dur.oninput = () => { out.textContent = dur.value + 'ms'; };

document.querySelector('#play').onclick = () => {
  ball.style.transition = `transform ${dur.value}ms ${ease.value}`;
  const at = ball.style.transform === 'translateX(400px)' ? '0' : '400px';
  ball.style.transform = `translateX(${at})`;
};

document.querySelector('#copy').onclick = async (e) => {
  await navigator.clipboard.writeText(`transition: transform ${dur.value}ms ${ease.value};`);
  e.target.textContent = 'Copied ✓';
  setTimeout(() => e.target.textContent = 'Copy CSS', 1500);
};

.stage { position: relative; height: 120px; padding: 40px;
         background: var(--gray-100); border-radius: var(--r-md);
         margin-bottom: var(--sp-5); }
.ball { width: 40px; height: 40px; border-radius: 50%;
        background: var(--clay); }