移行中の知識
イージング
Easing
定義
イージング（easing）とは、animationやtransitionの進行率を時間に対してどのように変化させるかを決める関数です。一定速度のlinear、加減速を作るcubic-bezier、段階的に切り替えるstepsなどがあり、同じdurationと移動量でも進み方の違いによってmotionの見え方は変わります。特定のeasingを「自然」「高級」などの固定印象へ直接対応づけません。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
drawerやpopoverのtransition
panelの開閉
見るポイント
durationを固定したままtiming functionを比較し、開始・終了付近の速度変化が操作への応答として不自然でないかを見る。positionとopacityを別々のeasingにする場合も関係を確認する。
toggleやselected state
progressではなく状態変化を見せる
見るポイント
状態の切り替えを補助する短いmotionで、stepsとcontinuous easingのどちらが状態差を理解しやすいかを見る。装飾的な滑らかさ自体を目的にしない。
注意
誤解しやすい点
- ease-in / ease-outなどの名前だけから、どのUIにも同じ心理効果があると断定する。
- durationや移動距離を同時に変えて、差をeasingだけの効果だと判断する。
- motionが不要な状態変化にもeasingを追加し、応答を遅らせる。
関連
関連する概念
出典