イージングについて

イージングを使用すると、アニメーションの移行を加速したり減速したりすることができます。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 キーを押します。このプリセットを使用しているスパンで、新しい名前が表示されるようになります。
カスタム プリセットを削除するには、[イージング オプション] ダイアログでそのカスタム プリセットをハイライト表示して、プリセット名の横にあるゴミ箱アイコンをクリックします。このプリセットを使用していたスパンでは、プリセット名の部分が「カスタム」と表示されるようになりますが、他に変更はありません。
既存のプリセットのカーブを編集することはできません。代わりに、新しいカスタム プリセットを作成して、変更するスパンに適用してください。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。