Expression Blend 2の新機能 イージング
もう2週間以上前になりますが、Expression Blend 2 September Previewがリリースされました。
これを受けて、多くのblogでBlend 2の新機能が取り上げられています。
Expression Blend 2 September Preview is now available! – Expression Blend and Design
http://blog.donburnett.com/2007/09/expression-blend-20-september-preview.html
http://designerslove.net/?p=99
特にアニメーション部分における新機能については、下記の公式ページにある「Video Feature Tour ― Animation」という動画をご覧いただくのが最もてっとり早いかと思います。音声は英語ですが、音声なしでも見ているだけで分かる内容です。
ここでは、この動画の中でも説明されているアニメーションのイージング設定部分を紹介しようと思います。
そもそもイージングとは何か？Flashの経験がある方にとっては知っていて当然の用語なのかもしれませんが、恥ずかしながら私は知りませんでした。イージングとは「アニメーション中の段階的な加速や減速のこと」だそうで、下記のAdobeのページを見ていただくと理解しやすいかと思います。
WPFのキーフレームアニメーションでは、アニメーションの補間方式（ある値から次の値へ遷移方法）としてスプライン補間をサポートしています（一部の型を除く）。
※WPFのキーフレームアニメーションについては下記のページを参照してください。
このスプライン補間は、2つの制御点によって描かれる3次ベジェ曲線が使われます。これによりアニメーションの加減速、つまりイージングを設定することができます。
具体的には、各Spline＜型名＞KeyFrameクラスに用意されているKeySplineプロパティを設定することで、スプライン補間を行うことができます。
Blend 2では、このスプライン補間における3次ベジェ曲線の2つの制御点をマウスを使って直観的に設定できるようになっています。KeyFrameを選択すると、右側の［プロパティパネル］部分が下記のように変化します。
既定の状態は線形補間（定率で値が変化）となっているため、上記のような直線になっています。これを下記のように変化させると、中間くらいまでは速く進み、後半はゆっくり進むようなアニメーションとなります。
言葉で説明しても分かりにくいかと思いますので、是非実際に試していただければと思います。
