10.応用アニメ【パスに沿った回転と加速減速】

f:id:AdobeAnimateFunya:20160302165254p:plain
う〜ん… にゃんだか不自然な動きふにゃ〜

www.youtube.com トロッコに乗ったふにゃもらけが山を走っていくアニメーション。

f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ… 傾斜のある山に対してトロッコは傾きが変わらずに動いて確かに違和感があるね。 こういう時は「パスに沿って回転」にチェックを入れるといいよ

youtu.be

f:id:AdobeAnimateFunya:20160302184715p:plain
わ〜! トロッコのインスタンスが移動に合わせて傾くようになったふにゃ〜〜!
f:id:AdobeAnimateFunya:20160302165304p:plain
さらに「イージング」機能を使えば減速や加速も表現できるよ。

減速 youtu.be

加速 youtu.be

----------------------------------------------------------------------------------------

やってみよう!

パスに沿った回転と加速減速

1.準備

何かイラストを描いてモーションに沿ったアニメを作ろう。
5.基本のトゥイーンアニメ(モーションガイドに沿って動かす) で使ったファイルを使うといいよ

2.

f:id:AdobeAnimateFunya:20170624161528p:plain トゥイーンの最初のキーフレームを選ぶ。 f:id:AdobeAnimateFunya:20170624161601p:plain プロパティが「トゥイーン」になる。「パスに沿って回転」にチェックを入れよう。

3.再生してみよう

youtu.be インスタンスがモーションガイドに沿って角度が変化するアニメになったよ。

いい感じにアニメしない場合はキーフレームの角度を変えてみよう。 f:id:AdobeAnimateFunya:20170624163024p:plain ガイドラインに対してインスタンスは垂直だと上手く見えるよ。

4.「イージング」を使って加速を表現してみよう

f:id:AdobeAnimateFunya:20170624164211p:plain トゥイーンプロパティにある「イージング」の数値を「-100」にする。

f:id:AdobeAnimateFunya:20170624164205p:plain 最初はゆっくりと動き出し徐々に加速するアニメになるよ。

5.「イージング」を使って減速を表現してみよう

f:id:AdobeAnimateFunya:20170624164227p:plain トゥイーンプロパティにある「イージング」の数値を「100」にする。

f:id:AdobeAnimateFunya:20170624164217p:plain 早いスピードで動き出して徐々に減速するアニメになるよ。

イージングの数値を変えると速さが変わるからイメージ通りになるように調整しよう。