MAKOTO3.NET Blog

DoubleAnimationの最後の例として、グラデーションを変化させる例を紹介します。グラデーションの色の変化ポイントを指定する<GradientStop>タグのOffset属性の値を変化させて、グラデーションをアニメーション化しているサンプルです。

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

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Rectangle x:Name="MyRect"  Width="200" Height="200" Canvas.Left="50" Canvas.Top="50">
 <Rectangle.Fill>
   <LinearGradientBrush>
     <GradientStop Color="red" Offset="0.0"/>
     <GradientStop Color="yellow" Offset="0.5"  x:Name="MyStop1" />
     <GradientStop Color="blue" Offset="1.0" />
    </LinearGradientBrush>
 </Rectangle.Fill>
  <Rectangle.Triggers>
   <EventTrigger RoutedEvent="Rectangle.Loaded">
    <BeginStoryboard>
     <Storyboard>
      <DoubleAnimation
           Storyboard.TargetName="MyStop1"
           Storyboard.TargetProperty="Offset"
           From="0" To="1" Duration="0:0:3"
           AutoReverse="True" RepeatBehavior="Forever"/>
     </Storyboard>
    </BeginStoryboard>
   </EventTrigger>
  </Rectangle.Triggers>
 </Rectangle>
</Canvas>

ソースを見ると分かるように、<GradientStop>タグの1つに"MyStop1"という名前を付け、そのOffsetプロパティの値を0から1まで3秒かけて変化させ、反復＋無限の繰り返しを指定しています。

というわけで、DoubleAnimationを使えば、グラデーションを変化させることも可能です。では、座標のように2つの数値が必要な場合、たとえばRadialGradientBrushのCenter属性などを変化させるときは、どうすればよいでしょうか？ そこで利用するのがPointAnimationです。

次にPointAnimationの例をいくつか紹介します。

JavaScriptでSilverlight 目次

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