これまでの 3 つのレッスンの学習を通じて、作成されたアニメーションはまだ非常に粗雑ではありますが、アニメーションの作成方法を習得しました。基礎を学んでいたとき、長い間単一のカラーブロックに触れていたことをまだ覚えていますか?それは全員の現在のパフォーマンスレベルに影響を与えていません。同様に、近々、より詳細なアニメーションの作成を開始します。しかし、この事態が起こる前に、誰もが必要なデザイン思考を学ばなければなりません。いわゆるデザイン思考とは、アニメーションを作成する前の計画と検討を指します。この計画にはさまざまな側面が含まれます。
まず、レイヤーの構成について説明します。最終的に完成したアニメーションにはレイヤー情報が含まれません。ここで言及されているレイヤーは、運用中のレイヤーのみを指します。レイヤー位置の変更を使用して作成されたアニメーションの場合、明らかな問題は、レイヤーを合理的に配置する必要があることです。これは、動きの最小単位がレイヤーであるため、異なるモーション軌道を持つ複数のオブジェクトを作成する必要がある場合は、それらを異なるオブジェクトに分散する必要があることです。層。画像のサイズと配置には、移動するための十分なスペースを確保する必要もあります。これもその 1 つです。
2 つ目は、他のレイヤーと交差するかどうか、および交差をどのように処理するか、つまりレイヤーの階層配置を検討することです。次の図の一番左にある 2 つの交差方法を示します。両方のレイヤーが 100% の場合、緑が赤を覆います。他の 2 つは、不透明度 50% での異なるレイヤーの異なるカバレッジ効果を示しています。緑が赤を覆う場合、交差点は緑が多くなり、その逆も同様です。これはすべて通常のブレンド モードでの作業です。オーバーレイなどの他のブレンド モードを選択する場合は、レイヤーにさらに注意を払う必要があります。
上記はすべて技術的な問題ですが、次にプロットの問題について話しましょう。一般に、オブジェクトが画像内で常に動いている場合、それを考慮する必要はありません。しかし、オブジェクトが最初は写真の中になく、後で写真に入った場合、または最初は写真の中にあったが、後で写真の外に移動した場合、オブジェクトの出現と消滅を説明する必要があります。この説明は遷移であり、次のことを可能にします。視聴者の心理がより自然に変化します。一般的なテクニックは、オブジェクトを徐々に出現させたり (フェードインとも呼ばれます)、徐々に消滅させたり (フェードアウトともいいます) することです。以下の図に示すように、同じテキストの動きにおけるフェードインとフェードアウトの効果を比較しています。
マウスを再生領域内に移動すると実際のアニメーション効果を確認でき、マウスを再生領域外に移動すると再生を停止できます。比較してみると、フェードイン・フェードアウト処理を加えた方が効果が高いと誰もが感じられると思います。
さらに、ループ設定もプロットの問題であり、これについては以前にも触れました。つまり、場合によっては無限ループ アニメーションを使用できることもありますが、別の状況ではそれが適さないこともあります。例えば、コラムタイトルの文字がフェードインするアニメーションが連続して繰り返されると、Webページ全体が乱雑に見え、閲覧者に不快感を与えてしまいます。現時点で最も適切なアプローチは、Web ページ全体に影響を与えることなく効果を表示できるように、一度再生することです。サイクルの設定は 2 ～ 3 回が一般的であり、それ以上のサイクルは好ましくありません。
ただし、一度だけ再生するアニメーションは、Web ページにアクセスするとすぐに表示されるように、Web ページの上部に配置するのが最適です。 Web ページの下部に配置されている場合、視聴者がその時点に到達するまでにアニメーションの再生が終了している可能性があります。そうなるとアニメーションを作る意味がなくなり、静止画を使った方が良いでしょう。
アニメーション GIF 画像は呼び出されるたびに再度再生されることに注意してください。すでに Web ページ制作の知識がある人は、このプロパティを使用して Web ページ制作ソフトウェアに対応するアクションを設定できます。たとえば、ここにマウスを移動すると、例のアニメーションが表示されます。アニメーションは、移動するたびに常に最初から始まります。このようにして、アニメーションが 1 回しか再生されない場合でも、Web ページ上で複数回再生できます。 Web ページ制作に関する知識がなくても、その後のアニメーションの学習には影響しませんので、ご安心ください。 。
見栄えの良いフェード効果に関して考慮すべき重要な問題は、ブラウザーがアニメーションを無効にするように設定できることです。この時点では、アニメーションの最初のフレームのみが表示されます。最初のフレームはもともと空白であるため、上記の「静かに行き来する」のようなアニメーションが Web ページ内で空白になります。これは視聴者に誤解を与えやすいです。
意図的にアニメーション表示をオフにする人はいないと思われるかもしれませんが、この要因を排除することはできないため、訪問者の状況を最も広いレベルで考慮する必要があります。 Web ページ全体のレイアウトにおいて、重要なテキストやインジケーター部分にフェード アニメーションを使用することは避けてください。アニメーションを Web ページに配置した後、アニメーションの再生を手動でオフにして、問題がないか確認することをお勧めします。アニメーションの再生をオフにするだけでなく、ページ表示中に訪問者が ESC キーを押すと、アニメーションの再生も中断され、中断された瞬間の画面が表示されます。
アニメーションの再生を禁止されている訪問者と、同時にアニメーションの再生を許可されている訪問者に配慮し、両者のバランスを取りたい場合は、アニメーションの制作における原則に従う必要があります。メイン部分は動かず、変更された部分はアニメーション化される必要があります。下の図に示すように、テキスト自体はアニメーション化されず、テキストの端のみがアニメーション化されます。これにより、静止画アニメーションが再生されたり、再生中に中断されたりしても、視聴者の内容理解に影響を与えることはありません。
ただし、内容が常に正確に反映され、文字の消失や過度の変形が起こらない限り、本文の移動も可能です。
このレッスンで説明する内容はアニメーション制作の技術とは関係ありませんが、Web ページにアニメーションを適用する場合は、アニメーションの制作方法や実行方法を広い視野で検討する必要があります。こういった内容をただ学ぶだけではちょっと退屈ですし、皆さんに印象を残して今後の制作に活かしてください。
今回の課題は「静かに行ったり来たり」のアニメーションを作成することです。また、以下の2つの派生アニメも制作されています。
次のセクションでは、アニメーションにおけるフェードインとフェードアウトの表現方法を紹介します。