WPF4.5入門 その48 「WPFのアニメーション その１」

WPFは、アニメーションを組み込みでサポートしています。WPFのアニメーションは、指定した依存関係プロパティを指定した時間内で、指定した変化量で、指定した範囲の値を変化させ続ける仕組みになります。単純なWPFのアニメーションの定義例を以下に示します。

<Storyboard x:Key="rectAnimation"><DoubleAnimationStoryboard.TargetName="rect"Storyboard.TargetProperty="(Canvas.Left)"To="300"Duration="0:0:5" /></Storyboard>

アニメーションは通常Storyboardというものに纏められます。Storyboardは通常Resourcesで定義されます。Storyboardの中にAnimation(は型名)という値のアニメーションをさせるタグを定義します。上記ではDouble型のアニメーションを行うDoubleAnimationを使用しています。Animationには、Storyboard.TargetName添付プロパティと、Storyboard.TargetProperty添付プロパティでターゲットとなるオブジェクトとプロパティを指定します。上記の例では、rectという名前で定義されたオブジェクトのCanvas.Left依存関係プロパティを指定しています。プロパティの指定がカッコで括られているのは、プロパティが添付プロパティであるためです。通常の依存関係プロパティの場合はカッコは必要ありません。

続けてToプロパティで、アニメーションが最終的にいくつく値を設定します。今回の例では省略していますがFromを指定することで、どこの値を開始とするか指定することもできます。省略した場合は、現在の値が使われます。最後にDurationで、アニメーションにかかる時間を指定します。書式は時:分:秒です。上記の例では、5秒を指定しています。今回のアニメーションの定義は、rectという名前のオブジェクトのCanvas.Leftプロパティを5秒間かけて300という値に変更するという意味になります。

アニメーションは定義しただけでは起動しません。アニメーションを開始する方法はいくつかありますが、ここでは、単純なEventTriggerを使う方法を紹介します。EventTriggerは名前の通り、コントロールのTriggersプロパティに指定できるルーティングイベントをきっかけにアニメーションを開始するためのクラスです。以下のように定義して使います。

<Button Canvas.Top="10"Canvas.Left="10"Content="Animation start"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard Storyboard="{StaticResource rectAnimation}" /></EventTrigger></Button.Triggers></Button>

上記の例ではButtonのClickイベントをきっかけにrectAnimationを開始するように定義しています。

このサンプルの全体のXAMLを以下に示します。

<Window x:Class="AnimationSample01.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="rectAnimation"><DoubleAnimationStoryboard.TargetName="rect"Storyboard.TargetProperty="(Canvas.Left)"To="300"Duration="0:0:5" /></Storyboard></Window.Resources><Canvas><Button Canvas.Top="10"Canvas.Left="10"Content="Animation start"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard Storyboard="{StaticResource rectAnimation}" /></EventTrigger></Button.Triggers></Button><!-- アニメーションのターゲット --><Rectanglex:Name="rect"Canvas.Top="50"Canvas.Left="10"Width="50"Height="50"Fill="Red"/></Canvas></Window>

実行結果を以下に示します。起動直後は以下のような配置になっています。

ボタンをクリックすると矩形が右に移動を始めます。

5秒たつと矩形の移動が終わります。

Byによる値の指定方法

アニメーションの値の指定方法で一番単純なのは、FromとToを指定する方法です。アニメーションの指定方法にはFromとTo以外に、FromとByを使う方法があります。この方法はFrom（省略可能）を基準として、Byだけ変化させるということになります。初期値が10でByに20を指定した場合、アニメーションが終わった時の値は30になります。以下にByを使ったアニメーションの定義例を示します。

<Storyboard x:Key="rectAnimationBy"><DoubleAnimationStoryboard.TargetName="rect"Storyboard.TargetProperty="(Canvas.Left)"By="100"Duration="0:0:5" /></Storyboard>

上記の例は、5秒かけて100だけCanvas.Leftがアニメーションします。

アニメーションの繰り返しの指定

デフォルトでは、アニメーションは1度終了すると再度手動で実行するまで停止しています。アニメーションに繰り返しを指定すると、指定した回数、指定した方法でアニメーションを繰り返させることが出来ます。

AutoReverseプロパティを指定すると、アニメーションが終了したあと、逆方向のアニメーションを再生するか指定できます。サンプルで示した矩形が右に移動するアニメーションに指定すると、右に移動が完了したあと元の位置に向かって左方向にアニメーションするようになります。

また、RepeatBehaviorにアニメーションを繰り返す時間を指定できます。ここで指定した時間だけ、アニメーションを再生し続けることが出来ます。AutoReverseと組み合わせることで、行ったり来たりというアニメーションを実行させることも出来ます。色に対して指定すると点滅させるという効果も持たせることが出来ます。TimeSpan型なのでDurationプロパティと同様に時:分:秒の書式で指定しますが、Foreverを指定することで無限にアニメーションを再生し続けることが出来ます。 以下にアニメーションの繰り返しの指定例を示します。

<Storyboard x:Key="rectAnimationRepeat"><DoubleAnimationStoryboard.TargetName="rect"Storyboard.TargetProperty="(Canvas.Left)"To="300"Duration="0:0:5"RepeatBehavior="0:0:13"AutoReverse="True"/></Storyboard>

この例ではアニメーションが13秒間繰り返しを続けます。

その他の型のアニメーション

ここまではDoubleAnimationを例にアニメーションを説明してきました。WPFのアニメーションにはDouble型以外の型もサポートしています。以下に主なものを示します。

• ColorAnimation：SolidColorBrushなどの色をアニメーションします。
• PointAnimation：Point型をアニメーションします。

コードからのアニメーション

WPFのアニメーションはコードで組み立てたり、実行することが出来ます。最初に示した矩形のアニメーションを行う例をC#で書いたものを以下に示します。

var storyboard = new Storyboard();

var a = new DoubleAnimation();
// TargetName添付プロパティではなく、Target添付プロパティで// 直接アニメーションのターゲットを指定しています。
Storyboard.SetTarget(a, rect);
Storyboard.SetTargetProperty(a, new PropertyPath("(Canvas.Left)"));
a.To = 300;
a.Duration = TimeSpan.FromSeconds(5);
storyboard.Children.Add(a);

// アニメーションを開始します
storyboard.Begin();

コードでアニメーションを組むことで、計算に基づいた複雑なアニメーションを組み立てることが出来ます。

過去記事

• WPF4.5入門 その1 「はじめに」
• WPF4.5入門 その2 「WPFとは」
• WPF4.5入門 その3 「Hello world」
• WPF4.5入門 その4 「Mainメソッドはどこにいった？」
• WPF4.5入門 その5 「全てC#でHello world」
• WPF4.5入門 その6 「WPFを構成するものを考えてみる」
• WPF4.5入門 その7 「XAMLのオブジェクト要素と名前空間」
• WPF4.5入門 その8 「オブジェクト要素のプロパティ」
• WPF4.5入門 その9 「コレクション構文」
• WPF4.5入門 その10 「コンテンツ構文」
• WPF4.5入門 その11 「マークアップ拡張」
• WPF4.5入門 その12 「その他のXAMLの機能」
• WPF4.5入門 その13 「簡単なレイアウトを行うコントロール」
• WPF4.5入門 その14 「レイアウトコントロールのCanvasとStackPanel」
• WPF4.5入門 その15 「レイアウトコントロールのDockPanelとWrapPanel」
• WPF4.5入門 その16 「ViewBoxコントロール」
• WPF4.5入門 その17 「ScrollViewerコントロール」
• WPF4.5入門 その18 「Gridコントロール part 1」
• WPF4.5入門 その19 「Gridコントロール part 2」
• WPF4.5入門 その20 「レイアウトに影響を与えるプロパティ」
• WPF4.5入門 その21 「WPFのコンセプトと重要な機能つまみ食い」
• WPF4.5入門 その22 「Buttonコントロール」
• WPF4.5入門 その23 「DataGridコントロール その1」
• WPF4.5入門 その24 「DataGridコントロール その2」
• WPF4.5入門 その25 「TreeViewコントロール その1」
• WPF4.5入門 その26 「TreeViewコントロール その2」
• WPF4.5入門 その28 「Calendarコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その29 「ContextMenuコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その30「Menuコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その31 「ToolBarコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その32 「CheckBoxコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その33 「ComboBoxコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その34 「ListBoxコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その35 「RadioButtonコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その36 「Sliderコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その37 「TabControl」 - かずきのBlog@hatena
• WPF4.5入門 その38 「ファイルダイアログ」 - かずきのBlog@hatena
• WPF4.5入門 その39 「情報を表示するコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その40 「Popup、ToolTip、TextBox、Image、MediaElementコントロール」 - かずきのBlog@hatena
• WPF4.5入門 その41 「DispatcherObject」 - かずきのBlog@hatena
• WPF4.5入門 その42 「WPFのプロパティシステム」 - かずきのBlog@hatena
• WPF4.5入門 その43 「読み取り専用の依存関係プロパティ」 - かずきのBlog@hatena
• 拡張されたプロパティメタデータ - かずきのBlog@hatena
• WPF4.5入門 その45 「添付プロパティ」 - かずきのBlog@hatena
• WPF4.5入門 その46 「WPFのイベントシステム」 - かずきのBlog@hatena
• WPF4.5入門 その47 「コンテンツモデル」 - かずきのBlog@hatena