Expression Blend 2の新機能 頂点アニメーション

WPF Blend

2つ目としてご紹介するExpression Blend （以下Blend） 2の新機能は、「頂点アニメーション」です。この新機能も以前の投稿でご紹介した動画
「Video Feature Tour ― Animation」の中で説明されていますので、まずはそちらをご覧いただくと理解しやすいかと思います。


WPFではデータ バインディングやアニメーションを使ってPathの各頂点を変化させることができますが、Blend 1ではそれをサポートしていませんでした。通常Blendを使ってPathを記述した場合、下記のようなXAMLが生成されます。
XAML

<Path Data="M5,5 L70,5 L70,70 L5,70 z"/>
※実際にはその他のプロパティの記述もあります。


PathはDataプロパティにGeometryオブジェクトを設定することで、様々な図形を描画します。上記の記述ではStreamGeometryを使った記述となっており、これはデータバインディング、アニメーション、その他の変更をサポートしない代わりに軽量なものとなっています。


Pathの頂点をアニメーション（もしくは何らかの手法を用いて変更）させる場合には、StreamGeometryではなくPathGeometryとPathFigureコレクションを使った記述とする必要があります。上記のStreamGeometryと等価なPathGeometryによる記述は下記のようになります。
XAML
<Path>
    <Path.Data>
        <PathGeometry>
            <PathFigure IsClosed="True" StartPoint="5,5">
                <LineSegment Point="70,5"/>
                <LineSegment Point="70,70"/>
                <LineSegment Point="5,70"/>
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>


Blend 2では、Pathの頂点に対してアニメーションを設定しようとした段階で、自動的にStreamGeometryによる記述がPathGeometryによる記述に変換されるようになりました。そのため、頂点アニメーションの設定が可能になったようです。


StreamGeometryとPathGeometryの違いは下記のページが参考になります。

ジオメトリの概要 - パス ジオメトリ
パス マークアップ構文 - StreamGeometry および PathFigureCollection のミニ言語