MAKOTO3.NET Blog

先に複数のアニメーションを組み合わせることができると書きましたが、ここでは変形と移動を組み合わせた例を紹介します。

具体的には、 DoubleAnimationの例1～位置を移動する で取り上げた 四角形が左右に移動するサンプル と、 DoubleAnimationの例3～変形をアニメーションさせる で取り上げた 四角形を回転させるサンプル を組み合わせたものです。

http://www.makoto3.net/xaml/silverlight0080/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.RenderTransform>
   <RotateTransform Angle="0" CenterX="25" CenterY="25" x:Name="MyTrans" />
  </Rectangle.RenderTransform>

  <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="MyTrans"
           Storyboard.TargetProperty="Angle"
           From="0" To="360" Duration="0:0:3"
           AutoReverse="True" RepeatBehavior="Forever"/>
     </Storyboard>
    </BeginStoryboard>
   </EventTrigger>
  </Rectangle.Triggers>
 </Rectangle>
</Canvas>

ページを読み込むと、赤い四角形が回転しながら左右に行ったり来たりします。ソース中の赤で示した箇所が左右の移動、青で示した箇所が回転に関係する記述です。それぞれ、 DoubleAnimationの例1～位置を移動する と DoubleAnimationの例3～変形をアニメーションさせる で説明した以上の内容は含まれていません。

このように、複数のDoubleAnimationを組み合わせることで、いろいろな動きを表現することが可能です。

JavaScriptでSilverlight 目次

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