キーフレームを指定する

キーフレームアニメーションを作成するには、次の手順に従います。

    <PointAnimationUsingKeyFrames

      Storyboard.TargetProperty="Center"

      Duration="0:0:8" ... >

      <LinearPointKeyFrame KeyTime="0:0:0" Value="0,20" />

      

      

      

      

    

PointAnimationUsingKeyFrames では、アニメーション（..Animation..）を起動すると、座標値（Point..）がキーフレームに従って（..UsingKeyFrames）時間とともに変化します。すると、その対象が移動したように見えます。
添付プロパティー .TargetProperty= には、変化させたい特性を指定します。ここでは、"Center" を指定したので、その中心座標が変化します。プロパティー Duration= には、所用時間を設定します。ここでは、"0:0:8" を指定したので、８秒ごとに同じ動きを繰り返します。
対象ごとにキーフレームを用意します。ここでは、LinearPointKeyFrame を利用したので、座標を線形補間します。そのため、連続する起点/終点（From/To）を指定したのと同じ効果が得られます。プロパティー Value= には、対象になる値（座標）を指定します。プロパティー KeyTime= には、その値に達する時刻を指定します。
５つのキーフレーム間を時間とともに遷移しながら、アニメーション（1〜6）を、次のように制御します。
1）アニメーションを開始すると、中心 Center の座標を 0,20 に設定します。
2）座標 0,20 から 35,20 まで線形補間して、アニメーション化します。1）を終了後 0:0:0 に開始して、2 秒間再生すると、0:0:2 には終了します。
3）座標 35,20 から 50,5 まで線形補間して、アニメーション化します。2）を終了後 0:0:2 に開始して、1 秒間再生すると、0:0:3 には終了します。
4）座標 50,5 から 65,20 まで線形補間して、アニメーション化します。3）を終了後 0:0:3 に開始して、1 秒間再生すると、0:0:4 には終了します。
5）座標 65,20 から 100,20 まで線形補間して、アニメーション化します。4）を終了後 0:0:4 に開始して、2 秒間再生すると、0:0:6 には終了します。
6）Duration に 0:0:8 を指定したので、5）を終了後 0:0:6 から、2 秒間、座標 100,20 に留まります。

4/4