まずは前回の授業の宿題からお話しましょう。みんなに作ってもらった3つのアニメーションはどれもフェードインとフェードアウトが入っていますが、よく見てみると違いが分かります。
最初のアニメーションは、テキストの移動に合わせて徐々に表示され、移動の途中でテキストが最もはっきりと表示され、その後、テキストが移動するにつれて徐々に消えていきます。フレームトランジションを使用して作成する場合は、最初に 3 つのキーフレームを決定し、最初のフレームのテキストを不透明度 0% で右端に配置する (または、2 番目のフレームのテキストを非表示にする) 必要があります。透明度 100% で中央にあります。フレーム 3 のテキストは左端にあり、不透明度は 0% に戻ります (またはレイヤーが非表示になります)。おおよそ以下のとおりです。
次に、フレーム 12 とフレーム 23 の間をそれぞれ遷移し、それぞれ約 5 フレームを追加します。フレーム遅延時間は自分で設定できます。このアニメーションでは、動きと同時にテキストがフェードイン、フェードアウトします。移動中に透明度が変化します。
2 番目のアニメーションでは、右端でフェードインするときはテキストが静止しており、完全に表示されるとテキストが動き始めます。左端に移動すると静止したままフェードアウトします。その場合、そのキー フレームは、おおよそ下の左の図に示すように 4 フレームになるはずです。これら 4 つのフレーム間のトランジションをそれぞれ設定するだけです。
遷移フレームの特定の数は任意に設定できますが、設計の観点から、フレーム 12 とフレーム 34 の間の遷移は、約 3 ～ 4 フレームと少なくする必要があります。フレーム 23 の間には比較的多くのトランジション (約 6 ～ 7 フレーム) があるはずです。同じ距離を移動する場合、フレーム数が少ないと1フレームあたりの動きが速くなり、フレーム数が多いと動きが遅くなるからです。下の右図のように、3フレーム、4フレーム、7フレームの各フレームの移動距離です。理論的には、フレーム数が多いほど、アニメーションはより豊かで詳細になります。
私たちのアニメーションは主にテキストコンテンツを表示するため、視聴者はそれをはっきりと見ることができます。フェードインとフェードアウトのフレーム数を非常に多く、移動フレームの数を非常に少なく設定すると、テキストが非常に繊細にフェードインし、その後素早く移動し、その後フェードアウトする状況が作成されます。とても繊細に。おそらく視聴者はテキストの内容を理解できるかもしれませんが、この提示方法は不適切です。場合によっては型破りな表現手法になることもありますが。
ここで、同じ主題についてフェード効果と移動効果を備えた 2 つのアニメーションを作成しましたが、どちらも表現上の欠点があります。最初のアニメーションの欠点は、不透明度の遷移が長すぎることです。テキストがアニメーション全体の 1 つのフレームでしか完全に表示されないことです。使用前も使用後も半透明になりました。これではテキストの重要性が強調されず、閲覧者が読みにくくなる可能性があります。
最初のアニメーションのテキストは非常に鮮明に見えるため、この問題は存在しないと思われるかもしれません。ただし、最終的な表示状態として 100% の不透明度を使用します。このように、5 フレームの遷移に従って、各フレームは 20% ずつ増加します。つまり、最初のフレームは 0% ですが、2 フレーム目では 20% に達するため、基本的に読み取りには問題ありません。別の状況で、最終的な不透明度が 100% ではなく、30% 以下にすぎない場合、各フレームの不透明度の増分は非常に小さくなるため、最終的な不透明度 30% で十分ですが、読み取りには必要ですが、フェード処理中ははっきりと見えにくくなり、読書に影響を与えます。最終的な不透明度を 30%、10% などに設定して、再試行できます。
対照的に、2 番目のアニメーションでは、フェードインとフェードアウトを別々に実行し、フェードインが完了した後でのみ移動を開始します (テキストが最終的な表示状態に達する)。 100% であろうと 30% であろうと、運動中は元の形状を維持します。ただし、開始点と終了点でテキストが静止するため、動きの連続性が損なわれるという別の欠点もあります。
次に、この 2 つを組み合わせて、フェードインおよびフェードアウト効果があり、テキストをより適切に表示できるアニメーションを作成したいと思います。このアイデアは、プロセス全体を通じて最初のアニメーションのテキストを動かし続けますが、フェードインとフェードアウトを最初と最後で数フレームに圧縮して、テキストがほとんどのプロセスで最終的な外観を維持できるようにすることです。動きの。下の左図に示すように、双方向の矢印はフェードインとフェードアウトのプロセスを表しており、上半分はフェードインとフェードアウトの合計が全体に等しいことがわかります。アニメーションのプロセス。以下に示すのは現在のアイデアで、フェードインとフェードアウトがシーケンス全体の半分以下を占めています。これにより、テキストは最終的な外観でほとんどの動きを完了することができます。
キーフレームの設定は下図右のように、隣接する2フレーム時のトランジションを設定するだけです。フレーム 1 ではテキストが見えませんが、フレーム 2 ではテキストがすべて表示され、位置が少し左に移動していることがわかります。このようにして、フレーム 12 の遷移によって不透明度の全体的な変化が完了し、同時に動きの小さな部分が完了します。その後、テキストは一定の距離を移動し（フレーム 23 遷移）、フェードインとは逆に左端付近に移動しながらフェードアウトを開始します（フレーム 34 遷移）。
このアニメーションを作成する際に直面するもう 1 つの問題、つまり 12 フレーム目の移動距離と 23 フレーム目の移動距離をどのように一致させるかを考えたことはあるでしょうか。ここでの対応とは、等しいという意味ではなく、フレーム１２の遷移が３フレーム（ＡＢＣ）、フレーム２３の遷移が６フレーム（ＤＥＦＧＨＩ）であるとする。 , 1ABC2DEFGHI3、合計12フレーム。より良い動き効果を実現するには、これら 12 個のフレームのそれぞれにおけるテキストの移動距離が等しくなる必要があります。しかし、人々は移動距離を十分に判断していないため、前は速くて後ろはゆっくり、または前はゆっくりで後ろは速くという効果を生み出すことがよくあります。定規を使用して距離を正確に計算しない限り、この問題を解決するのは困難です。最適なトランジション フレーム数を見つけるには、何度か試行するしかありません。
このレッスンでマスターする必要があるのは、動きと組み合わせた場合のフェードインとフェードアウトを処理する方法です。最善の方法は、各フレームの移動距離を同等に保ちながら、より短いフレーム数を使用して移動を続けながらフェードインとフェードアウトを完了することです。この操作は少し面倒ですが、すぐに解決策が見つかるのでご安心ください。
アニサンプル01.rar
3 番目のアニメーションを作成するためのソース ファイルをここで提供します ( anisample01.rar ）、誰もができないとは思いませんが、教育の統一性を確保するには、このアニメーションを使用して学習を続ける必要があります。自分の作品を使用することもできます。この授業には宿題はありませんが、anisample01.psd の元の 20 フレームの設定を変更せずに、次のようなアニメーションを作成するにはどうすればよいかという思考問題があります。
次のセクションでは、トランジション フレーム アニメーションの制限事項を紹介します。