Flash 開発者がこっそり教える Expression Blend™ Tips

キースプラインを使用したイージング調整

Blend 2 からは、2 次元表示されたスプライン曲線を使用し、イーズイン、イーズアウトそれぞれの制御点を操作することで、変化量を確かめながら直観的にイージングが調整できるようになっています。このイージングタブのグラフは、アニメーションを作成した際、タイムラインパネル上にオブジェクトの子要素として作成される各トランスフォームを選択することで、プロパティタブに表示されます。

Flash などのアニメーション ツールでイージング調整に苦労された方々も多いかと思いますが、今回は、この便利になったイージングを使って、ちょっと物理計算っぽく見えるような重力の動きをお手軽に作ってみようと思います。

等速運動

参考までに、普通の等速な直線運動です。イージングを何も設定しない状態では、下記のようなリニアな変化となります。使用する場面によっては、アニメーションとして物足りないと感じられる方も多いことでしょう。

等加速度運動、垂直落下運動

少し変化をつけたパターンです。垂直落下も等加速度運動の一種ですが、そもそも等加速度運動は一定の割合で速度が増加していくものです。つまり変化量が、最初は緩やかで後半に激しくなっていくような曲線を作ることで、等加速度運動らしい動きを設定することができます。実際の曲線としては下記のようになります。矩形や円オブジェクトの Y 方向への動きとして、下記のようなイージングを設定することで、オブジェクトが重力の影響を受けて垂直落下するような動きを付け加えることができます。

こんな動きも、コードビハインドを使用して数式で記述できる方にとっては容易かと思いますが、今回は何もコードを挟まずに設定しているのがポイントです。

跳ねまわるボール

では、上記の等加速度運動を使用して、画面内をボールが跳ねまわるような動きを作ってみましょう。
まず、ボールのように見える円オブジェクトをステージ左上に設置します。これに、垂直に跳ねる動きとして、前述の Y 方向への等加速度運動を付け加えます。次に、最後まで再生されたら逆転再生するように、このオブジェクトに AutoReverse="True" のプロパティを設定します （これは XAML に手書きするしかないようです）。また、ずっとはね続けるように、タイムライン上の Y 方向へのトランスフォームを右クリックし、リピート回数に Forever を設定します。これで、その場ではね続けるような動きが完成したと思います。F5 キーで書き出して確認してみましょう。

もしボールの跳ね方が不自然な場合は、スプライン調整とプレビューを繰り返してみてください。
ボールが自然に跳ねるようになったら、今度は横方向の移動を付け加えます。横方向は重力等の影響は受けないので、等速運動で構いません。X 方向へのトランスフォームとして、先ほどの Y 方向よりは長い時間で左端から右端へ移動する動きを作成し、同様に AutoReverse="True" とリピート回数に Forever を設定します。ここまでできたら書き出してみましょう。画面内をボールが跳ねながら、壁に当たると跳ね返るような動きになりましたでしょうか。

なお最後になりますが、実は Flash も Version 8 以降から同様に、スプライン曲線を使用したイージング調整が行えるようになっています （自分もたまにいじります）。あちらのほうが操作点を増やせるなど便利な部分もありますが、その反面、プロパティ値ごとに独立したスプラインを設定できないという難点もあります。
今回の後半では、X 座標と Y 座標とでぞれぞれ独立したスプラインでの動きを実現しましたが、こういったアニメーションの際には、Blend のイージングパネルおよびスプラインによるイージング調整が大いに役立つと思います。

オブジェクトのアニメーションをより実物っぽくすることは、人目を引く UX を作る際には大いに使える小ネタとなります。今回は基本的な動きのみのご紹介ですが、皆さんもぜひ Blend を使用して、色々と応用技を開発してみてください。