詳細モードでのアニメーションの作成

詳細モードでは、タイムラインにキーフレームを追加してアニメーションの始点と終点を指定することで、各要素をアニメーション化します。特定のキーフレームで要素を編集すると、Google Web Designer によって中間のアニメーションが作成されます。

キーフレーム間のスペース（「スパン」）は、アニメーションの長さを示します。たとえば、アニメーションを短くするには、キーフレームを近づける必要があります。イージングを使用すると、アニメーションの移行を加速したり減速したりできます。

タイムラインを右クリックし [キーフレームを挿入] を選択して、キーフレームを追加します。
アニメーションが終わったら要素のプロパティを希望どおりに変更します。要素の位置、色、不透明度のいずれか、または 3 つのプロパティをすべて変更できます。

複数のキーフレームを追加して、同じ要素に対する複数のアニメーションスパンを 1 つにまとめることができます。要素を一定期間変更しないで再度アニメーション化する場合は、プロパティを変更せずにキーフレームを追加します。

例

上記の画像によるアニメーションは、4 つのキーフレームを使用して、フェードイン、一時停止した後、左へスライドします。

最初のキーフレームには、アニメーション開始時の要素の状態を設定します。この場合は、画像の不透明度が 0 に設定されているため、非表示になります。
2 番目のキーフレームでは、要素の不透明度が 1（100%）に設定されています。画像は、直前の 1 秒のスパン間にフェードインします。
3 番目のキーフレームにおける要素のプロパティは、前のキーフレームから変更されていません。この 0.5 秒間にアニメーションは発生しないため、画像は変わりません。
最後のキーフレームでは要素の位置が変わり、画像の右半分がステージに表示されます。画像は左にスライドし、1 秒間で指定の位置に移動します。

特定のキーフレームに指定されているプロパティを表示するには、キーフレームを右クリックし、ポップアップメニューから [アニメーションプロパティ] を選択します。

キーフレームを追加する方法は複数あります。タイムラインで、アニメーション化している要素のレイヤを選択し、プレイヘッドを希望するキーフレームの位置に移動します。Ctrl キーまたは ⌘ キーを押しながら選択すると、複数のレイヤを選択できます。その後に次のいずれかの方法を使用します。

アニメーション要素のプロパティを変更する場合にプレイヘッドがキーフレームの位置になければ、Google Web Designer によってキーフレームがプレイヘッドの位置に自動的に追加されます。

タイムラインの終点より後にキーフレームを追加する場合は、タイムラインの作業領域の長さを延長できます。たとえば、デフォルトの長さは 12 秒ですが、15 秒の位置にキーフレームを追加することもできます。タイムライン作業領域の長さを変更する手順は次のとおりです。

タイムライン作業領域は、アニメーションに合う長さを持っている必要があります。タイムラインの長さに未使用の部分があっても、アニメーションの再生時間には影響しません。

動画広告のタイムラインの長さは最大 5 分です。

タイムラインの目盛りを調整するには、タイムラインの右上付近にあるズームスライダーをドラッグします。複数のキーフレームの位置が密接している場合は、ズームすると便利です。ズームレベルはタイムラインの表示を変更するだけであり、アニメーションのタイミングには影響しません。

複数のキーフレームで構成されるアニメーションの長さを変更する場合は、複数のスパンをスケーリングすると、それらのスパンを均等に伸縮できます。

改善できる点がありましたらお聞かせください。