[Windows ストア アプリ] Storyboardでアニメーション(DoubleAnimationのToプロパティとByプロパティ)

前回の記事でStoryboardの基本的な使い方を説明しました。

今回はDoubleAnimationのToとByプロパティについてです。

DoubleAnimationではFromにアニメーションの開始時の値、Toにアニメーション終了時の値を指定することは、前回説明した通りです。

現在値からアニメーションを開始したい

Fromを設定すると、アニメーションは必ずその値から開始を行います。このため、現在値からと大きくかけ離れた値でアニメーションが開始されてしまう場合があります。

もし、現在値からアニメーションを開始したい場合には、単純にFromを取り除けばOKです。

前回のコードでFromを削除すると以下のようになります。

<Page.Resources>
	<Storyboard x:Name="Storyboard1">
        <DoubleAnimation Storyboard.TargetName="txtMessage"
                         Storyboard.TargetProperty="FontSize"
                         EnableDependentAnimation="True"
                         To="200" Duration="0:0:5" />
	</Storyboard>
</Page.Resources>

上記のように記述すると、フォントサイズは現在表示されているサイズから200になるようにアニメーションが行われます。

アニメーションを行うたびに現在値を使うには

アニメーションの開始時に現在値を使う方法がわかりました。

しかし、Toを指定すると、今度はアニメーション終了時のサイズが固定となってしまいます。

これでは次回アニメーションを開始するときに、前回終了時の値から開始することができません。

このような場合には、FromプロパティとToプロパティを使用せずにByプロパティを使用します。

Byプロパティにはアニメーションの再生時間に変化する量を指定します。

たとえば、5秒間の間で20だけ変化させたい場合、XAMLは以下のようになります。

<Page.Resources>
	<Storyboard x:Name="Storyboard1">
        <DoubleAnimation Storyboard.TargetName="txtMessage"
                         Storyboard.TargetProperty="FontSize"
                         EnableDependentAnimation="True"
                         By="20" Duration="0:0:5" />
	</Storyboard>
</Page.Resources>

仮に、スタート時のフォントサイズが10だったとしましょう。

アニメーションが開始されると5秒間かけて20増加するので、終了時にはフォントサイズが30になります。

次回アニメーションを行うと、前回終了した値である30から20増加して、アニメーション終了時には50になるというわけです。

ここまでのまとめ

目的 プロパティ
アニメーション開始時の値を指定したい場合 From
アニメーション終了時の値を指定したい場合 To
アニメーションごとに値を変化させたい場合 By
カテゴリーC#

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です