2013年08月06日

WPFサンプル:2つのAnimationを同時に動かす

   このエントリーをはてなブックマークに追加 Clip to Evernote
前回に引き続き、ColorAnimationのサンプルです。
今度は、グラデーションを変化させています。
初期状態では、TextBlockで表示される文字列にMediumBlueからLightSkyBlueへのグラデーション効果を適用しています。
この文字列の色を Crimson 一色に変化させる例です。

XAMLです。

<Window x:Class="ColorAnimationSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="118" Width="450">
    <Window.Resources>
        <Storyboard x:Key="myStoryboard" FillBehavior="HoldEnd">
            <ColorAnimation Storyboard.TargetName="startColor"
                            Storyboard.TargetProperty="Color"
                            From="MediumBlue" To="Crimson" Duration="0:0:00.5" />
            <ColorAnimation Storyboard.TargetName="stopColor"
                            Storyboard.TargetProperty="Color"
                            From="LightSkyBlue" To="Crimson" Duration="0:0:01.5" />
        </Storyboard>
    </Window.Resources>
    <StackPanel Orientation="Vertical">
        <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="10"
                Name="button1" VerticalAlignment="Top" Width="75">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource myStoryboard}}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <TextBlock HorizontalAlignment="Left"  Name="textBlock1"
                   Text="Microsoft .NET Framework" VerticalAlignment="Top"
                   FontSize="30" FontWeight="ExtraBlack" FontFamily="SketchFlow Print">
            <TextBlock.Foreground>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="MediumBlue" Offset="0.0" x:Name="startColor"/>
                    <GradientStop Color="LightSkyBlue" Offset="0.8" x:Name="stopColor"/>
                </LinearGradientBrush>
            </TextBlock.Foreground>
        </TextBlock>
    </StackPanel>
</Window>


Storyboardの子要素として、2つのColorAnimationを定義している点に注目です。
WPFでは、このようにすると、複数のアニメーションを同時に動かすことができます。
一つ目のColorAnimationでは、グラデーションの開始点の色を変化させ、2つ目のColorAnimationでは、グラデーションの終了点の色を変化させています。

ColorAnimation4

ColorAnimation5

ColorAnimation6


イベントトリガーを使い、アニメーションを起動させていますので、C#側では何も記述していません。



WPFサンプル・目次


 

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

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