ズームは、パーツやインナーが小さい状態から大きくなって現れる(ズームイン)、または大きい状態から縮んで現れる(ズームアウト)アニメーションです。ボタンなど、目に留めてほしい部分に向いています。
見え方
設定のしかた
- ズームを付けたいパーツ(またはインナー・コンテナ・セクション)を選びます。
- 右側のプロパティメニューで「アニメーション」タブを開き、「アニメーション」で「ズーム」を選びます。
- 種類と倍率、トリガーとタイミングを設定します。
- ツールバー右端の「▶」で動きを確認します。
ズームの設定項目
| 項目 | 内容 |
|---|---|
| 種類 | ズームイン:小さい状態から元の大きさになって現れます。 ズームアウト:大きい状態から元の大きさに縮んで現れます。 |
| 倍率 | 動き始めの大きさを決めます。最大 x3 です。倍率を大きくするほど、動きが大きくなります。 |
トリガー・タイミングなど共通の設定については、アニメーションとはをご覧ください。
設定例
| やりたいこと | 設定 |
|---|---|
| ボタンを目立たせて表示する | ボタンにズーム。種類:ズームイン |
| ボタンをクリックしたときに動かす | ボタンにズーム。トリガー:クリック |
ズームアウトは、周りの文字や画像に重なることがある
ズームアウトでは、動き始めにパーツが元の大きさより大きく表示されます。このとき、インナーやコンテナの枠の外にはみ出し、周りの文字や画像に重なって表示されます。スマートフォンの画面幅では、画面の端からはみ出し、動いているあいだ横スクロールが出ることがあります。倍率を大きくするほど目立つため、ズームアウトでは倍率を控えめにしてください。
ホバーにすると、マウスを乗せるたびに一度消える
トリガーを「ホバー」にすると、マウスを乗せるたびにアニメーションが最初から再生されます。そのため、ボタンなどが一瞬消えてから、もう一度現れるように見えます。