MAKOTO3.NET Blog

アニメーションは組み合わせることもできます。具体的には、<Storyboard>～</Storyboard>のあいだには、複数のアニメーションの指定を書くことができます。次は、 DoubleAnimationの例1～位置を移動する  で紹介した 四角形が左右に動くサンプル  に、別の動きを足したものです。具体的には、Canvas.TopとCanvas.Leftの値を同時に変化させて、ジグザグに移動させています。

http://www.makoto3.net/xaml/silverlight0078/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"/>
      <DoubleAnimation
           Storyboard.TargetName="MyRect"
           Storyboard.TargetProperty="(Canvas.Top)"
           From="125" To="150" Duration="0:0:0.3"
           AutoReverse="True" RepeatBehavior="Forever"/>
     </Storyboard>
    </BeginStoryboard>
   </EventTrigger>
  </Rectangle.Triggers>
 </Rectangle>
</Canvas>

ソースを見ると分かるように、<Storyboard>～</Storyboard>のあいだには、2つの<DoubleAnimation>タグで2つのアニメーションを指定しています。赤いアニメーションは、 DoubleAnimationの例1～位置を移動する  で紹介した 四角形が左右に動くサンプル  と同じで、青い部分が追加したアニメーションです。

Canvas.Topの値を125～150まで0.3秒で変化する動作を反復させ、それを無限に繰り返しています。Canvas.LeftとCanvas.Topを変化させる2つの動きが合成されて、四角形がジグザグに動いているように見えるわけです。

JavaScriptでSilverlight 目次

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