インターフェイスでの自然なアニメーション

図 0. KDPV

インターフェイスのアニメーションは、その状態を視覚的に変化させます。 たとえば、送信に失敗した場合、長いフォームは誤って入力されたフィールドにスクロールします。 または、を押して拡大した写真は、周囲の要素を押し広げます。

アニメーションがなければ、突然の突然の変化を認識することはより困難です。 ただし、アニメーションはユーザーの邪魔にならないように短くて目立たないものにする必要があります。

アニメーションは、世界中のオブジェクトの通常の動きを繰り返すと自然に見えます。 カットの下で、物理法則に基づいてアニメーションを作成する方法を説明します。 デモページで完成した結果を確認します （マウスが移動すると、1つのブロックが他のブロックに続きます）。

物理学を覚えて

オブジェクトの移動は、時間tにわたるx座標の変化によって記述されます。 関数x （ t ）を「目で」選択しようとすると、滑らかで自然な動きを実現するのに多くの時間を費やします。 何を選択しますか？ 双曲線？ 放物線？ どこに移動しますか？ 回す方法は？

動きの例については、世界のオブジェクトに目を向けることが最善です。 彼らの運動の数学的法則は物理学によって決定されます。 テーブルの上にあるバーを押します。 一定の距離を移動し、摩擦の作用により減速します。 適切な近似では、乾式滑り摩擦の力は一定であり、依存性x （ t ）は放物線であることがわかります。 このスローダウンは、最初の時点でアニメーションオブジェクトが既に動いていた場合に使用できます。

図 1.放物線の乾燥摩擦による抑制

粘性摩擦の力は、体の速度に比例します。 この場合、ボディは無限に長い間指数関数的に停止点に移動します。 移動時間を制限するために出展者が歪んでいる場合、そのようなアニメーションは不自然に見えます。 妥当な時間で停止するのが難しいため、粘性摩擦のシミュレーション自体が目標でない場合にのみ、粘性摩擦モデルを使用しないでください。

図 2.粘性媒体で指数関数的にブレーキをかけます

平衡位置から外れた振り子（またはバネの重り）はスムーズに速度を増し、平衡位置を通過し、徐々に減速します。 次に、反対方向に動きが繰り返され、無限に続きます（摩擦がない場合）。 このような動きのグラフは正弦波です。 周期的な繰り返しは私たちにとって特に興味深いものではありませんが、極点間の振り子の動きは滑らかで自然です。

図 3.極点間の正弦曲線に沿った振り子の動き

JSライブラリとCSSには、特殊効果を作成するためのイージング関数があります。 特別な場合には、ほとんどすべてのブランクを注意して使用する必要があります。 正弦波のみが多かれ少なかれ普遍的です。

第一に、正弦波軌道は身体をある静止位置から別の静止位置に移動します。 第二に、そのような動きの期間は期間の半分に等しい。 動きは時間的に制限されています。 期間は、外部の状況や初期条件に依存しません。 それはシステム自体の特性のみに依存し、剛性と慣性の比によって決定されます。

通常、200ミリ秒の正弦波でアニメーションの継続時間を選択します。 この期間は、人の反応時間の数倍です。 アニメーションははっきり見えますが、イライラする時間はありません。

初期条件、移動時間、停止点に応じて正弦波軌道を実行する方法を学びましょう。

2点を通して正弦波を描く方法

体を最初と最後の時点で休ませます。 次に、ポイントt ₁およびt ₂でのグラフの接線_は水平であり、グラフ自体は正弦波の半サイクルです。

図 4. 2つの静止位置間の移動のスケジュール

正弦波の半サイクルを表す方程式は簡単に選択できます。

1つのアニメーションの終了後、この式を使用して別のアニメーションを再び開始できます。 しかし、古いアニメーションが終了する前に新しいアニメーションが開始されるとしたらどうでしょうか？ スムーズな動きを保証するために、現在のアニメーションを停止し（青い線）、ゼロ以外の初期速度で新しいアニメーションを開始します（赤い線）：

図 5.初期速度がゼロ以外のモーションのスケジュール

数学的な計算がなければ、赤い線に対応する式を書くことはできません。 この計算をしましょう。

考えられるすべての正弦波のファミリーは、方程式

4つの未知のパラメーターA 、 B 、 Cおよび 。 すぐに2番目の用語を削除するために、時間レポートの先頭をポイントt ₂に移動しました。 確かに、デリバティブ t ₂での接線_は水平であるため、ゼロでなければなりません。 これは、 B = 0の場合に可能です。

以来 その後、置換 （1）では、 。 ここからCを除外します：

スピードを見つけるために差別化する

最初の瞬間の位置x ₁と速度vがわかっています。

この連立方程式から、 Aと 。 新しい変数を導入する時が来ました の代わりに 。 その意味は、開始点と終了点での正弦波の位相差です。 たとえば、図のグラフの場合 4 なぜなら サイン波の半サイクルに適合します。 図 5 なぜなら 期間の半分未満。

置換と小さな変換の後、システムに到達します

最初の方程式の項を2番目で除算します。

パラメータ 右側は事前に知られています。 動きの必要な性質を決定します。 もし 、初期速度が小さい場合、ボディは最初に加速する必要があります。 もし 、初期速度が速い場合、体は遅くなります。

左側の三角関数は、半角正接に縮小されます。 その結果、 kの非線形方程式があります。

チャートで彼の決定を分析できます。 いくつかのパラメーター値の左右の部分のグラフを描いてみましょう ：

図 6.式（2）のグラフィカルなソリューション

結果のソリューションについて説明します。

1. ポイントAを検討します。 このソリューションは次の場合に存在します 図5に示すものに対応します。 。 予想通り 。 ゼロ速度の限界で 、赤い線は縦座標軸と一致し、ポイントAは無限大への接線に沿って進みます。 この制限で 。 これまでのところ、すべてが順調に進んでいます。

   
   
   
   
   
   
   

2. 点Cは 。 これは、時間の最初の瞬間に身体が前方に移動したときに起こりますが、後方に移動する必要があります。 いま 。 動きは、半周期よりも大きく、周期よりも短い正弦波の断片によって記述されます。
   
   。 身体は減速し、停止し、後退し、目的の場所で停止します。

   
   
   
   
   
   
   

3. グラフは、 ポイントBは範囲内にあります 。 身体は、振動の全周期よりも多く正弦波に沿って通過します。 。 この奇妙な決定の理由は、停止点が特性距離v （ t ₂ - t ₁ ）に比べて近すぎるためです。 したがって、停止と復帰を追加せずに正弦波を実行することはできません。

   
   
   
   
   
   
   

近似解

正弦波を実行するという数学的な問題を解決しましたが、これから人生は楽になりませんでした。 まず、正弦波のパラメーターを決定するには、非線形方程式を解く必要があります（2）。 こんにちは反復メソッド！ 第二に、方程式には無限の解があり、必要な解が常に存在するとは限りません。

これらの問題は、アニメーションの継続時間を正確に200ミリ秒記録したという事実から生じました。 ただし、アニメーションが180ミリ秒続く場合、何も悪いことは起こりません。 または250ミリ秒です。 特定の場所で停止することがより重要であり、計算を簡素化するためにアニメーションの正確な継続時間を犠牲にします。

アニメーションの継続時間の要件を弱めて、このようなトリックを行います。 近似解があると仮定します 非線形方程式（2）。 これは、異なるパラメーターを持つ方程式の正確な解です

別のアニメーション終了時間に対応します。

軌道Aの未知のパラメーターと 初等 そして 。

私たちの目的に適した方程式（2）の近似を選択しました。

青い実線は正確な式（2）に対応し、赤い点線はその近似に対応します。

図 7.正確な関係（2）とその近似の比較

そしてまたの場合 取ることをお勧めします わずかに1/2以上にし、アニメーション時間を短縮して、跳ね返ったり戻ったりしないようにします。

申込み

コードと球状の使用例は、デモページにあります 。 マウスを動かして、黒いブロックがオレンジ色に追従する様子を確認します。

説明されているスキームは、最終製品に適用されます。 ソースの同期スクロールと数学テキストのmarkdown-およびlatex-エディターでのプレビュー用に開発しました。

markdown-it js parserのデモページでアイデアと初期実装を見つけました。 彼らのバージョンでは、アニメーションが破れ、速度が低下していることが判明しました。 これにはいくつかの理由があります。

1. 線形関数はアニメーションに使用され$(...).stop(true).animate({scrollTop: ...}, 100, 'linear')
   
   
   
   ： $(...).stop(true).animate({scrollTop: ...}, 100, 'linear')
   
   
   
   。 スムーズなスケジュールの代わりに、破線が取得されます。
2. jQuery().stop().animate()
   
   
   
   アニメーションjQuery().stop().animate()
   
   
   
   アニメーションjQuery().stop().animate()
   
   
   
   はrequestAnimationFrame()
   
   
   
   比べて遅くなります。
3. パフォーマンスのonscroll
   
   
   
   を回避するために、50ミリ秒を超える頻度でonscroll
   
   
   
   イベントがonscroll
   
   
   
   ます。 私のバージョンでは、このような問題はありません。 連続するonscroll
   
   
   
   イベントは、ブレークポイントの位置を調整し、アニメーションを遅くしません。

製品にとって重要な高品質のアニメーションを実現するために、物理方程式に基づいた計算方法をrequestAnimationFrame()



、ブラウザベースの特別なrequestAnimationFrame()



メソッドを使用して実装しました。 このメソッドは、スクロールの移動に適しています：PageUp / PageDownキー、移動するスクロールバー、マウスホイール、タッチパッド、タッチスクリーン。