かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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

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

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

  • StringAnimationUsingKeyFrame
  • DoubleAnimationUsingKeyFrame
  • BooleanAnimationUsingKeyFrame
  • ObjectAnimationUsingKeyFrame

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

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

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

<Storyboard x:Key="rectAnimation">
    <DoubleAnimationUsingKeyFrames
        Storyboard.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">
    <DoubleAnimationUsingKeyFrames
        Storyboard.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">
    <DoubleAnimation
        Storyboard.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

単純なアニメーション

アニメーションを作成するには、「オブジェクトとタイムライン」ウィンドウの+ボタンを押してStoryboardを新規作成します。

f:id:okazuki:20140831195347p:plain

+ボタンをクリックするとStoryboardの名前を付けるダイアログが出てくるので任意の名前を入力してください。そうすると、アニメーションを作成する画面になります。デザイナが赤枠で囲まれ、オブジェクトとタイムラインウィンドウが以下のような見た目になります。

f:id:okazuki:20140831195536p:plain

例として1秒後に画面に置いたRectangleを右に移動させる場合のアニメーションの作成方法を示します。まず、オブジェクトとタイムラインウィンドウのタイムラインで、1秒後を選択します。

f:id:okazuki:20140831195645p:plain

その状態で、デザイナ上でRectangleを右に移動させます。

f:id:okazuki:20140831195725p:plain

オブジェクトとタイムラインウィンドウでストーリーボード名の右にある×ボタンをクリックしてストーリーボードを閉じます。

f:id:okazuki:20140831195803p:plain

Storyboardの起動はトリガーウィンドウで設定されています。デフォルトではWindowのLoadedイベントに割り当てられています。画面にボタンを置いてButtonのClickなどに割り当てることでアニメーションの起動タイミングを変えることが出来ます。

f:id:okazuki:20140831195844p:plain

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

オブジェクトとタイムラインウィンドウで、キーフレームを設定したいアニメーション(この場合RectangleのXとY方向の移動)を選んで、キーフレームを記録するボタンを押すと、その時点でキーフレームが作成されます。

f:id:okazuki:20140831195933p:plain

キーフレームが作成されたら、そこから先の時間をタイムラインで指定してデザイナでオブジェクトを移動させたりプロパティを設定することで、次のキーフレームに対してアニメーションを設定できます。下記の例は、タイムラインで2秒を選択して、Rectangleを移動させた場合の表示結果です。

f:id:okazuki:20140831200027p:plain

この状態で起動すると、Rectangleがいったん右へ移動したあと、左下に移動するアニメーションが実行されます。

繰り返し設定

オブジェクトとタイムラインウィンドウで、左上のStoryboardを選択すると、プロパティウィンドウでAutoReverseプロパティとRepeatBehaviorを設定できるようになります。ここで、自動で繰り返すアニメーションや、永久的に実行されるアニメーションの設定などが出来ます。

イージング関数の設定

イージング関数の設定は、設定したいキーフレームや設定したいアニメーションを選択した状態で、プロパティウィンドウから行います。

f:id:okazuki:20140831200152p:plain

f:id:okazuki:20140831200316p:plain

過去記事