-
こんにちは Google Web Designer
開発担当エンジニアのナタリーです
-
この動画では詳細モードのタイムラインで
アニメーションを作成する方法を説明します
-
[タイムライン]パネルは デフォルトでは
ワークスペースの下部にあります
-
タイムラインはクイックモードでも使えます
-
クイックモードのデフォルトでは
複数のファイルが同時に開きます
-
右上のこのボタンをクリックして
モードを切り替えられます
-
これがクイックモード
これが詳細モードです
-
クイックモードについてのチュートリアルは
別にあるので
-
今回は この2つのモードのうち
-
より複雑で効果的な設定ができる
詳細モードについて説明します
-
この短いアニメーション広告には
スライドする画像と
-
フェードイン / アウトする
2つのテキストボックス
-
最後に表示されるロゴがあります
-
この広告をGoogle Web Designerで
作成してみましょう
-
まずは スライドする画像のアニメーションから
-
最初に画像をステージにドラッグして
アニメーションの開始位置に合わせます
-
このあたりですね
-
後でこのように画像をスライドします
-
タイムラインに小さいトラックがありますね
-
これはタイムラインレイヤです
-
ここで時間を合わせて
オブジェクトのアニメーションを配置します
-
詳細モードでアニメーションを作成する場合
-
特定の属性を持つ要素に
キーフレームを定義して
-
各キーフレームを配置し操作することが
基本の作業となります
-
この画像をスライドさせるために
キーフレームをいくつか作りましょう
-
約1秒間固定したいので
-
1秒の位置で右クリックし
[キーフレームを挿入]を選択
-
さらにその0.5秒後にも
キーフレームを挿入します
-
次にこのキーフレームのこの時点で
画像がスライドするようにします
-
ここでもう1秒ほど画像を固定します
-
そして0.5秒後に画面から
スライドアウトするようにします
-
プレイヘッドをドラッグすると
タイムラインをスクラブして
-
アニメーションをプレビューできます
-
または左上にある再生ボタンをクリックして
-
ステージ上でプレビューを見ることもできます
-
問題なさそうです
-
完成した広告では
画像は最初にフェードインで表示され
-
その後スライドします
-
では次に アニメーションの
フェードインの方法を説明します
-
マーキーツールで全キーフレームを選択し
-
全体を右にずらして
フェードイン用のスペースを空け
-
ゼロの位置に新しいキーフレームを挿入します
-
このキーフレームでは
要素の透明度をゼロに設定します
-
他のすべてのキーフレームは
透明度を100%にします
-
次はテキストを追加します
-
ご覧のとおり テキストボックスは2つあり
-
どちらも画像のスライドに合わせて
フェードインします
-
1つ目のテキストボックスを作成してみましょう
-
最初のボックスはフェードインしてから
この時間だけ同じ位置にとどまり
-
画像のスライドと同時にフェードアウトします
-
まず このボックスの透明度をゼロにします
-
これが最初の状態です
-
0.5秒のあたりでキーフレームを作成し
-
透明度を100%にします
-
1.5秒の時点ではまだ100%のままで
-
2秒の時点で0%に戻します
-
必要な作業は 先ほどのように
キーフレームを挿入するだけです
-
ただし今度はコピーすることもできます
-
Altキーを押したままキーフレームを
別の時間にドラッグすると
-
そこにコピーが作成されます
-
アニメーションの作成時間の短縮にもなります
-
テキストボックスがフェードアウトする
キーフレームも追加しましょう
-
プレビューで確認します
-
いい感じです
-
2つ目のテキストボックスは1つ目とほぼ同じで
テキストが違うだけです
-
1つ目がフェードアウトした後に表示されます
-
時間短縮になるので アニメーション付きの
このレイヤをコピーしましょう
-
右クリックで[レイヤを複製]を選択します
-
今度もマーキーですべてのキーフレームを選択し
-
このアニメーションを表示したい位置に
移動します
-
フェードアウトする最初のテキストと
フェードインする次のテキストが重ならないよう
-
キーフレームを調節します
-
このように時間が近い場合は
-
ズームスライダーを使って
アニメーションの時間をより正確に調節できます
-
テキストも変更しましょう
-
今は2つのテキストボックスが重なっています
-
間違ってクリックして
前面にある方を編集してしまわないよう
-
そちらをあらかじめロックしておきます
-
これで安心して
2つ目のテキストボックスを編集できます
-
これでアニメーションはほぼ完成です
-
ところでキーフレーム同士は
どうつながっているのでしょう
-
キーフレームとキーフレームの間に
[リニア]と表示されています
-
これはCSSのイージング機能で
-
各キーフレーム間の中間値の計算に
使用されるものです
-
リニアとはこの値が一定の速度で
変化することを意味します
-
イージングオプションは他にもあり
-
右クリックすると CSS仕様で定義されている
標準的なイージング機能が選べます
-
特にこの移行の場合
ちょうど中間で画像がスライドするので
-
別のイージングを選択してもよいでしょう
-
たとえばイーズインアウト
アニメーションが途中でやや速くなり
-
その後速度を落として終わるので
-
現実の世界で見られる動きに少し近くなります
-
プレビュー範囲を狭くしてみましょう
-
黄色のハンドルをドラッグして
移行した部分だけプレビューするようにします
-
プレビューを繰り返し再生するよう設定し
-
この部分だけプレビューして
必要に応じて修正することもできます
-
問題ないですね
-
設定済みの機能の代わりに
独自の機能を作成することもできます
-
右クリックして
[イージングオプション]を選択し
-
このベジェ曲線をカスタマイズしたら
カスタムプリセットとして保存できます
-
[OK]をクリックすると適用されます
-
以上でこのチュートリアルは終了です
-
アニメーションをテーマに詳しく解説している
チュートリアルは他にもありますので
-
そちらもぜひご覧ください
