MAKOTO3.NET Blog

まずは、数値を変化させてアニメーションを実現するDoubleAnimationの例をいくつか紹介します。 アニメーションの基本 では 透明度を変化させるサンプル  を扱ったので、ここでは位置を変化させるDoubleAnimationのサンプルを紹介します。

http://www.makoto3.net/xaml/silverlight0077/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="50" Height="50" Fill="red" Canvas.Left="0" Canvas.Top="125">
  <Rectangle.Triggers>
   <EventTrigger RoutedEvent="Rectangle.Loaded">
    <BeginStoryboard>
     <Storyboard>
      <DoubleAnimation
           Storyboard.TargetName="MyRect"
           Storyboard.TargetProperty="(Canvas.Left)"
           From="0" To="250" Duration="0:0:3"
           AutoReverse="True" RepeatBehavior="Forever"/>
     </Storyboard>
    </BeginStoryboard>
   </EventTrigger>
  </Rectangle.Triggers>
 </Rectangle>
</Canvas>

ページを読み込むと、赤い四角形が左端から右端まで移動し、右端にぶつかると反対方向に移動して、この動作を繰り返します。

アニメーションの書き方は アニメーションの基本 で紹介したルール通りです。四角形のRectangleには"MyRec"という名前を付けていますので、DoubleAnimationのStoryboard.TargetNameには"MyRec"と指定し、アニメーションの対象として指定しています。

ちょっと注意したいのはStoryboard.TargetPropertyに"(Canvas.Left)"と指定してあることです。<Rectangle>タグでは、キャンバス左端からの距離をCanvas.Left属性で指定していますが、このようにピリオドで書く属性をTraget.Propertyに指定するときは、全体を括弧( )で囲む仕様となっています。

あとは、特に難しい指定はありません。From="0" To="250" Duration="0:0:3"なので、キャンバス左端からの距離が0から250ピクセルまで3秒間かけて変化し、AutoReverse="True" RepeatBehavior="Forever" と指定していますから、動作が反復されて、それが無限に繰り返されることになります。

JavaScriptでSilverlight 目次

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