フィードバックと操作 · タップへの反応
エラスティックスライダー弹性滑杆
- 速度で伸びる
- 止まると戻る
- 慌ただしさが見える
スライダーのつまみは、動いている速さに比例して横に伸び、止まると丸に戻ります。ゆっくり動かせばほとんど変形せず、素早く弾くとカプセル状に伸びます。「どれだけ急いだか」がそのまま絵になります。
使いどころ
メディアのシーク、音量、明るさなど連続調整に使うと、ドラッグに物理感が出ます。段階的な選択には使わないでください(そこはスナップです)。フォームの短いスライダーも不要です。行程が短く速度が出ないので、効果が見えません。
パラメータ
transform: scaleX 1→1.6 · scaleY 1→0.7 · decay 220ms ease-out · thumb follow 90ms first-order
レシピ
エラスティックスライダー → transform: scaleX 1→1.6 · scaleY 1→0.7 · decay 220ms ease-out · thumb follow 90ms first-order
AI に渡す一文
エラスティックスライダーを作ってください。つまみの現在速度を読み、scaleX(最速で約 1.6)と scaleY(約 0.7、体積を保つ)に写像します。速度が落ちたら 220ms の ease-out で 1 に戻します。つまみ自体は一次遅れの追従(毎フレーム 0.28 近づく)で動かし、イージング関数は使わないでください。イージングは「追いつけない」動きになります。