では、前回の授業の宿題について説明しましょう。前回の「石器時代」の宿題と比べて、難易度が大幅に上がっています。 1 つは、アニメーション要素が増加し、いくつかの単純なオブジェクトで構成されなくなったことです。さらに、事前に明確なイメージを持ち、手順を計画する必要があります。
約 100×100 の新しい画像を作成し、楕円形ツールのシェイプ レイヤー モードを使用してベクトルの完全な円を描画し、緑色で塗りつぶします (値は 19631c で、カラー ピッカーの下の # 領域に塗りつぶすことができます)これは実際には 10 進数の 0 ～ 255 を表すために 16 進数を使用しています。詳しく説明する必要はありません）または他の色を表します。次にレイヤーをコピーし（CTRL+J、コピーしたレイヤーは元のレイヤーの上にある必要があります）、コピーしたレイヤーで自由変形機能を使用し、中心点を基準にして縮小します（ALT+SHIFT）。次に、そのストローク スタイル (サイズ 1 ピクセル、白) を定義し、塗りつぶしの不透明度を 0% に設定して線の円を取得します。より良い視覚効果を得るには、このレイヤーの不透明度を適切に下げます (約 15%)。この線円レイヤーを再度複製し、前と同様に再度縮小して、2 つの同心円の線円を取得します。さらに多くの同心円を順番に作成することもできます。画像は下の左側の画像のように見えるはずです。
次に、新しい通常レイヤーを作成し、線ツールのピクセル塗りつぶしモード (太さ 1 ピクセル、アンチエイリアスをオフ) を使用して、円の中心に水平および垂直の十字を描きます。描画時に画像を拡大して位置合わせしやすく、描画後に調整するマルチレイヤー位置合わせ機能も利用できます。この時点で、画像は下の中央の図のようになり、レイヤー パレットは下の右の図のようになります。
この初期のアニメーション要素の準備プロセスでは、円を縮小する必要があったため、最初にベクトルを使用して円を描画しました。ベクトル手法は品質を保証できます。後者の十字は理論的にはベクトル法で描画できますが、ベクトル線は1ピクセル単位で描画されるため、独自のアンチエイリアシング機能によりエッジがぼやけてしまい、太い線のように見えてしまいます。 2ピクセル。自分で試してみることもできます。極端に小さいユニットの場合を除いて、可能な限りベクトル描画を使用する必要があります。この前提は変わりません。
レーダー スキャン効果の実現は、実際にはグラデーション オーバーレイ スタイルであり、下の左と中央の図に示すように、角度のグラデーション方法とそれに対応するグラデーション設定を選択することが重要です。グラデーションのカラーコードは 96de8a です。グラデーション停止を白にして、ブレンド モードを変更するか不透明度を下げることで画像にブレンドすることもできます。画像は右下の画像のようになります。ここの内容が理解できない場合は、基本チュートリアルの対応する章を確認してください。
次に、グラデーション オーバーレイ設定の角度値を変更して走査線を動かします。ここで遭遇する 2 番目の困難は、アニメーション パラメータを設定する方法です。走査線は 90 度で開始し、360 度回転した後に 90 度に戻る必要があります。ただし、キーフレームで両方とも90に設定するとアニメーション効果がなくなるので、まずは180度回転した位置に設定します。なお、絶対回転角が 180 度未満（181 度は 1 度に相当）の場合は、最小回転角が回転方向として使用されます。
アニメーションのドキュメント設定を長さ 01:00、フレーム レート 15fps に変更します。最初に円レイヤーのスタイルアニメーション記録をオンにします。次に、時間ベンチマークをアニメーションの最後に移動し、角度を -90 度に設定します。アニメーションパレットは以下の左側に表示されます。
サンプルアニメーションを見る
次に、アニメーションの継続時間を 02:00 まで延長し、タイム マーカーを新しい終了瞬間に移動してキーフレームを作成し、スタイルのフレーム 1 をその瞬間にコピーします。このときのアニメーションパレットは下図左のようになっています。これで1回転の設定が完了したように見えますが、よく考えてみると今は00:00と02:00の状態が同じなので、アニメーションがループすると同じ2つのフレームが1つになるということになります。アニメーションを再生するときに注意して見れば、一時停止効果を見つけるのは難しくありません。
サンプルアニメーションを見る
以前にもフレームベースのアニメーションでこの問題に遭遇したことがありますが、そのときの方法は最後のフレームを削除することでした。ただし、タイムライン モードでは、フレームを個別に削除することはできず、継続時間を変更することのみが可能です。長さを 01:14 に変更します。アニメーションパレットを以下に示します。
最初に設定されたフレームは現在時間領域の外にありますが、まだ機能しており、アニメーションのパラメータ変更を制御していることに注意してください。これは、継続時間をより短いものに変更して、アニメーション パレットが表示されなくなった場合にも当てはまります。そのため、タイムラインモードで定義したキーフレームは継続時間が短くなるため消えません。期間が延長される限り、将来的にも再び表示されます。これは非常に重要な機能です。
ここでも、アニメーション時間の表現である 01:14 には秒とフレームの両方が含まれており、1 秒後の 14 番目のフレームを意味します。 15fps の設定によれば、この絶対フレーム数は 15+14=29 フレームになります。次のフレームの時間表現は、01:15 ではなく 02:00 である必要があります。日常生活の時間が 60 進法であるのと同じように、3 時 60 分と表現することはできず、4 時と表現する必要があります。同様に、15fps は 16 進法を表し、1 秒を 15 単位に分割し、14 単位後の秒に丸めます。
サンプルアニメーションを見る
ここで、レーダーによってスキャンされたオブジェクトのシミュレーションを作成する必要があります。これは最初に行うべきでしたが、後から製造プロセス中に要素を追加する可能性を反映するために、ここで実行しました。
新しいレイヤーを作成し、直径 1 の鉛筆ツールを使用して、白で数回クリックします (間隔が広すぎないように注意してください)。左下の図のように。次に、スキャン ラインがこれらのポイントに接触したとき (この例では 00:10)、不透明ストップウォッチ ボタンをクリックしてキー フレームを作成し、スキャン ラインがほぼ原点に戻るまでタイム マーカーを移動します (例) 01:10 に位置) もう 1 つ作成し、レイヤーの不透明度を 0% に設定すると、ドットが徐々にフェードアウトするアニメーションが作成されます。
サンプルアニメーションを見る
上のアニメーションから、走査線が通過した後に小さなドットがフェードアウトすることがわかりますが、問題は、走査線が通過する前に小さなドットが表示されることです。走査線はそこに到達し、徐々にフェードアウトします。次に、最初にキーフレームを設定し、レイヤーの不透明度を 0% に設定する必要があります。しかし、小さなドットの出現がフェードイン効果になる、つまり走査線が到達する前に小さなドットが徐々に現れるという別の問題があります。
サンプルアニメーションを見る
この問題をどう解決するかが３番目の困難です。これを解決するには 2 つの方法があります。1 つは、下の左図に示すように、最初のキーフレームを小さなドットが完全に表示される前のフレームに移動することです。さらに、もう 1 つの方法は、これまで説明しなかった、より「形式的な」方法であり、フレーム間の遷移関係を変更することです。
これで、3 つの不透明フレーム間に遷移関係、つまりフレーム 12 遷移とフレーム 23 遷移が存在します。フレーム 12 間の移行を防ぐことができれば、目標を達成できます。アニメーション パレットのフレーム 1 を右クリックし、[補間を保持] を選択します。フレーム アイコンが から変化することに注意してください。
になった
, 以下の右図の赤い矢印で示すように。これは、あるフレームと次のフレームの間にトランジションがないことを意味します。 「黒から白へ」から「黒か白のどちらか」へアプローチが変わりました。この時点で、アニメーション制作全体が完了します。
もちろん、後でデフォルトの「線形補間」方式に変更すると、トランジション効果が再び表示されます。他のフレームの補間方法を自分で変更してみることもできます。ここでの「補間」は英語からの直訳ですが、意味が伝わらない言葉もありますが、その効果だけは覚えておいてください。
レイヤースタイルの導入により、アニメーション効果の表現力が大幅に向上しました。皆さんもここで紹介した内容だけにとらわれず、コース以外でももっと自分で練習してみてください。私たちの例は限られており、あなたの創造性は無限であることを知ってください。完成したアニメーションでは、十字線や同心円を点滅させてみます。端的に言えばフェードインとフェードアウトを繰り返すことですが、0％や100％といった極端な状態ではありません。
今日の宿題は、次のアニメーションを完成させることです。背景レイヤーのほかに使用できるテキスト レイヤーは 1 つだけです。
