MAKOTO3.NET Blog

色のアニメーション専用に用意されているのがColorAnimationです。次は、四角形の塗りつぶしの色を赤から青へ変化させる例です。

http://www.makoto3.net/xaml/silverlight0084/index.html

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Rectangle Width="200" Height="200" Canvas.Left="50" Canvas.Top="50">
 <Rectangle.Fill>
   <SolidColorBrush Color="Red" x:Name="myBrush" />
 </Rectangle.Fill>
  <Rectangle.Triggers>
   <EventTrigger RoutedEvent="Rectangle.Loaded">
    <BeginStoryboard>
     <Storyboard>
       <ColorAnimation
       Storyboard.TargetName="myBrush"
       Storyboard.TargetProperty="Color"
       From="Red" To="Blue" Duration="0:0:2"
       AutoReverse="True" RepeatBehavior="Forever"/>
     </Storyboard>
    </BeginStoryboard>
   </EventTrigger>
  </Rectangle.Triggers>
 </Rectangle>
</Canvas>

SolidColorBrushに"MyBrush"という名前を付け、<ColorAnimation>で、この"MyBrush"の色を変化させています。FromとToで色名(16進数表記でも可)を指定している点が異なるだけで、それ以外はDoubleAnimationやPointAnimationと同じなのが分かると思います。

念のため書きますね。まず、Storyboard.TargetNameで"MyBrush"を指定し、アニメーションの対象とします。Storyboard.TargetPropertyで"Color"を指定し、変化させるプロパティを"Color"とします。そして、Fromで赤、Toで青、Durationで2秒を指定することで、2秒間かけて赤から青に変化させます。あとは、AutoReverse="True"で反復、RepeatBehavior="Forever"で無限の繰り返しを指定しています。

JavaScriptでSilverlight 目次

このページは xfy Blog Editor  を利用して作成されました。