個人的な意見なんですがスクリプトベースとタイムラインベースのアニメーションどちらかを選択するとすれば、自分はタイムラインベースを選択すると思います。

タイムラインベースの良さといえばまず直感的に動きをとらえることができ、細かい調整が効くというのが魅力です。

修正などが大変というデメリットもありますが、ケースバイケースで使用すると表現力のアップに繋がります。

そこで今回はタイムラインでの物理系アニメーションを制作してみました。

ステージにオブジェクトを配置して<図1>のようなタイムラインをひきます。

<図1>

timeline

次にタイムライン上のモーショントゥイーンの各アンカーポイントを選択して<図2>のようにイージングの数値を100あたりにします。

<図2>

custom

<図2>の設定し終わったあとに『編集...』ボタンを押して<図3>のようなラインを各アンカーポイントごとに画きましょう。

<図3>

easing

そしてタイムラインの長さを微調整してあげると<図4>のような動きをつけることが出来ます。

<図4>

また今回紹介した方法に少し手を加えてあげることで、このようなボールが弾むアニメーションも作成することが出来ます。

<図5>

是非イージング編集を多様してタイムラインベースのアニメーションなども作成してみるのもいいと思いますよ!

HTML5飯