この記事では、デザインの任意の部分にアニメーションを追加する方法について説明します。
アニメーションは、プロモーション、お知らせ、メッセージを表示する効果的な方法です。動きで人間の目を引き付け、自然にその方向を見るように促します。Designerを使用すると、デザインに簡単にアニメーションを追加でき、訪問者からより多くの注目を集めることができます。
Designerの使用方法については、Designerを始めるの記事をご覧ください。
デザイン要素にアニメーションを追加する方法
アニメートボタンを選択すると、デザイン要素にアニメーションを追加できます。
このボタンは要素ごとにも利用できます。
クリックすると、サイドメニューにアニメートエリアが開きます：
アニメーションを追加するには、アニメートする要素を選択する必要があります。次に、ページアニメーションまたはオブジェクトアニメーションのどちらを使用するかを決定します。
両者の違いと最適な使用方法（単独または組み合わせて）を示すために、以下のようなシンプルなテンプレートデザインを使用します：
ページアニメーション
ページアニメーションは、リストに配置された順序でアニメートします。これらはページが読み込まれるたびに一度だけアニメートします。
例えば、サンプルテンプレートの水を右から飛び込ませて、水のボトルに水しぶきがかかるような外観にしたいとします。
まず、要素を選択します。次に、ページアニメーションセクションの下にあるアニメート → 追加をクリックします。これにより、多くのオプションが表示されます：
アニメーションタイプ：
- フェードイン
- フェードアウト
- 左から飛び込む
- 右から飛び込む
- 下から飛び込む
- 上から飛び込む
- 左へ飛び出す
- 右へ飛び出す
- 下へ飛び出す
- 上へ飛び出す
- ズームイン - 要素を一時的にズームイン
- ズームアウト - 要素を一時的にズームアウト
- バウンス X - 要素を水平方向にバウンス
- バウンス Y - 要素を垂直方向にバウンス
- フラッシュ
- ズーム - 要素のズームインとズームアウトを交互に切り替え
- 左回転
- 右回転
これらの詳細な説明を提供することもできますが、実際に試してみて、あなたのビジョンにどのように適合するかを確認する方が楽しいでしょう！
アニメーションタイミング：
- 前の後 - リスト上の前のアニメーションの後にアニメーションをトリガーするよう設定します。
- 前と同時 - 前のアニメーションと同時にアニメーションをトリガーするよう設定します。
- 最初から - アセットが読み込まれるとすぐにアニメーションをトリガーするよう設定します。
遅延（秒） - アセットの読み込み/前のアニメーションとアニメーションの実行の間の遅延時間。
アニメーション速度 - アニメーションの動きの速さを変更します。
| 注意 |
|
アニメーションタイミングを適切に活用するには、遅延オプションと選択を調整する必要があります。 例えば、3つのページアニメーション、A、B、Cがあるとします。
|
アニメーションが追加されると、さらに作成できます。アニメーションのリストはドラッグアンドドロップで並べ替えることができます：
| 注意 |
| アニメーションがドラッグされる順序は、表示するタイミングを上書きしません。例えば、3つのアニメーションがあり、1つが「最初から」表示するように設定されている場合、順序の最後にドラッグしても、最後にあるにもかかわらず最初から表示されます。ドラッグアンドドロップで順序を変更しても、アニメーションタイミング設定は変更されません。 |
必要なアニメーションを作成するには、異なる水の要素を選択し、右から飛び込むようにし、すべての水が一度に入ってくるように最初からに設定します。再生をクリックしてこれをテストできます：
オブジェクトアニメーション
オブジェクトアニメーションは、配置された順序に関係なく同時にアニメートします。これらは無限にアニメートするように設定することもできます（またはアセットが画面に表示されている限り）。
例えば、画面をかなり長い時間（1分以上など）表示したいとします。その場合、停滞しないように、そして人々の注意を引き続けるために、追加のアニメーションを含める必要があります。
これを行うために、オブジェクトアニメーションを作成してHydrationテキスト要素に注目を集めます。
オブジェクトアニメーションタブは、ページアニメーションタブに似ていますが、いくつかの重要な違いがあります：
アニメーションタイミング
- 遅延 - 各アニメーションの間の遅延を指します。これには最初と、その後のすべてのアニメーションが含まれます
- 終了遅延 - 各アニメーションの内部の遅延を指します。
ループ
- 無限 - アセットが変更されるまでアニメーションを継続的にループします。
- 1回 - 読み込み時にアニメーションを1回再生します。
- 反復回数 - アニメーションを繰り返す回数を指定できます。
| レガシーDesigner 1.0ユーザーへの注意 |
| 最近のDesigner 2.0アップデートにより、単一要素への複数のオブジェクトアニメーションは非推奨となりました。1.0デザインに2〜3個のオブジェクトアニメーションがある場合、2.0でも編集できます。ただし、削除した場合は、1.0で追加し直す必要があります。Designer 1.0が非推奨になると、これらのアニメーションの編集または削除のみが可能になります。 |
Hydrationテキストを左右にバウンスさせたいが、気が散ったり迷惑になったりするほど速くないようにしたいとします。
遅延を3秒に設定し、終了遅延も3秒に設定します。これにより、バウンスがその時間だけ停止します。最後に、ループを無限に設定します：
すべてのアニメーションをまとめると、ページアニメーションのおかげで最初に素晴らしい素早いアニメーションのセットが得られ、その後はオブジェクトアニメーションのおかげで素晴らしいループが続きます。これはすべて再生またはプレビューでテストできます：
| 注意 |
|
各オブジェクトアニメーションの反復の計算式は次のとおりです： 遅延 + アニメーション期間 + 終了遅延 = 1反復。 |
アニメーションに関する一般的な問題
ここで、画面にアニメーションを表示しようとする際に遭遇する可能性のあるいくつかの一般的な問題について説明します。
プレイリストへのアセットの事前読み込み
この機能により、画面に表示する前にアセットを読み込むことで、よりシームレスな外観を実現できます。これにより、アセットが読み込まれている間にサイネージが1〜2秒間停止する可能性が低くなります。
OptiSignsは、アセットが画面に表示される6〜8秒前にアセットを事前読み込みします。これには、読み込み時にすぐに表示されるアニメーションをスキップする可能性があるという残念な効果があります。これを修正するには、次のいずれかを実行できます：
- （推奨）この事前読み込みが選択されているときに画面に表示されるように、アニメーションに1〜3秒の遅延を追加します：
- プレイリストでアセットの事前読み込みを無効にします。ただし、これによりトランジション間に空白の画面が表示されます。
デバイスのパフォーマンス
一度に多くのアニメーションを実行すると、デバイスのパフォーマンスに影響し、理想的でないデジタルサイネージ体験を作成します。
一般的に、これが感じられる程度は、デバイスのパフォーマンス能力に依存します。Rokuデバイス、一般的なスマートTV、Amazon FireStick、またはデジタルサイネージ用に特別に構築されていないその他のデバイスは、より深刻な問題に苦しむ可能性があります。これらのデバイスのいずれかを使用している場合は、作成されたアセットごとに1〜2個のアニメーション以下にすることをお勧めします。
対照的に、WindowsおよびLinuxデバイスまたはOptiSignsプレーヤーは、はるかに高い負荷を処理できます。ただし、これらのデバイスのいずれかを使用していてもスタッタリングが見られる場合は、作成されたアセットごとに3〜4個のアニメーションに制限することをお勧めします。
以上です！
OptiSignsはデジタルサイネージソフトウェアのリーダーです。OptiSignsについて追加の質問、懸念事項、またはフィードバックがある場合は、お気軽にサポートチームまでお問い合わせください：support@optisigns.com。