アニメーションをスムーズに見せるためのテクニック「指数平滑法」とはどんなものなのか？

グラフィック系の開発者であるニキータ・リシッツァ氏が、「自身のプロダクトのあらゆる場所で使用している」と述べるお気に入りのテクニックである「指数平滑法」について解説を投稿しました。 My favourite animation trick: exponential smoothing | lisyarus blog https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html リシッツァ氏は下図のようなトグルボタンを例に解説を行っています。クリックすると「オン」「オフ」が切り替わります。まだアニメーションを何も設置しておらず、トグルボタンは左端と右端を瞬間移動しています。 機能的にはアニメーションが設定されていなくとも問題はないのですが、アニメーションを設定することでユーザーは何が起こって

[ChieOsanai]

オン / オフが判りづらい上に、横に「ON」と文字があっても、「いま現在 ON 」なのか「いま現在 OFF で、このスイッチを動かせば ON になる」のか判らないんだよね

[masara092]

物理的なトグルスイッチは端で減速しない。そんな事よりどっちがONなのか分かり難いからやめるか縦に付けろ。(トグルスイッチは特別な意図が無い限り上がONになる様に使う)

[bocuno]

このUIまじでON/OFF分かりづらいよなー。やめて欲しい。

[tecepe]

これ、モノクロから色付きになるならわかるけど、どっちも色付きで、どれがオンオフなのか全然わかんないからアニメーションとかじゃなくてクソUI

[bellonieta]

ActionScriptでいろいろ考えてたの懐かしい

[deep_one]

CGアニメで行われる「コマ抜き」とかの話ではなかった。／このUIパーツだと左右にONとOFFを置いておくべき。

[mangakoji]

それでも、中を割らないのが、一番使いやすいんだけどな。いわゆる改悪にしか見えない。

[akiramaz]

計算自体はおもしろい

[kijtra]

ease-in-out より ease-out がいいってこと？

[nori__3]

ボタンの速度を操作するのではなく、ボタンの加速度を操作しろってことかな。

[tattyu]

updateでターゲットとのdistに0.01とか掛けて加算して更新してるわ。pow使ってdt厳密にしても良いけどそこまで厳密じゃ無くても良い事が殆ど。

[yasu-log]

Flashでごく当たり前に使われていたイージングの公式にプラスアルファして、係数に指数を考慮したのが元記事のポイント。

[adsty]

トグルボタンの切り替えに様々なアニメーションを設定する。

[agrisearch]

スイッチは瞬間移動で別に問題ないが、UIは指数平滑法がよいのはわかった。

[shingo-sasaki-0529]

UI のアニメーションって基本的に不要だよなぁって考えるようになってきた。

[ustar]

アニメは全く要らんから入の時は背景赤で塗ってONとでも書いて欲しい むしろ無駄なアニメやめて

[masuipeo]

「指数平滑法」は時系列データの予測に使う方法としてよく知られている。まったく違う処理に思えるが、同じ名前をつけるのか…（翻訳前の著者の意図が不明）。

[tetotti]

アニメーションにおける後詰め先詰めってやつ

[Shinwiki]

キャプションつけるにしたって今の状態か操作後に実現する状態なのかがわかるUIの定着が先だろよ。余計なことばっかしてないでさ。

[letsspeak]

点灯しててわかりやすくね

[mmddkk]

ジオン軍モビルスーツのモノアイに見えてしまう……。

[gengesa]

マテリアルデザイン的には背景色もアニメーションの対象なので移動だけを考えて良いのだろうか？ https://m3.material.io/components/switch/overview

[Gelsy]

ピッコロさんの指の数が原作では4本なのにアニメでは5本とかいう話ではなかった

[umai_bow]

この式ゲームとか作るなら基本の基本ではある。二階微分バージョンがバネ

[petronius7]

30年前にN-BASICで実験の測定プログラムで動作中を示すアニメーションをx=AsinT+Bで作った。単純に時間経過Tで左右に動くから楽。