✍️

注意事項

ご注意ください!Phaseでは、定期的にアップデートや改善を行っています。そのため、チュートリアルの内容が現在のアプリとは多少異なる場合があります。

イージング

Phaseで使用可能なイージングの種類について見ていきましょう。イージングを使用すると、アニメーションのクオリティがより向上します。イージングの追加は簡単です。Phaseが、キーフレーム間の位置とプロパティを自動的に計算します。
✍️

注意事項

この記事は、以前の記事で説明されている、アニメーションの基礎、キーフレームおよび補間に関する知識を前提としています。
アニメーションに関する記事はこちらです。

イージングの調整

イージングオプションの表示

キーフレームのイージングを調整するには、キーフレームを選択し、プロパティパネルの一番下にあるイージングパネルに移動します。

イージングパネル

イージングパネルは、アニメーションカーブを視覚的に表現しており、いくつかの調整オプションがあります。主にアニメーションの滑らかさを管理し、連続したキーフレーム同士のインタラクションを制御することを目的とします。
タイプ
イージングのコンテキストメニューには、様々なイージングタイプが含まれています。曲線のハンドルをドラッグして、手動で曲線を編集すると、イージングのタイプが「カスタム」に変わります。
このメニューの隣に、設定済みの曲線がいくつか用意されており、そこから選択して素早く適用することができます。以下の選択項目が含まれます:イーズイン、イーズアウト、イーズインアウト。これらのプリセットは、編集工程を効率化させる合理的な方法を提供します。それぞれのイージングタイプについて、次のセクションで説明します。
ベジェ曲線
上記の曲線は2点によって定義されており、その座標がここに示されています。曲線の左下に接続されている点(B)が最初に示され、右上に接続されている点(T)が次に示されています。
このように、ここに示された一連の座標は、まずB座標 (0.5, 0)、次にT座標 (0.88, 0.77) として分けて表示できます。また、短縮した表記法として [Bx, By, Tx, Ty] と示すこともできます。これらの点は直接修正することも、下に示されているハンドル型の点を調整することで自動的に更新することも可能です。
曲線グリッド
曲線グリッドは、ベジェ曲線の部分で説明したように、曲線の概略図を示しています。
ハンドル型の点が2つ付いており、動かすことができます。
繋がった点を固定された基点から離れた位置に移動させる(ハンドルを長くする)と、イージングの効果がより明確になる傾向があります。一方で、ハンドルを短くすると逆の効果があり、イージングがより目立たなくなります。

イージングの種類

以下は、Phaseにプリセットとして含まれているイージングタイプの一覧です。前述のように、ハンドルを手動で調整すると、イージングタイプは「カスタム」に変わります。ただし、このカスタマイズを行った場合でも、動作が以下に示す定義済みタイプに一致する可能性があることに注意が必要です。
ステップ
ステップは、あるキーフレームの値を次のキーフレームまで維持する補間機能で、通常はあまり使われません。急激かつ明確な変化を表現する際に役立つ機能で、特に色のトランジションを用いる場合に効果を発揮します。
リニア
このイージングタイプは、キーフレーム間のペースを均一にすることで、オブジェクトの動作を一定のタイミングにします。均一な動作を維持するのに適していますが、変化のポイントに適用する際には注意が必要です。トランジションが不自然になる可能性があるためです。
イーズイン
ゆっくりと動き出し、緩やかに加速しながら、最後は急激な動作で終わります。多くの場合「イーズアウト」と組み合わせて使用されます。イーズインは、対照的なイージングタイプと相性が良く、特に緩やかな動き出しが望ましい場合に、キーフレーム間のトランジションを滑らかにします。
イーズアウト
このタイプのイージングは、キーフレーム間のペースを均一に保ち、動作を一定に維持します。多くの場合「イーズイン」と組み合わせて使用され、動作の終わりが緩やかなため、次のキーフレームへの移行が滑らかになります。特に「イーズイン」の曲線の緩やかな始まりと一緒に使用すると、調和の取れたトランジションを作り出します。
イーズインアウト
この曲線は、キーフレーム間のペースを均一に保ち、トランジションの両端の変化を緩やかにするために使用されます。滑らかでバランスの取れたアニメーション効果を作り出すために最も一般的に使用されるオプションであり、イージングの中でも非常に人気があります。
イーズインバック
このイージングタイプは、キーフレーム間で均一なペースで進行し、意図的に曲線を過度に調整します。この意図的な過調整により、滑らかでありながら独特なトランジションを実現し、アニメーションに予測不可能な要素を加えます。
イーズアウトバック
イーズアウトバックは、キーフレーム間で一定のペースを保ちつつ、意図的に曲線を過度に調整します。この終端の不正確さが、トランジションをより滑らかにし、アニメーションに独特のタッチを加えます。
イーズインアウトバック
この曲線は、両端を過度に調整することにより、中間に近づくほど変化が速くなります。このイージングタイプは、望ましくない挙動を取ってしまう可能性がある一方で、予測不可能な要素を加えるために効果的に活用できます。

ベジェ曲線について

名前から分かる通り、補間される値はベジェ曲線に従って計算されます。ベジェ曲線は、選択されたキーフレームの点と、その直前にあるキーフレームによって決定されます。
これらのベジェ曲線は、グリッド上に配置され、直前のキーフレームが(0, 0)、選択されたキーフレームが(1, 1)に置かれています。これらの点はバックエンドでの計算のみを目的としており、移動できません。実際の値は全く違う値である場合があります。
動かせるのは、設置されたキーフレームの点から出る2本の方向線です。その方向線の端が、曲線を曲げるための制御点になります。
曲線がこれらの点に触れることはほとんどありませんが、点が(0, 0)および(1, 1)から遠ざかるほど、曲線もより極端になります。数学的な観点では、これらの点によって3次ベジェ曲線が作り出されます。ただし、点が同じ位置にある場合、次元が削減され、曲線が2次曲線や1次曲線になることもあります。
方向線(ハンドル)の点は、X軸上では0から1の間に固定されています。しかし、Y軸はゼロ未満や1を超える場合があり、これがアニメーションに急激な変化や異常な動きを引き起こすことがあります。「バック」が含まれるイージングモードには、この特徴がすべて含まれています。値は+/- 200,000以上に設定できますが、いずれかの方向で値が非常に大きくなると、全体の曲線への影響は次第に小さくなります。

アニメーション制作を始めましょう

無料のウェブベースプラットフォームで始めます。