アニメーションにイージングを設定する方法を紹介します。
こちらの記事ではAdobe Animateを利用してアニメーションを作成しました。
デフォルトのモーショントゥイーンの設定ではアニメーションはリニアに変化します。より効果的にアニメーションを見せるために、アニメーションに
イージングを設定したい場合があります。この記事では、モーショントゥイーンのアニメーションにイージングを設定する手順を紹介します。
こちらの記事のアニメーションを作成します。
タイムラインパネルの変更したいモーショントゥイーンのトゥイーンスパン(下図のオレンジ点線部分)をダブルクリックします。
ダブルクリックすると下図の画面に切り替わります。トゥイーンスパンの下側にグラフのエリアが表示されます。
グラフのエリアの下部に表示されている[イージング]のボタンをクリックします。下図のポップアップウィンドウが表示されます。
ポップアップの左側のエリアでイージングの種類を選択できます。今回は[停止と開始]カテゴリ内の[標準]のイージングをクリックして選択します。
グラフが下図の表示に変わります。最初と最後に急激に変化するイージングになります。
イージングが設定できました、グラフが設定前は直線でしたが、イージングのグラフの形状に変化しています。
[制御]メニューの[再生]をクリックしてイージングの動作を確認します。
問題がなければ、[制御]メニューの[プレビュー]の項目をクリックしWebブラウザで動作を確認しますい。
Webブラウザが起動し、アニメーションが再生されます。
アニメーションにイージングを設定できました。
