2013年07月30日

WPFサンプル: AutoReverseとRepeatBehaviorでアニメーションを繰り返す

   このエントリーをはてなブックマークに追加 Clip to Evernote
今回は、DoubleAnimationのAutoReverseとRepeatBehaviorプロパティを使った例です。 この2つのプロパティで、アニメーションの繰り返しについて指定できます(後述)。

なお、「DoubleAnimationを使ったアニメーション」では、Button_Clickイベントハンドラで、アニメーションを開始させましたが、今度は、イベントトリガーを使い、アニメーションを開始します。
イベントトリガーを使いイベントとStoryboardを結びつけることで、C#のコードを書かなくても、アニメーションを開始することができます。

XAMLです。

<Window x:Class="AutoReverseSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="myStoryboard"  FillBehavior="HoldEnd">
            <DoubleAnimation
                    Storyboard.TargetName="image1"
                    Storyboard.TargetProperty="Opacity"
                    From="1" To="0" Duration="0:0:04"
                    AutoReverse="True" RepeatBehavior="2x" />
        </Storyboard>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="10,7,0,0"
                    Name="button1" VerticalAlignment="Top" Width="75"  >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource myStoryboard}}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>

        <Image Height="138" HorizontalAlignment="Left" Margin="8,37,0,0" Name="image1"
               Stretch="Fill" VerticalAlignment="Top" Width="180"
               Source="/Images/Desert.jpg" Opacity="1"/>
    </Grid>
</Window>

Button.Clickイベントで、Storyboardを呼び出すようにしています。
Clickイベント以外のイベントでもアニメーションを開始することができます。Loadedイベントを使えば、ウィンドウが開いたときにアニメーションを開始できます。

さて、本題のAutoReverse プロパティと、RepeatBehaviorプロパティですが、 AutoReverseをtrueとすることで、プロパティの値が、To の値まで変化した後に、今度は To値から Fromの値に変化します。
RepeatBehaviorは、再生回数または再生時間の合計を指定できます、ここでは、2x とすることで、2回繰り返してアニメーションを再生させています。Foreverを指定すると無限に繰り返します。
AutoReverseをfalse(規定値)の場合は、プロパティの値が、Toまで変化したら、再度、Fromの値に戻りアニメーションが繰り返されます。

この例では、Opacityプロパティの値を変化させています。

以下、実行時のスクリーンショットです。

AutoReverse1

AutoReverse2

AutoReverse3


WPFサンプル・目次


 

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

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