[Windows ストア アプリ] Storyboardでアニメーション(Storyboardの基礎)

今回はStoryboardによるアニメーションをやってみます。

Storyboardは、あるオブジェクトに対するアニメーション設定を入れる器になります。

たとえば、画面上にTextBlockがあるとします。

このボタンのサイズは5秒間かけてフォントサイズが10→200に変化する というようなアニメーションの設定をStoryBoardに入れておきます。

StoryboardのXAMLコードは以下のようになります。

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

XAML中のDoubleAnimation は Double型のプロパティをターゲットにすることを意味します。

StoryBoard.TargetNameには、アニメーション動作を設定したいコントロールのオブジェクト名称を設定します。ここでは txtMessage という名前のコントロールを対象にしています。

Storyboard.TargetPropertyは、アニメーション時に実際に動かす対象となるプロパティ名をセットします。ここでは、フォントサイズを変化させたいので”FontSize”を設定しています。

次のEnabledDependentAnimationは、UIスレッドでアニメーションを実行するよ、ということを認識させるためのものです。

さいごにFrom, Toですが、先ほど指定したプロパティに対する移動量を指定します。

フォントサイズを10→200に変更したいので、Fromに10、Toに200を設定しています。

最後にDurationですが、ここにはアニメーションの再生時間を設定します。
0:0:5とすると5秒間を意味し、先ほど設定したフォントサイズが5秒間かけて10→2ooに変化します。

上記で下準備は完了です。

後はアニメーションを実行するだけです。

アニメーションを実行するにはStoryboardのBeginメソッドを実行します。

ページロード時にアニメーションを実行するコードは以下のようになります。

C#の例

using Windows.UI.Xaml.Media.Animation;

public MainPage()
{
    this.InitializeComponent();

    // ストーリーボードのアニメーションを開始
    (this.Resources["Storyboard1"] as Storyboard).Begin();
}

VBの例

Imports Windows.UI.Xaml.Media.Animation

Public Sub New()

    ' この呼び出しはデザイナーで必要です。
    InitializeComponent()

    ' InitializeComponent() 呼び出しの後で初期化を追加します。
    TryCast(Me.Resources("Storyboard1"), Storyboard).Begin()
End Sub