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