スプリング物理ドラッグ
つまみをドラッグして離すと減衰振動で中央へ戻る。stiffness（硬さ）と damping（減衰）を変えると、同じ距離でも戻り方がまったく変わる。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- ドラッグして離す操作（シート・つまみ）
- 途中で掴み直される動きに速度を引き継ぐとき
- stiffness／damping の効き方を試す見本
- 避ける場面
- 介入されない単純な出現・退場アニメ
- 揺れが不要な業務画面の遷移
- 構成要素
- トラックと中心線
- つまみ
- 減衰曲線グラフ
- stiffness スライダー
- damping スライダー
- はじくボタン
- 持っている状態
- 通常
- 押下中
- フォーカス
- キーボード
Tab でつまみへ、←→ で端まで振って離す（ばねで中央へ戻る）。スライダーは ←→ で値変更、「右へはじく」は Enter／Space
- 支援技術
つまみは button＋aria-label、グラフは svg に aria-label、値は b 要素に数値で表示。スライダーはネイティブ range。reduced-motion では離した瞬間に振動せず中央へ即戻る
- 動き
離した後は rAF のばね物理（a=−k·x−c·v、1/120s 刻み）で減衰振動しながら中央へ。時間でなく物理量で戻り方が決まる
デザインの要点
- スプリングは「時間」でなく「物理量」で動きを決める。途中で掴み直しても速度を引き継ぎ、途切れない
- stiffness を上げると速く戻り、damping を下げると行き過ぎて揺れる。UI では揺れ1回以内（damping 高め）が上品
- cubic-bezier では中断時の速度を引き継げない。ドラッグ→離す、のように途中で介入される動きにスプリングを使う
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="sp-wrap">
<div class="sp-track" id="spTrack">
<span class="sp-center" aria-hidden="true"></span>
<button class="sp-knob" id="spKnob" type="button" aria-label="つまみ（ドラッグして離す）"></button>
</div>
<svg class="sp-graph" id="spGraph" viewBox="0 0 300 80" preserveAspectRatio="none" aria-label="離したあとの位置の変化"><line x1="0" y1="40" x2="300" y2="40" stroke="#d9d2c5" stroke-width="1"/><polyline id="spCurve" fill="none" stroke="#2b50c7" stroke-width="2" points=""/></svg>
<div class="sp-controls">
<label class="sp-field"><span>stiffness <b id="spKVal">180</b></span><input id="spK" type="range" min="40" max="400" value="180"></label>
<label class="sp-field"><span>damping <b id="spDVal">14</b></span><input id="spD" type="range" min="2" max="40" value="14"></label>
<button class="sp-flick" id="spFlick" type="button">右へはじく</button>
</div>
</div>