9

最新の UI は、移動時に UI 要素に優れた慣性を与え始めています。タブのスライドイン、ページ遷移、一部のリストボックスやスクロール要素でさえも慣性があります (iPhone など)。これに最適なアルゴリズムは何ですか? 加速するときの重力だけではなく、所定の位置に落ちるときに減速します。最大（最終）速度まで加速してから減速するためのさまざまな式を試しましたが、試したものはどれも正しく「感じ」ません。それはいつも少しずれているように感じます。これには標準がありますか、それとも見た目/感触が正しくなるまでさまざまな数字で遊んでいるだけですか?

4

5 に答える 5

18

ここでは、2 つの異なることについて話している。

1 つは運動量です。ドラッグから解放したときに残留運動を与えます。これは単純に、ユーザーが物を放したときの速度を記憶し、その速度をフレームごとにオブジェクトに適用し、フレームごとに速度をある程度下げることです。フレームごとにどのように速度を下げるかは、適切な感覚を得るために実験するものです。

もう 1 つは、イーズインとイーズアウトのアニメーションです。これは、直線的に補間するのではなく、オブジェクトを 2 つの位置間で移動するときにオブジェクトをスムーズに加速/減速することです。これを行うには、シグモイド関数を使用して 2 つの位置の間でオブジェクトを補間する前に、「時間」値を単純にフィードします。そのような関数の 1 つが

smoothstep(t) = 3*t*t - 2*t*t*t    [0 <= t <= 1]

これにより、イーズインとイーズアウトの両方の動作が得られます。ただし、より一般的には、GUI で使用されるイーズアウトのみが表示されます。つまり、オブジェクトは素早く動き始め、最終的な位置でゆっくりと停止します。それを達成するには、曲線の右半分を使用します。

smoothstep_eo(t) = 2*smoothstep((t+1)/2) - 1
于 2008-10-12T22:18:14.817 に答える
6

マイク F の理解: 時間位置関数を適用して、時間に対するオブジェクトの位置を計算します (速度をいじらないでください。使用するアルゴリズムを理解しようとしている場合にのみ役立ちます。 )

Robert Penner のイージング方程式とデモはすばらしいものです。jQuery デモのように、イージングがどのように見えるかを視覚的に示しますが、その背後にある方程式を理解できる位置時間グラフも提供します。

于 2008-10-12T22:41:36.177 に答える
4

あなたが探しているのは補間です。大雑把に言えば、0 から 1 まで変化する関数があり、スケーリングおよび平行移動すると見栄えの良い動きが作成されます。これは Flash で非常に頻繁に使用され、多くの例があります。

これを見て、動きの種類を直感的に理解してください: SparkTable: Visualize Easing Equations。

動き、拡大縮小、回転、その他のアニメーションにこれらの方程式を適用すると、運動量、摩擦、跳ね返り、弾力性の感覚を与えることができます。アニメーションに適用した例については、Robert Penners easing demoをご覧ください。彼は最も人気のある一連のアニメーション関数の作成者です (Adobe の組み込み関数は彼に基づいていると思います)。このタイプのトランジションは、アルファ (フェードイン用) でも同様に機能します。

使い方にはちょっとしたコツがあります。easeInOut はゆっくりと開始し、スピードアップし、スローダウンします。easeOut は速く開始して減速し (摩擦のように)、easeIn はゆっくり開始して加速します (運動量のように)。求める感触に応じて、適切なものを選択してください。次に、効果の強さを Sine、Expo、Quad などから選択します。他のものは、その名前で簡単に解決できます (例: バウンス バウンス、バックは少し先に進み、エラスティックのように戻ってきます)。

これは、AS3の一般的な Tweener ライブラリの方程式へのリンクです。JavaScript (またはその他の言語) でこれらをほとんどまたはまったく問題なく書き換えることができるはずです。

于 2008-10-12T22:52:43.157 に答える
0

数字で遊んでいる.. 気持ちいいものはいい。

私は何年もの間、自分で魔法の公式を開発しようと試みてきました. 結局、醜いハックは常に最高の気分でした。なんらかの方法でアニメーションのタイミングを適切に調整し、ある種の再描画/リフレッシュ レートに依存しないようにしてください。これらは、OS に基づいて変更される傾向があります。

于 2008-10-12T21:56:38.030 に答える
0

私もこれについての専門家ではありませんが、正しいパラメータが与えられると、特定のポイントに到達するまで、速くまたは遅く開始し、最後に向かって劇的に増加または減少する二次式で行われると信じています.

于 2008-10-12T21:58:31.253 に答える