Edge Animate入門 第3回：エレメントのアニメーション

本記事では、Adobe Edge Animate CC（以下、Edge Animate）で、タイムラインを使ってエレメントにアニメーションを付ける方法を紹介します。

Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード

キーフレームを使ったアニメーション作成

Edge Animateでは、キーフレームを細かく設定しながらアニメーションを作成できます。キーフレームとは、ある時点でのプロパティの値を指定するものです。

任意のエレメントを選択時に、［プロパティ］パネルを見ると、位置や大きさなどのいろいろな項目（プロパティ）の右側に「♦」ボタンがあります。このボタンは、「そのプロパティのキーフレーム（値の切り替わる位置）を作成する」ボタンです。

キーフレームを使ってアニメーションを作成する手順は以下の通りです。

  1. エレメントを選択して、［プロパティ］パネルで任意のプロパティの「♦」ボタンをクリックします。
  2. タイムラインにそのプロパティのレイヤーが作成され、キーフレームが設定されます。
  3. 再生ヘッドをアニメーションの終了位置へ移動します。
  4. 以下のいずれかの方法で
  1. すると、新たなキーフレームが自動作成されアニメーションが完成します。

図1 キーフレームを使ってアニメーションを作成する手順（サンプル：sample.an）

なお、作成したキーフレームの位置は、タイムライン上でドラッグして移動することができます。

スペースバーを押すと、Edge Animate上アニメーションのプレビューができます。また、［Ctrl］（Mac OSはCmnd）+［Enter］キーを押すと、ブラウザ上でもプレビュー可能です。

２つのアニメーション記録モード

タイムラインの左上には、2種類のアニメーション記録モードのボタンがあります。キーフレームを使用してアニメーションを作成する際には、これらのモードのオン／オフによって、作成されるアニメーションに違いが出ます。

［自動キーフレームモード］：オンの場合、エレメントの移動などを行うと、その操作を反映したキーフレームが自動的に作成されます。

［自動トランジションモード］：自動キーフレームモードがオンの状態で、このモードもオンの場合、直前のキーフレームの値から、作成したキーフレームの値 まで、徐々に変化させるアニメーション（トランジション・アニメーション）が作成されます。オフの場合には、そのキーフレームの位置でプロパティの値が パッと変更するアニメーションが作成されます。

図2 これらのモードは、ボタンをクリックすることでオン／オフを切り替えられます

初期状態は両モードともオンになっています。作成したいアニメーションに応じて、モードを切り替えてみましょう。

図3 モードのオン／オフによるアニメーションの違い

なお、キーフレーム間のトランジション・アニメーションのみを削除したい場合には、アニメーションスパン（キーフレーム間の色のついている部分）をクリックして選択し、［Delete］キーを押します。

ピンツールを使ったアニメーション作成

Edge Animateでは、タイムラインに「ピンツール」という機能があります。ピンツールとは、「ステージに表示中の状態を固定（ピン）し、ピンと再生ヘッド の位置にキーフレームを設定し、トランジション・アニメーションを作成する」機能です。このピンツールを利用すれば、簡単にアニメーションを作成できま す。以下の手順で作成します。

  1. タイムラインの［ピン］ボタンをクリックし、ピンツールをオンにします。すると、タイムライン上に再生ヘッドとは別に、青い「ピン」が表示されます。
  2. 再生ヘッドをドラッグして、アニメーションを作成したい区間を指定します。
  3. ステージ上でエレメントを移動・変形します。これだけで、キーフレームが設定され、アニメーションが完成します。

図4 ピンツールを使ってアニメーションを作成する手順（サンプル：sample2.an）

作成されたアニメーションは、「ピン」の位置の状態から、再生ヘッドの位置の状態まで、だんだんと位置や大きさを変化するアニメーションとなります。アニメーションの作成が終わったら、もう一度［ピン］ボタンをクリックし、「ピン」モードをオフにします。

なお、意図していなかったプロパティのアニメーションまで作成されてしまった場合には、タイムライン上からそのプロパティのレイヤーを選択し、［Delete］キーを押すと、そのプロパティのアニメーションのみを削除できます。

イージングの設定

Edge Animateでは、トランジション・アニメーションに、簡単にイージング（変化の度合いの調整）を付けることができます。イージングは、以下の手順で設定します。

  1. イージングを適用したいアニメーションスパンを選択します。
  2. タイムライン左上にある［イージング］ボタンを押して、適用したいイージングの種類を選択します。

図5 イージングを設定する手順（サンプル：sample3.an）

イージングを使用すると、だんだんと加速・減速するようなアニメーションや、バウンドするようなアニメーションも簡単に作成できます。