見積もり、軽減、磨き

補間(ポイント間の動きの作成)、イージング(非線形アニメーション用)、スムージング(減衰効果の作成)について学習します。

推定

ポイント A からポイント B への移行をアニメーション化する場合、直接的な遷移だけでは不十分です。視覚的には、間にフレームを追加して、動きが洗練されるようにします。

 

これらの中間フレームを生成するプロセスは、 推定ここで表示されるアニメーション タイムラインでは、開始点と終了点を設定するだけです。中間のフレームは自動的に推定されます。

軽減

下の図に示すように、直線運動はポイント A からポイント B への直線ルートをたどります。

 

しかし、実際の状況では、アクセルペダルを踏んで加速しても、すぐに時速50キロに達するわけではありません。徐々に加速してその速度に達する必要があります。また、停止するときも急に停止するのではなく、減速します。その結果、 多くの 乗客にとってよりスムーズな体験。

このアニメーションにイージングを組み込むことで、距離と時間を操作し、上に示すように線形グラフをS字カーブに変換します。

以下はイージングを適用した同じアニメーションです。

 

アクションにイージングを組み込むには、アクションを選択した後、ドロップダウン メニューからイージング スタイルを選択するだけです。

アニメーションモードのインタラクションパネルでは、さまざまなイージングオプションにアクセスできます。

研磨

最後に、研磨(研磨と呼ばれることもあります)について詳しく見ていきましょう。 減衰)。これは、スクロールやマウスの位置の変化によってトリガーされるアニメーションに特に役立ちます。

 

上記のシナリオでは、スクロール中に視差の奥行き効果を生み出すことを目的としています。残念ながら、スクロール位置の急激な変化やスクロール ホイールによる高速スクロールによって、アニメーションが認識されにくくなる可能性があります。これは、位置 (およびアニメーション) が動きに合わせて正確に変化するためです。

磨きをかける作業です。連続トリガー内で、実際のスクロール位置に近づくにつれて(追いつくにつれて)アニメーションを洗練させることができます。下の画像は、ヒステリシス(または 遅れ) 以前のスクロール位置を考慮して計算します。

 

研磨パラメータを高くすると、減衰効果が高まります。研磨の値が低ければ (0% 研磨でも)、すべてのアニメーションと応答がリアルタイムであることを意味します。ここでは、研磨は 100% に設定されています。

 
ポリッシングは、アニメーション内で行われた内部のイージング構成を上書きするものではありません。アニメーション タイムライン上の正しい位置に近づく速度を単純に調整し、滑らかにするだけです。
ユアン・マック