2013年08月01日

WPFサンプル:ColorAnimationを使い色を変化させる

   このエントリーをはてなブックマークに追加 Clip to Evernote
ColorAnimationは、Color型の値を 2 つのターゲット値の間で線形補間を使用してアニメーション化します。
Reectangleの色を変えるアニメーションを考えてみます。通常、Rectangleの色を指定するには、

<Rectangle Height="100" Stroke="Black" StrokeThickness="1" Width="200" Fill="LightCyan" />

などと Fillプロパティに色を表す文字列を指定しますが、実際のFillプロパティの型は、Color型ではなくBrush型ですので、以下のように書き換えます。

<Rectangle Height="100" Name="rectangle1" Width="200" >
    <Rectangle.Fill>
        <SolidColorBrush x:Name="myAnimatedBrush" Color="LightCyan" />
    </Rectangle.Fill>
</Rectangle>

SolidColorBrushに名前を付けありますので、これで、Colorプロパティをアニメーションで扱えるようになります。
XAMLは、以下のようになります。Storyboardタグで、ColorAnimationを指定しています。

<StackPanel x:Name="stackPanel1">
    <StackPanel.Resources>
        <Storyboard x:Key="myStoryboard" FillBehavior="HoldEnd">
            <ColorAnimation  Storyboard.TargetName="myAnimatedBrush"
                             Storyboard.TargetProperty="Color"
                             To="Blue" Duration="0:0:03" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle Height="100" Name="rectangle1" Width="200" >
        <Rectangle.Fill>
            <SolidColorBrush x:Name="myAnimatedBrush" Color="LightCyan" />
        </Rectangle.Fill>
    </Rectangle>
    <Button Width="80" Height="24" Content="Button" Click="Button_Click" />
</StackPanel>

From指定は省略していますので、LightCyanから、Blueへ色が変化することになります。

ColorAnimation1

ColorAnimation2

ColorAnimation3

今回は、C#側でアニメーションを開始させるようにしました。

private void Button_Click(object sender, RoutedEventArgs e) {
    (this.stackPanel1.Resources["myStoryboard"] as Storyboard).Begin();
}



実は、SolidColorBrushタグをRectangleに記述しなくても、StoryBoardのターゲットとすることができます。

<Rectangle Name="rectangle1" Height="100" Stroke="Black" StrokeThickness="1"
            Width="200" Fill="LightCyan" />

というRectangleに対し、以下のように TargetNameとTargetPropertyを記述することで、アニメーションの対象を指定可能です。

<StackPanel x:Name="stackPanel1">
    <StackPanel.Resources>
        <Storyboard x:Key="myStoryboard" FillBehavior="HoldEnd">
            <ColorAnimation 
                 Storyboard.TargetName="rectangle1"
                 Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                 To="Blue" Duration="0:0:03" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle Height="100" Name="rectangle1" Width="200" Fill="LightCyan" />
    <Button Width="80" Height="24" Content="Button" Click="Button_Click" />
</StackPanel>


WPFサンプル・目次


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52330886