今回は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
コメント