atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その9:イージングをつかってみる。

イージングは物理演算を使った計算になるのかな?
アニメーションに緩急をつけたりすることができます。
Flash/FlexでいうTweenerですね。

まずは、Rectangleにアニメをつけて、左から右に動かしてみましょう。
こんなかんじですね。どこからどこまで移動するのか点線で表示されます。

再生すると、のそーーーっと四角形が動きます。
ちょっとつまんないですね。
そこでイージングの出番です。
後ろのキーフレームをクリックします。

すると、右のパネルが変わりました。
まっすぐな斜め線にNoneと書かれていますね。これがイージングです。

このNoneは、選択したキーフレームまでを等速で動かすということです。
クリックしていろいろ変えてみましょう。

例えばBounce Outを選択すると、Rectangleが壁にぶつかって跳ねるような動きをしますね。

さらに同じBounce Outでも下のパラメータを変えることで、動きが変化します。
パラメータを変えると、それに見合ったグラフに変化するので、だいたいイメージが掴めそうですね。


イージングを使って、自分のお気に入りのアニメーションや、心地良いアニメーションを作ってみてください。