MotionLang

フィードバックと操作 · タップへの反応

エラスティックスライダー弹性滑杆

スライダーのつまみは、動いている速さに比例して横に伸び、止まると丸に戻ります。ゆっくり動かせばほとんど変形せず、素早く弾くとカプセル状に伸びます。「どれだけ急いだか」がそのまま絵になります。

ツールでこの項目を開く

使いどころ

メディアのシーク、音量、明るさなど連続調整に使うと、ドラッグに物理感が出ます。段階的な選択には使わないでください(そこはスナップです)。フォームの短いスライダーも不要です。行程が短く速度が出ないので、効果が見えません。

パラメータ

transform: scaleX 1→1.6 · scaleY 1→0.7 · decay 220ms ease-out · thumb follow 90ms first-order

レシピ

  1. エラスティックスライダー → 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 近づく)で動かし、イージング関数は使わないでください。イージングは「追いつけない」動きになります。

同じカテゴリの動き