MAKOTO3.NET Blog

PointAnimationは、座標のような2つの数値の組み合わせを変化させるとき便利なアニメーションです。次は、円形のグラデーションであるRadialGradientBrushのCenter属性の値を変化させ、グラデーションの中心点を動かしている例です。

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

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Ellipse Width="200" Height="200" Canvas.Left="50" Canvas.Top="50">
  <Ellipse.Fill>
    <RadialGradientBrush Center="0.25,0.25" x:Name="MyGrad" >
      <GradientStop Color="crimson" Offset="0.0"/>
      <GradientStop Color="yellow" Offset="0.5" />
      <GradientStop Color="navy" Offset="1.0" />
     </RadialGradientBrush>
  </Ellipse.Fill>

  <Ellipse.Triggers>
   <EventTrigger RoutedEvent="Ellipse.Loaded">
    <BeginStoryboard>
     <Storyboard>
      <PointAnimation
       Storyboard.TargetName="MyGrad"
       Storyboard.TargetProperty="Center"
       From="0.25,0.25" To="0.75,0.75" Duration="0:0:5"
       AutoReverse="True" RepeatBehavior="Forever"/>
     </Storyboard>
    </BeginStoryboard>
   </EventTrigger>
  </Ellipse.Triggers>

 </Ellipse>
</Canvas>

サンプルでは、<RadialGradientBrush>に"MyGrad"という名前を付けて、<PointAnimation>のStoryboard.TargetNameに指定しています。そして、TragetPropertyでCenterを指定し、Fromで"0.25,0.25"、Toで"0.75,0.75"と指定してあります。FromとToで一対の数値を指定するだけで、それ以外はDoubleAnimationと変わりないことが分かると思います。

JavaScriptでSilverlight 目次

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