こんにちは、ユアサです。
前回の記事では新規ドキュメントの設定と3種類のトゥイーンの説明、ファイルへの書き出し方法の紹介をしました。これで新規作成から書き出しまで一通りの作業ができるようになりました。
今回は改めてキーフレームの話と、フレーム・キーフレームとトゥイーンを使ってより工夫した動作のアニメーションを作成していきます。
↓前回の記事はこちら tech.arms-soft.co.jp
キーフレームは2種類ある
基本的な動作編で紹介したキーフレームですが、実は「キーフレーム」と「空白キーフレーム」の2種類があります。「キーフレーム」を使ったアニメーションは作成しましたが、では一体「空白キーフレーム」では何ができるのでしょうか？
空白キーフレームは文字通り空白のキーフレームです。タイムライン上では黒丸のマーク表示のキーフレームと違い、白丸のマークが表示されています。
通常のキーフレームには対象のオブジェクトが存在しているのに対して、空白キーフレームにはオブジェクトが存在していません。そのため、空白キーフレームを挿入した箇所には新規で別のオブジェクトを用意することができます。
上の動画では、まず最初のキーフレームに丸型のオブジェクトを作成、2秒後に空白キーフレームを入れました。空白キーフレーム内に丸型オブジェクトが表示されていないことが分かります。
その後、空白キーフレーム内に正方形オブジェクトを作成し、タイムラインを開始点から順に表示確認しました。開始点から丸型オブジェクトが表示され、2秒後の地点からは非表示になり正方形オブジェクトが表示されます。
このように空白キーフレームを挿入することによって、その地点からアニメーション内に全く別のオブジェクトを作成することができます。
空白キーフレームの使い所
使い所の代表例がシェイプトゥイーンです。前回の記事でも紹介した通り、シェイプトゥイーンはアニメーションの途中で図形の変形を加えられる特徴がありますが、正確にいうと開始点と終点のオブジェクトのシェイプ（形）の形状を自動的に補填することによってスムーズに変形しているように見せています。
このシェイプトゥイーンの仕様にもってこいなのが、まさに空白キーフレームです。終点に空白キーフレームを挿入し、開始点とは別形状のオブジェクトを用意してシェイプトゥイーンを実装することで図形の変形アニメーションが作成できます。
実際にこの手順で作成してみましょう。
動画では開始点に丸型オブジェクト、終点には空白キーフレーム挿入後に正方形オブジェクトを用意してシェイプトゥイーンを実装しました。滑らかな動作で変形していますね！
トゥイーンを使って工夫したアニメーションを作る
前々回の記事ではクラシックトゥイーンで真っ直ぐ動作するアニメーションを作成しました。前回と今回で3種類のトゥイーンの使い方を一通り紹介したので、少し工夫したアニメーションを作成していきましょう。
球をバウンドさせる
最初に作成したアニメーション同様に丸型のオブジェクトを動作させますが、まずは基本の動作として有名なバウンドのアニメーションを再現してみます。
アニメーションの長さは2秒ほど、それぞれ0〜1秒、1〜2秒の間で跳ねるような動作をモーショントゥイーンで作成してみます。作成する手順としては、
- 開始地点から2秒地点までフレームを挿入、モーショントゥイーンを挿入
- 1秒・2秒の箇所でキーフレームを作成
- 各キーフレーム間のパスの中央を操作して、パスが弧を描くようにする
となります。
まずタイムラインの1秒と2秒の箇所にキーフレームを用意します。
今回は2秒間のアニメーションを想定しています。フレームレートは画像の通り24に設定されていてタイムライン上の1秒・2秒地点の間でそれぞれ跳ねさせたいので、1秒地点（24フレーム目）の中央である0.5秒地点（12フレーム目）と2秒地点（48フレーム目）の中央である1.5秒地点（36フレーム目）あたりのパスを上にドラッグし、それぞれのタイミングで丸型オブジェクトを跳ねさせます。
動画内で確認できますが、カーソルをパスに重ねると丸角のようなマークが表示されるので、その状態でドラッグができます。
ではこれを再生して動作を確認します。
オブジェクトが1回バウンドして2回跳ねるアニメーションができました！
球を動かしながら形状変化させる
続いてはシェイプトゥイーンを使用して作成します。こちらも同様に長さは2秒にし、その間に同じ丸型オブジェクトを動かしながら形状変化させていきます。
今回作成するアニメーションの流れは、
- 形状変化させたいタイミングのフレームに空白キーフレームを挿入
- 各空白キーフレームにそれぞれ違う形状のオブジェクトを作成、シェイプトゥイーンを挿入
- 各キーフレーム地点で図形を移動させる位置をドラッグで設定
となります。
開始地点の空白キーフレームに丸型オブジェクトを用意して終点含めて3箇所で形状変化させたいと思うので、もう3箇所に空白キーフレームを挿入します。
とりあえず1秒地点（24フレーム目）、1.5秒地点（36フレーム目）、2秒地点（48フレーム目）に挿入してみました。
続いて各空白キーフレームにそれぞれ違う形状のオブジェクトを作成していきます。
最後にそれぞれのオブジェクトに形状変化させる際に移動しておきたい位置に配置させます。
上記でさらっと「移動しておきたい」というワードが出ましたが、実はシェイプトゥイーンはモーショントゥイーン同様にスムーズな動作をさせることができます。ただ動作といっても形状変化と同じ仕組みで、各オブジェクトの配置の間隔を自動的に補完している状態なのでモーショントゥイーンに比べ柔軟な動きの操作はできません。
話を戻して、キーフレーム選択後にオブジェクトをドラッグして配置したら再生してみましょう。
動きと形状変化がスムーズに行われていますね！
まとめ
今回は空白キーフレームの使い方と工夫したアニメーションを作成しました。等速直線運動だったアニメーションより面白さが出てきましたね！！！！
次回はアニメーション作成におけるより良く見せるための理論『アニメーションの12の原則』を紹介しながらそれに沿ったアニメーションを作成して、Adobe Animateの連載記事を一旦締めたいと思います。
