MAKOTO3.NET Blog

<Storyboard>～</Storyboard>内にColorAnimationを複数記述することで、複数のオブジェクトの色を同時に変化させることもできます。次は、グラデーションの色を変化させるサンプルです。

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

【myxaml.xaml】

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

グラデーションは<LinearGradientBrush>を使い、色の変化点を指定する<GradientStop>にそれぞれx:Nameで名前を付け、アニメーションさせています。

色で分けているのが、対応する指定です。たとえば、赤で示した<GradientStop>は赤から青に1秒間かけて変化し、反復し、動作を無限に繰り返します。青と緑で示した箇所も、FromとToで指定してある色名、およびDurationの値が異なるだけで、書き方はまったく同じです。

JavaScriptでSilverlight 目次

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