Expression Blend 2の新機能 頂点アニメーション
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>
<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 のミニ言語