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

キーフレームアニメーション

これまで説明した型名Animationで指定するアニメーションの他に、WPFでは、キーフレームアニメーションと呼ばれるアニメーションを定義するための型があります。<型名>AnimationUsingKeyFrameという名前で定義されています。サポートされている主な型を以下に示します。

StringAnimationUsingKeyFrame
DoubleAnimationUsingKeyFrame
BooleanAnimationUsingKeyFrame
ObjectAnimationUsingKeyFrame

完全なリストについては以下のページを参照してください。

キーフレームアニメーションの概要

キーフレームアニメーションの特徴は、1つのアニメーションの中にKeyFrameという複数のアニメーションのフレームを定義できる点です。1つのフレームごとにアニメーションの値と時間を指定できるため、1つのキーフレームアニメーションで、複雑なアニメーションを定義することが出来ます。

以下にキーフレームアニメーションを使ったコード例を示します。

<Storyboard x:Key="rectAnimation"><DoubleAnimationUsingKeyFramesStoryboard.TargetName="rect"Storyboard.TargetProperty="(Canvas.Left)"Duration="0:0:10"><LinearDoubleKeyFrame KeyTime="0:0:2"Value="300" /><LinearDoubleKeyFrame KeyTime="0:0:4"Value="0" /><LinearDoubleKeyFrame KeyTime="0:0:6"Value="200" /><LinearDoubleKeyFrame KeyTime="0:0:8"Value="100" /><LinearDoubleKeyFrame KeyTime="0:0:10"Value="300" /></DoubleAnimationUsingKeyFrames></Storyboard>

キーフレームアニメーションもこれまでやってきたアニメーションと同様にStoryboardの中に定義します。そして、Storyboard.TargetName添付プロパティ、Storyboard.TargetProperty添付プロパティでアニメーションのターゲットを指定します。そして、Durationでアニメーションの時間を指定します。普通のAnimationクラスでは、From/To/Byを指定していましたが、キーフレームアニメーションでは、KeyFrameをアニメーション内に指定します。今回の例ではLinearDoubleKeyFrameを指定しています。KeyFrameにはKeyTimeで、このKeyFrameのDuration内での時間と、その時の値を指定します。LinearDoubleKeyFrameは、値の間を線形補間します。

上記のアニメーションでは、2秒かけて初期位置から300へ移動して、その後2秒かけて0へ移動して、その後2秒かけて200へ移動して、その後2秒かけて100へ移動して、最後に2秒かけて300へ移動します。

LinearDoubleKeyFrame以外に、DiscreteDoubleKeyFrameというKeyFrameを指定することで、間が補間されずに、指定した時間に指定した値に切り替わるという効果を設定できます。

<Storyboard x:Key="rectAnimation2"><DoubleAnimationUsingKeyFramesStoryboard.TargetName="rect"Storyboard.TargetProperty="(Canvas.Left)"Duration="0:0:10"><DiscreteDoubleKeyFrame KeyTime="0:0:2"Value="300" /><DiscreteDoubleKeyFrame KeyTime="0:0:4"Value="0" /><DiscreteDoubleKeyFrame KeyTime="0:0:6"Value="200" /><DiscreteDoubleKeyFrame KeyTime="0:0:8"Value="100" /><DiscreteDoubleKeyFrame KeyTime="0:0:10"Value="300" /></DoubleAnimationUsingKeyFrames></Storyboard>

この、Discrete型名KeyFrameを使うことで、間を補間することができないStringやBooleanなどといった値に対してもアニメーションを設定することが出来ます。

イージング関数

WPFのアニメーションには、アニメーションの変化量に数式を適用して特殊な効果を与える機能があります。以下に適用可能な効果の一覧をMSDNから抜粋して紹介します。

BoundEase：弾むようなバウンド効果を作成します。
CircleEase：円関数を使って加速と減速のアニメーションを作成します。
ElasticEase：バネが伸び縮みしながら最終的に停止するアニメーションを作成します。
SineEase：サイン式を使って加速と減速のアニメーションを作成します。

完全なリストはMSDNの以下のページを参照してください。

イージング関数

イージング関数を指定するにはAnimationクラスのEasingFunctionに指定します。KeyFrameの場合は、KeyFrameのEasingFunctionに指定します。DoubleAnimationクラスにBoundEaseを指定した例を以下に示します。

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

上記のアニメーションは、5秒間で300に向けてバウンドするようにアニメーションします。

Blendによるアニメーションの作成

XAMLを使用してアニメーションを作成することは出来ますが、複雑なアニメーションになってくると手書きによるアニメーションは現実的ではなくなってきます。WPFには、Blend for Visual Studioというデザイナ向けのツールがあります。このツールには、Visual Studioにない機能として、アニメーションの作成機能があります。ここでは、簡単にアニメーションの作成機能について紹介します。

以下のように画面にRectangleを1つ置いた状態を前提として操作説明を行います。

f:id:okazuki:20140831195243p:plain