メモ帳ブログ @ wiki

アニメーション

最終更新：2011年05月31日 14:58

nina_a

- view

管理者のみ編集可

アニメーション

このページを編集

概要

WPFでは，マージンなどの見た目に関わるプロパティの値を順次変化させることでアニメーションを実現する．

XxxAnimationクラス

WPFには時間の経過に応じて値を変化させるXxxAnimationクラスが用意されている．Xxxには変化させる値のタイプが入り，double型を変化させる場合にはDoubleAnimationクラスを利用する．

DoubleAnimationサンプル

主な依存プロパティ

From	アニメーションの開始値．指定しない場合は現在の値．
To	アニメーションの終了値．指定しない場合は既定の（オリジナルの）値．
By	アニメーションの変量．From+By=To．ToとByの両方が指定された場合はToが優先．
Duration	アニメーションの時間．Duration.Foreverで永遠に続く（無限大の時間の）アニメーション．Foreverを指定すると，無限大の時間をかけてFromからTo，Byまでアニメーションするため，変化しているように見えない．無限回続くアニメーションの意味ならばRepeatBehaviorにRepeatBehavior.Foreverをセットする．

主なプロパティ

AccelerationRatio	Dulationの内，加速に使う時間の割合．DecelerationRatioとの和が1を超えてはいけない．
AutoReverse	trueなら，アニメーション終了後，逆再生する
FillBehavior	アニメーション終了時の動作指定．既定は保留（アニメーション終了時の値を維持）．Stopを指定すると終了（アニメーション終了時の値を破棄）する．
DecelerationRatio	Dulationの内，減速に使う時間の割合．AccelerationRatioとの和が1を超えてはいけない．
RepeatBehavior	アニメーションの繰り返し動作指定．既定は1回実行．回数や実行時間で指定．
SpeedRatio	アニメーションの速度．5を指定すれば5倍の早さ．

ストーリーボード（Storyboard）

アニメーションの対象（TargetNameとTargetProperty）をStoryboardで指定する．複数XxxAnimationを記述すれば，それらを同時実行できる．

Storyboardサンプル

この例ではTargetPropertyを各アニメーションごとに指定しており，TargetNameは指定していない．

アニメーションを制御する

止めたり，リスタートしたり．それぞれのボタンのトリガーでPauseStoryBoardとかやってもBeginStoryBoardが見つからないので止まらない．なのでその親要素のStackPanelでまとめて記述．他の操作は MSDN 参照．再生速度とかもっと細かい制御はXAMLでは無理．

アニメーション制御サンプル

<Window x:Class="WpfSampleApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="400" Width="500">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
 
        <Button Width="200" Height="100" Name="dest" Grid.Row="0">
            アニメーションテスト
        </Button>
        <StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Center">
            <Button Width="100" Margin="5" Content="開始" Name="start" />
            <Button Width="100" Margin="5" Content="停止" Name="pause" />
            <Button Width="100" Margin="5" Content="再開" Name="resume" />
            <Button Width="100" Margin="5" Content="終了" Name="stop" />
 
            <StackPanel.Triggers>
                <EventTrigger RoutedEvent="Button.Click" SourceName="start">
                    <BeginStoryboard x:Name="animation">
                        <Storyboard Storyboard.TargetName="dest">
                            <DoubleAnimation To="300" Storyboard.TargetProperty="(Button.Width)" FillBehavior="Stop"  Duration="0:0:15"/>
                            <DoubleAnimation To="300" Storyboard.TargetProperty="(Button.Height)" FillBehavior="Stop"  Duration="0:0:15"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.Click" SourceName="pause">
                    <PauseStoryboard BeginStoryboardName="animation"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.Click" SourceName="resume">
                    <ResumeStoryboard BeginStoryboardName="animation"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.Click" SourceName="stop">
                    <StopStoryboard BeginStoryboardName="animation"/>
                </EventTrigger>
            </StackPanel.Triggers>
        </StackPanel>
    </Grid>
</Window>

イージング（Easing）

イージングを使うと値の変化の仕方を変えることができる．全てのEasingFunctionについては MSDN 参照．

イージング関数にPowerEaseを指定するサンプル

すべてのEasingFunctionはEasingModeというプロパティを持っている．

EaseIn	アニメーション開始付近でイージングする
EaseOut	アニメーション終了付近でイージングする
EaseInOut	アニメーション開始と終了付近の両方でイージングする

キーフレーム指定によるアニメーション

XxxAnimationの変わりにXxxAnimationUsingKeyFrameを使うと，指定の時刻（キーフレーム）における値を指定することでアニメーションを実現できる．

キーフレーム指定によるアニメーション

キーフレームを指定するときにはYyyXxxKeyFrameを使う．Yyyにはそのキーフレームまでの値の変化の仕方が入り，Linear（直線），Discrete（不連続），Spline（スプライン），Easing（指定のイージング関数）の4種類．
このサンプルでは，1秒経過まで直線的に300まで変化し，2秒経過した瞬間に200に変化，3秒経過までスプライン曲線を描いて100まで変化，その後EasingFunctionに指定されたBounceEaseを使って300まで変化する．

カテゴリ：WPF