キーフレームの編集

キーフレームを作成したら、今度は細かく調整する作業を行っていきます。キーフレームの編集ではキーフレームの移動や追加などができます。

また、キーフレームのコピーも可能で、コピーしたキーフレームを他のレイヤーに対して適用することができます。

これらの操作は［タイムラインパネル］で行います。

キーフレームの位置を動かす

まずはキーフレームの位置を移動させてみましょう。キーフレームを移動すると、アニメーションのタイミングが変更されます。

こちらのように２つのキーフレームが打たれています。後方にあるキーフレームのタイミングを少し遅らせてみます。

キーフレームをドラッグすると、キーフレームの位置を移動させることができます。

［コンポジションパネル］でプレビューしてみましょう！

キーフレームの間隔が広がったので、動きのスピードがキーフレーム移動前よりもゆっくりになりました。

キーフレームを追加する

次にこちらのキーフレームの間に新たにキーフレームを追加していきたいと思います。

まずは再生ヘッドをドラッグして、キーフレームを追加したい点まで移動させます。

位置プロパティの左側に表示されている、こちらの丸いボタンをクリックします。

すると、このように新たにキーフレームが追加されました！

モーションパスを変更する

キーフレームを追加していくと、アニメーションの動作をより細かく制御できるようになります。先ほど位置プロパティにキーフレームを複数設定しました。［コンポジションパネル］内に［モーションパス］が表示されるので、こちらを編集することで動きの細かい制御ができます。

モーションパスのポイント位置を移動させる

［タイムラインパネル］で、キーフレームを追加したレイヤーを選択し、［コンポジションパネル］を見てみます。このように、レイヤーのモーションパスが表示されています。レイヤーがこのパスに従って移動していくということですね。

パスの間にあるポイントはキーフレームでのレイヤーの位置を表しています。

こちらのポイントを動かすことでモーションパスを変更できます。

アンカーポイントを動かすことで、そのフレームにキーフレームを追加することもできます。

このようにモーションパスの形状を変更してみました。

空間の補間法を変更する

パスの各ポイントの空間補間法には「ベジェ曲線」と「リニア」があります。この２つを切り替えるツールとして［頂点を切り替えツール］というものがあります。

［ツールパネル］から［頂点を切り替えツール］を選択します。

［コンポジションパネル］に戻ります。

このようにモーションパスのキーフレームをドラッグします。

キーフレーム間が曲線になりました！

モーションパスを直線に戻すときは、［頂点を切り替えツール］で先ほどのキーフレームをクリックします。そうすると、ハンドルが削除され、ポイントの補間がリニアに戻ります。

方向ハンドルを操作する

ベジェ曲線では曲線の曲がり方を、ハンドルと呼ばれる曲線の接線で決定します。こちらのハンドルを動かすと、曲線の曲がり方を変更することができます。

ハンドルを伸ばすとこのように曲線が変化します。

ハンドルを動かすと、曲線がこのように変化します。

キーフレームをコピーする

キーフレームをコピーして他のレイヤーに適用させてみましょう！

似たような動きを複数のレイヤーに適用させるだけで、ちょっとしたキーフレームアニメーションを簡単に作ることができます。

レイヤーのプロパティを表示させます。こちらのボタンからプロパティを展開することができます。

レイヤーを選択した状態で［U］キーを押すと、キーフレームが設定されているプロパティだけ展開することができます。

コピーしたいキーフレームをクリックで選択します。複数のキーフレームを選択する場合は［Shift］キーを押しながらクリックします。今回は、位置に関するキーフレームをコピーして他のレイヤーに適用させます。

メニューバーの［編集］から［コピー］を選択します。

もちろんキーボードの［Ctrl+C］キーでもOKです！

他のレイヤーの位置プロパティを選択します。こちらに先ほどコピーしたキーフレームを適用していきます。

メニューバーの［編集］から［ペースト］を選択します。

キーボードの［Ctrl+V］でも同様にペーストできます。

すると、位置のキーフレームがペーストされました！

［プレビューパネル］で再生ボタンを押してプレビューしてみましょう！

全く同じ動きのアニメーションがコピーされていますね。

これでキーフレームの編集についての解説を終わります！