トランジション ギャラリー コンポーネントを使用すると、画像を連続的に表示することで画像間の移行をアニメーション化できます。
適したギャラリーを選ぶ
Google Web Designer には 4 つのギャラリー コンポーネントが用意されています。
- 360 度ギャラリーでは、1 つのオブジェクトをあらゆる角度から表示できます。前後にスワイプするとオブジェクトが回転します。360 度ギャラリーではグループ要素やナビゲーション要素は表示できません。
- スワイプ ギャラリーは、平面的にオブジェクトを表示できるシンプルなギャラリーです。画像やグループ間を垂直方向または水平方向にスワイプできます。
- カルーセル ギャラリーはスワイプ ギャラリーに似ていますが、画像が円周上に 3D 形式で配置される点が異なります。
- トランジション ギャラリーでは、画像を切り替えながらさまざまなアニメーション効果を使用できます。
トランジション ギャラリーを使用するには:
-
[コンポーネント] パネル、[ギャラリー] フォルダの順に開きます。
-
[トランジション ギャラリー] コンポーネント 
をダブルクリックするか、ステージにドラッグします。
-
コンポーネントをダブルクリックするか、[設定...] をクリックします。[設定] ボタン 
をクリックします。[トランジション ギャラリー] ダイアログが開きます。
-
左側の [ライブラリ] パネルに、ギャラリーに含めることができる画像が表示されます。画像を追加するには、パネルの下部にある [アセットをインポート] ボタン 
をクリックするか、別のウィンドウから画像をドラッグします。
-
ギャラリーに含める画像を、ダイアログの下部にある [フレーム] パネル、またはステージにドラッグします。ライブラリから複数の画像を追加する場合、すべての画像を選択して右クリックし、[追加] を選択して追加することもできます。
-
[トランジション] パネルでトランジションの種類を選択します。
-
トランジションの持続時間、イージング、およびその他のプロパティ（以下の説明を参照）をカスタマイズします。
ギャラリー画像を並べ替えるには:
- [トランジション ギャラリー] ダイアログを開くために、ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定...] ボタン をクリックします。
- 下部にある [フレーム] パネルで、画像を新しい位置にドラッグします。
ギャラリー画像を削除するには:
- [トランジション ギャラリー] ダイアログを開くために、ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定...] ボタン をクリックします。
- 下部にある [フレーム] パネルで、削除する画像を選択します。
- Delete キーを押すか、選択した画像を右クリックして、ポップアップ メニューから [削除] を選択します。
ギャラリー画像を切り替えるには:
- [トランジション ギャラリー] ダイアログを開くために、ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定...] ボタン をクリックします。
- [フレーム] パネルでイメージを右クリックし、ポップアップ メニューから [画像を入れ替える] を選択します。
プロパティ
このコンポーネントのプロパティには、[トランジション ギャラリー] ダイアログからアクセスできます。ダイアログを開くには、ステージのトランジション ギャラリーをダブルクリックするか、[プロパティ] パネルの [設定...] ボタンをクリックします。
トランジションの種類
トランジションの種類に応じて、異なるプロパティのセットを利用できます。
フレーム間に視覚的なトランジション効果はありません。
画像がフェードアウトして、新しい画像が表示されます。
プロパティ
|
説明
|
| 時間 |
1 つのフレームから次のフレームまでのアニメーションの長さ（秒数）。デフォルト値は 1 です。
|
| イージング |
トランジション アニメーションのイージングを行います。
- Linear（デフォルト）
- Ease-in
- Ease-out
- Ease-in-out
|
元の画像が押し出されて新しい画像が挿入されます。
プロパティ
|
説明
|
| スタイル |
 |
 |
| 時間 |
1 つのフレームから次のフレームまでのアニメーションの長さ（秒数）。デフォルト値は 1 です。 |
| イージング |
トランジション アニメーションのイージングを行います。
- Linear（デフォルト）
- Ease-in
- Ease-out
- Ease-in-out
|
方向
（[スタイル] が [標準] の場合のみ使用可能） |
効果の方向。
- 左から右（デフォルト）
- 右から左
- 上から下
- 下から上
|
向き
（[スタイル] が [分割] の場合のみ使用可能） |
アニメーションの向き。
|
線の動きに沿って、元の画像が新しい画像に少しずつ置き換わります。
プロパティ
|
説明
|
| スタイル |
 |
 |
 |
 |
 |
|
| 時間 |
1 つのフレームから次のフレームまでのアニメーションの長さ（秒数）。デフォルト値は 1 です。 |
| イージング |
トランジション アニメーションのイージングを行います。
- Linear（デフォルト）
- Ease-in
- Ease-out
- Ease-in-out
|
方向
（[スタイル] が [標準]、[ストライプ]、[ドア]、[放射状] の場合のみ使用可能） |
効果の方向。使用できるオプションはスタイルによって異なります。
- [標準] または [ストライプ]:
- 左から右（デフォルト）
- 右から左
- 上から下
- 下から上
- ドア:
- 放射状:
|
角度
（[スタイル] が [標準] の場合のみ使用可能） |
ワイプラインの角度（-89～89 度） |
向き
（[スタイル] が [ドア] の場合のみ使用可能） |
アニメーションの向き。
|
起点
（[スタイル] が [アイリス] または [放射状] の場合のみ使用可能） |
アイリスの X および Y 起点またはスイープ半径（ギャラリー フレームの割合）。
|
ストライプ
（[スタイル] が [ストライプ] の場合のみ使用可能） |
各色のストライプ数（1～10）。デフォルト値は 2 です。 |
色
（[スタイル] が [ストライプ] の場合のみ使用可能） |
各ストライプの色。 |
新しい画像がスライスまたはバーとして、ビューに順番に表示されます。
プロパティ
|
説明
|
| 時間 |
1 つのフレームから次のフレームまでのアニメーションの長さ（秒数）。デフォルト値は 1 です。
|
| イージング |
トランジション アニメーションのイージングを行います。
- Linear（デフォルト）
- Ease-in
- Ease-out
- Ease-in-out
|
| 方向 |
効果の方向。
- 左から右（デフォルト）
- 右から左
- 上から下
- 下から上
|
| スライス |
スライス数（1～20）。デフォルト値は 5 です。 |
| 透明な背景の表示 |
このチェックボックスをオンにすると、元の画像に新しい画像がオーバーレイされず、移行する前に透明の背景が表示されます。 |
新しい画像がブラインドの背後から現れるように表示されます。
プロパティ
|
説明
|
| スタイル |
 |
 |
| 時間 |
1 つのフレームから次のフレームまでのアニメーションの長さ（秒数）。デフォルト値は 1 です。 |
| イージング |
トランジション アニメーションのイージングを行います。
- Linear（デフォルト）
- Ease-in
- Ease-out
- Ease-in-out
|
方向
（[スタイル] が [標準] の場合のみ使用可能） |
効果の方向。
- 左から右（デフォルト）
- 右から左
- 上から下
- 下から上
|
向き
（[スタイル] が [ベネチアン] の場合のみ使用可能） |
アニメーションの向き。
|
| ブラインド |
ブラインドの数（1～20）。デフォルト値は 5 です。
|
透明な背景の表示
（[スタイル] が [標準] の場合のみ使用可能） |
このチェックボックスをオンにすると、元の画像に新しい画像がオーバーレイされず、移行する前に透明の背景が表示されます。
|
時差
（[スタイル] が [ベネチアン] の場合のみ使用可能） |
このチェックボックスをオンにすると、ブラインドが同時に切り替わるのではなく、順番に移行します。 |
元の画像にズームインしながら回転し始め、ズームアウトしながら回転が停止すると新しい画像が表示されます。
プロパティ
|
説明
|
| 時間 |
1 つのフレームから次のフレームまでのアニメーションの長さ（秒数）。デフォルト値は 1 です。
|
| イージング |
トランジション アニメーションのイージングを行います。
- Linear（デフォルト）
- Ease-in
- Ease-out
- Ease-in-out
|
| 方向 |
効果の方向。
|
新しい画像がスネーク グリッド パターンで少しずつ表示されます。
プロパティ
|
説明
|
| 時間 |
1 つのフレームから次のフレームまでのアニメーションの長さ（秒数）。デフォルト値は 1 です。
|
| イージング |
トランジション アニメーションのイージングを行います。
- Linear（デフォルト）
- Ease-in
- Ease-out
- Ease-in-out
|
| 向き |
アニメーションの向き。
|
| 行 |
行数（1〜20）。デフォルトは 5 です。 |
| 列 |
列数（1〜20）。デフォルトは 5 です。 |
トランジション ギャラリーのプロパティ
プロパティ
|
説明
|
| 名前 |
トランジション ギャラリー コンポーネントの名前。 |
| 画像 |
ギャラリーに表示される画像。変更は [トランジション ギャラリー] ダイアログの [フレーム] パネルで行います。動的データにバインドできます。 |
| スケーリング |
固定サイズのフレームにさまざまなサイズの画像をどのように表示するかを指定します。詳細
- 画像が収まるようにサイズ変更
- 画像が収まるように切り抜く
- なし
- 画像が収まるように拡大
|
| 開始フレーム |
最初に表示させるフレーム（1 が最初のフレーム）。 |
| 自動再生 |
| 自動再生 |
オンにすると、ギャラリーの画像が自動的に再生されます。
このオプションをオンにすると、そのギャラリー全体の再生時間が、[フレーム] パネルに表示されます。
|
| 間隔 |
各フレームが表示される秒数。[自動再生] がオンの場合のみ適用されます。 |
| 繰り返し |
ギャラリー内の全フレームを再生する回数（0 は無限ループ）。[自動再生] がオンの場合のみ適用されます。 |
| 操作 |
| グループにまとめる |
オンにすると、最後のフレームから最初のフレームに向けたナビゲーションが可能になります。 |
| ジェスチャー |
ギャラリー内の現在のフレームを変更する、ユーザーのジェスチャー。
- なし
- クリック（デフォルト）
- スワイプ（一部の種類のトランジションでのみ使用可能）
選択したジェスチャーに加えて、ユーザーはナビゲーション ドットを有効にしたり、イベントを使用して設定したカスタム ナビゲーション コントロールを有効にしたりできます。
|
| リバース スワイプに反応しない |
オンにすると、アニメーション効果の反対方向のスワイプ ジェスチャーにコンポーネントが反応しないため、前のフレームに移動できなくなります。[ジェスチャー] プロパティが [スワイプ] に設定され、[インタラクティブな偏移を有効にする] がオンになっていない場合のみ適用されます。 |
| インタラクティブな偏移を有効にする |
オンにすると、トランジション アニメーションがユーザーのマウスの動きを追いかけます。[ジェスチャー] プロパティを [スワイプ] に設定できる場合のみ使用できます。* |
| ナビゲーション |
| 含める |
オンにすると、ギャラリーにナビゲーション ドットが表示されます。 |
| サムネイル |
オンにすると、ギャラリーの各フレームにナビゲーション用のサムネイルが表示されます。 |
| ハイライト表示 |
現在表示されているフレームのハイライトの色を設定します。 |
| 詳細 |
| ランディングページ URL |
フレーム単位の、カンマで区切ったランディングページ URL の一覧です。動的データにバインドできます。 |
* スワイプのサポート
スワイプは、次の種類とスタイルのトランジションでサポートされています。
- プッシュ - 標準
- スライス
- ワイプ - 標準
- ワイプ - ストライプ
- ブラインド - 標準
イベントと操作
以下のトランジション ギャラリー コンポーネントのイベントに基づいてその他の操作をトリガーできます。
| イベント |
説明 |
| 自動再生終了 |
なんらかの理由で自動再生が終了すると送信されます。目的のループ数に達したことで自然に終了した場合は、event.detail.completed が true になり、その他の場合は false になります。 |
| フレーム有効化 |
新しいフレームの有効化が開始されると、まだ表示されていなくても送信されます。 |
| フレームの表示 |
新しいフレームが表示されると送信されます。 |
| フレームのタップ |
ユーザーがフレームをタップすると送信されます。 |
| 終了時に回転 |
なんらかの理由で回転が終了すると送信されます。自然に終了した場合は event.detail.completed が true になり、その他の場合は false になります。 |
| 左端に到達 |
ギャラリーが左端に達すると送信されます。 |
| 右端に到達 |
ギャラリーが右端に達すると送信されます。 |
[イベント] ダイアログでこれらのイベントのいずれかを選択するには、トランジション ギャラリー コンポーネントをターゲットとして設定します。
トランジション ギャラリー コンポーネントの以下の操作は、他のイベントをもとにトリガーできます。
| 操作 |
設定項目 |
| フレーム |
|
| 1 回転 |
|
| 自動再生を開始 |
|
| 停止 |
なし |
| 進む |
なし |
| 戻る |
なし |
[イベント] ダイアログでこれらの操作のいずれかを選択するには、トランジション ギャラリー コンポーネントをレシーバーとして設定します。
イベントを設定する方法をご確認ください。
プレビュー
[トランジション ギャラリー] ダイアログの [デザイン] モードでは、[フレーム] パネルの再生ボタン 
をクリックすると、選択したフレームから開始して、基本的なトランジションのようすを確認できます。プレビューを再生しながらプロパティを変更すると、変更の効果をすぐに確認できます。
[プレビュー] タブに切り替えると、自動再生と操作の両方について、設定したプロパティによるトランジション ギャラリーの効果を確認できます。
またダイアログで [保存] をクリックし、[プレビュー] ボタンをクリックすると、任意のブラウザでドキュメントのプレビューを行うこともできます。
をクリックするか、別のウィンドウから画像をドラッグします。
