DoubleAnimationの例3～変形をアニメーションさせる
変形の数値を変化させてアニメーションさせることもできます。次は、四角形を回転させるサンプルです。
http://www.makoto3.net/xaml/silverlight0079/index.html
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle Width="50" Height="50" Fill="red" Canvas.Left="125" Canvas.Top="125">
<Rectangle.RenderTransform>
<RotateTransform Angle="0" CenterX="25" CenterY="25"
x:Name="MyTrans"
/>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyTrans"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:3"
AutoReverse="True" RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
変形の指定は、<Rectangle.RenderTransform>～<Rectangle.RenderTransform>のあいだにある<RotateTransform>です。四角形は幅と高さが50ピクセルですから、CenterX属性とCenterY属性で25を指定してあるため、回転の中心点が四角形の中心ということになります（CenterXとCenterYを指定しなければ回転の中心は四角形の左上です）。
ポイントは、この<RotateTransform>にx:Nameで"MyTrans"という名前を付けていることです。これにより、<DoubleAnimation Storyboard.TargetName="MyTrans" ……>として、<RotateTransform>をアニメーションの対象にすることができます。あとは、変化させる属性（プロパティ）としてAngleを指定し、0から360まで3秒で変化させ、反復させて、この動作を無限に繰り返します。
このように、変形をアニメーションさせるときは、変形させる図形ではなく、図形の子要素として指定されている変形方法をターゲットとして指定し、その属性を変化させます。「オブジェクト」という言葉を使うなら、Silverlightでは変形方法（この例ではRotateTransform）も「オブジェクト」として扱われる、ということになるわけです。
このページは
xfy Blog Editor
を利用して作成されました。
コメント