ビデオ
初心者向けのキーフレームアニメーション
キーフレームは、アニメーション、エフェクト、モーショングラフィックにおいて基本的な要素です。キーフレームがAdobe After Effects、Animate、Character Animatorでどのように使われているか理解しましょう。
キーフレームとは？
アニメーションの初期の頃、フレームは1枚1枚手で描きました。現在、アニメーターは、デジタルキーフレームを使ってそれぞれのグラフィックの要素を識別し、その要素をどのように動かすのか、または一定の時間の中で、どのように変えていくかを選ぶことができ、何時間、何週間、何ヶ月という作業時間を節約することができています。デジタルアニメーションのシーケンスでアクションを作るには、まずそのアクションの始まりと終わりを決めなければなりません。このようなマーカーをキーフレームと呼び、これはAdobe After Effects、Animate、Character Animatorなど、様々なタイプのアニメーションプログラムで、アクションのアンカーポイントを示すのに使われます。
アニメーションの基本、キーフレーム
円形をスクリーン上で、または動画のフレームの中で、ボールのように跳ねさせたいとします。このボールを、ある地点から別の地点まで動かしたい場合、アニメーションタイムラインで、ボールがスタートする地点に最初のキーフレームを設定します。そして、タイムラインでボールが止まる位置に、新しいキーフレームを設定します。
キーフレームで変更する
キーフレームを使えば、位置の変更以外のことも可能です。アニメ化したオブジェクトの質感をキーフレームで変更でき、これをパラメーターと呼びます。パラメーターには、アンカーポイント、ポジション、スケール、回転、不透明度などがあります。オブジェクトのポジションや回転など動きを変更させる場合、パラメーター値を調整してからオブジェクトをクリック、ドラッグしてキーフレームを配置します。
キーフレームの補間のタイプ
補間法とは、表示させアクションまたは動きを、どのように動かすのかその方法のことです。ベジェ、または「イージングムーブメント」は、自然の動きを模倣するので、大抵の場合これが適切な選択肢となります。オブジェクトは自然に動きに入り、目的とする動きに応じて変化の度合いを変えて、自然に動きを止めます。
- リニア補間法： これはデフォルトの変化で、均一的なロボットのような動き方です。
- ホールド補間法： 次のキーフレームで突然変化が起きるタイプです。
- ベジェまたはイーズ補間法： これはマニュアルで調整できる曲線の動きをベースとした変化です。
https://main--cc--adobecom.hlx.page/cc-shared/fragments/seo-articles/after-effects-card
Adobe After Effectsのキーフレーム
After Effectsでアニメ化した効果を作る、またモーショングラフィックを作るにはキーフレームは必須です。AnimateまたはCharacter Animatorといったプログラムでは、アニメーションの部分だけを処理します。一方、After Effectsでは、アニメ化したエレメントを、実際の動画クリップに組み込むことができます。After Effectsでキーフレームの設定、選択、削除する方法について学びます。また、動画チュートリアルで、モーションパスを作成する方法を確認しましょう。
After Effectsでキーフレームを加える方法
以下のステップに従って、After Effectsのグラフィックにキーフレームを加えてみましょう：
1. アニメ化したいレイヤーを選択し、クリックしてそのレイヤー用のTransformパラメーターを表示する。
2. パラメーターを選択するか、レイヤーをどのように変えたいか選択する。
3. プレイヘッド（タイムラインで現在の作業の場所を示す青のマーカー）を、キーフレームを加えたい位置に動かし、次にグラフィックを希望するスタート地点に表示するか、パラメーターを設定する。
4. 選択したパラメーターの隣にあるストップウォッチをクリックして、最初のキーフレームを加える。
5. タイムラインで前方にスクロールし、アクションが終了する位置にプレイヘッドを配置する。次に、グラフィックを希望するアクション終了の位置に配置するか、パラメーターの設定を終了して2番目のキーフレームを設定する。
6. 補間法を変えるには、キーフレームを右クリックし、キーフレームアシスタントをクリックして、希望する方法を選択する。
7. 途中のフレームで以前のアクションを繰り返す場合は、キーフレームをコピーする。または、なげなわツールを使って最初の部分を選択し、タイムライン上でリピートしたい部分にコピー＆ペーストする。
Adobe Animateのキーフレーム
ゲーム、テレビ番組、Web ページ向けに2Dアニメーションクリップを作りたい場合、Animateが最適なプログラムです。 After Effectsと同様に、Animateでもキーフレームは基本的な要素です。 Animateのアニメーションでは、トゥイーンフレームスパンを使います。これは2つのキーフレームの間のフレームにアニメ要素が含まれていることを意味します。After EffectsやCharacter Animatorでは、キーフレームはダイヤモンド型ですが、このアプリでは長方形をしています。
Animateのキーフレームとトゥイーンについて理解する
アニメ制作やゲームのデザインを始める前に、Animateのタイムラインでキーフレームがどのように機能するのか、その基本を学びます。そしてこのチュートリアルで、Animateのトゥイーンとキーフレームについて学びましょう。
Adobe Character Animatorのキーフレーム
Character Animatorは、モーショントラッキング技術を使ってコンピューターカメラで顔の動きや表情を追跡し、それらを2Dのキャラクターかパペットに変えます。より精度の高い動きを表示したい場合や、モーショントラッキングでは作れない複雑な動きが欲しい場合は、アニメーションにキーフレームを選択し、加えます。Character Animatorのキーフレームは、After Effectsのキーフレームと良く似た表示と動きをします。
キーフレームとモーショントラッキングを結合
Character Animatorでキーフレームを使う方法を簡単に学びます。また、このさらに詳しい手順を踏んだ動画でキーフレームを詳しく見ていきます。手順を踏んだ動画
よくある質問
他のアドビのプログラムでも、キーフレームを使えますか？
キーフレームとCreative Cloud
アプリケーションの多くは、キーフレームを加えたシーケンスが必要ですが、Adobe Creative Cloudには処理する上で多くの利点があります。異なるタイプのメディアを1つの動画プロジェクトに合成する場合に、Adobe IllustratorやPhotoshopなど他のアプリケーションからそのデザインを取り込むことができるのも、そういった利点の1つです。しかも、Creative Cloudであれば、1つのアプリケーションで得た知識を、他のアプリでも活用できます。アドビで様々なタイプのキーフレームを活用して、どのような動きでも思い通りに作っていきましょう。
