アニメーションにイージングを設定する - Animate

アニメーションにイージングを設定する方法を紹介します。

概要

こちらの記事ではAdobe Animateを利用してアニメーションを作成しました。 デフォルトのモーショントゥイーンの設定ではアニメーションはリニアに変化します。より効果的にアニメーションを見せるために、アニメーションに イージングを設定したい場合があります。この記事では、モーショントゥイーンのアニメーションにイージングを設定する手順を紹介します。

事前準備

こちらの記事のアニメーションを作成します。

手順

タイムラインパネルの変更したいモーショントゥイーンのトゥイーンスパン(下図のオレンジ点線部分)をダブルクリックします。


ダブルクリックすると下図の画面に切り替わります。トゥイーンスパンの下側にグラフのエリアが表示されます。


グラフのエリアの下部に表示されている[イージング]のボタンをクリックします。下図のポップアップウィンドウが表示されます。


ポップアップの左側のエリアでイージングの種類を選択できます。今回は[停止と開始]カテゴリ内の[標準]のイージングをクリックして選択します。 グラフが下図の表示に変わります。最初と最後に急激に変化するイージングになります。


イージングが設定できました、グラフが設定前は直線でしたが、イージングのグラフの形状に変化しています。


[制御]メニューの[再生]をクリックしてイージングの動作を確認します。


問題がなければ、[制御]メニューの[プレビュー]の項目をクリックしWebブラウザで動作を確認しますい。


Webブラウザが起動し、アニメーションが再生されます。


アニメーションにイージングを設定できました。