イージングについて

イージングを使用すると、アニメーションの移行に関する加速と減速を変更できます。Google Web Designer には、CSS3 仕様で定義されている 5 種類の標準的なイージング機能が用意されています。また、詳細モードで、ステップ移行やカスタム イージングを作成することも可能です。

注: テキストの効果には、異なるイージング オプションが用意されています。

クイックモードでのイージング

クイックモードでは、サムネイル間のすべてのアニメーション要素に同じイージングが適用されます。

詳細モードでイージングを編集した場合は、クイックモードに切り替えると、イージング タイプとして [混合] と表示される可能性があります。

クイックモードでイージングを変更するには:

1. サムネイル間にある [キーフレームのオプション] ボタン をクリックします。
2. 移行エディタが開きます。
   

3. 移行エディタで矢印をクリックすると、デフォルトのイージング プリセットを順番に切り替えることができます。また、時間を秒単位で入力するか、時間フィールドをクリックして左右にドラッグすることで、イージングの継続時間を変更することもできます。

デフォルト イージング プリセット

イージング プリセット	説明
リニア	アニメーションは、一定の速度で変化します。
イージング	アニメーションは、中速で始まりだんだん速度を落とします。
イーズアウト	アニメーションは、高速で始まりだんだん速度を落とします。
イーズイン	アニメーションは、低速で始まり高速で終わります。
イーズインアウト	アニメーションは、最初と最後は低速ですが、中盤は高速です。
ステップエンド	アニメーションは、イージング中は開始位置にとどまり、直接終了位置にジャンプします。
ステップスタート	アニメーションは、直ちに終了位置にジャンプします。

詳細モードでのイージング

詳細モードでは、その他のイージング オプションを利用できます。

• 複数のスパンを対象に、同時にイージングを変更できます。
• カスタム イージングを指定できます。
• カスタム イージングを新しいプリセットとして保存し、別のスパンで簡単に再利用できます。

詳細モードでイージングを変更するには:

1. イージングを変更するアニメーションを含むスパンを右クリックします。複数のイージングを同時に編集する場合、Shift キーを押しながらクリックすると隣接する複数のスパンを選択できます。Ctrl キーを押しながらクリック（Windows）または command キーを押しながらクリック（Mac）すると、隣接していない複数のスパンを選択できます。いずれかの方法で複数のスパンを選択したら、選択したスパンを右クリックします（イージングを変更できるのは、アニメーションを含むスパンに限られます）。

2. ポップアップ メニューからイージング プリセットを 1 つ選択するか、[イージング オプション] を選択します。[イージング オプション] を選択すると、イージング カーブを視覚的に表示して、カスタム イージングを指定できます。

カスタム イージングを作成するには:

1. スパンを右クリックして、[イージング オプション...] を選択すると、[イージング] ダイアログが開きます。
2. 次のいずれかの方法を使用して、イージングを変更します。
   • コントロール ハンドルをドラッグして、イージング カーブの形状を調整します。コントロール ハンドルの角度で、カーブの高さを調整でき、コントロール ハンドルの長さで、加速または減速の強さを調整できます。
   • [3 次ベジェ] フィールドに、目的とするベジェ曲線の cubic-bezier() 関数表記を入力します。無効な値を入力すると、フィールドに赤色の下線が表示されます。
3. （省略可）[新しいプリセットとして保存] をクリックして、カスタム イージングをプリセットとして保存します。
4. [適用] をクリックして、選択したスパンに対してこのカスタム イージングを適用します。
   

カスタム イージング プリセット

特定のカスタム イージングを複数のスパンで再利用する場合、カスタム イージングをプリセットとして保存します。プリセットには、次のようなメリットがあります。

• 簡単にアクセス可能: イージング プリセットは、スパンを右クリックしたときに、ポップアップ メニューのオプションとしてリスト表示されます。
• 簡単に識別可能: [詳細モード] タイムラインに、プリセット名が表示されます。

カスタム プリセットは、Google Web Designer のプライベート インスタンス向けに保存され、さまざまなドキュメントで使用できます。別のユーザーのカスタム プリセットを含むドキュメントを開くと、そのイージング プリセット名は表示されず、「カスタム」とだけ表示されます。イージング カーブ自体に変更はありません。

新しいカスタム プリセットを保存するには、[イージング オプション] ダイアログでカスタム イージングを作成して、[新しいプリセットとして保存] をクリックし、名前を付けます。プリセット名と 3 次ベジェ曲線は一意である必要があります。カスタム プリセットを指定したときに既存のスパンで同じカスタム値が使用されていた場合、以後はそのスパンでもカスタム プリセット名が表示されます。

カスタム プリセットの名前を変更するには、プリセットをダブルクリックするか、[イージング オプション] ダイアログでカーソルを合わせ、プリセット名の横に表示される鉛筆アイコンをクリックします。そして、名前を編集して、Enter キーを押します。このプリセットを使用しているスパンで、新しい名前が表示されるようになります。

カスタム プリセットを削除するには、[イージング オプション] ダイアログでカスタム プリセットをハイライト表示して、プリセット名の横にあるゴミ箱アイコンをクリックします。このプリセットを使用していたスパンでは、プリセット名の部分が「カスタム」と表示されるようになりますが、他に変更はありません。

既存のプリセットのカーブを編集することはできません。代わりに、新しいカスタム プリセットを作成して、変更するスパンに適用してください。