[ストアアプリ][入門] Step42. アニメーション1 ～アニメーションの基礎～

Windows ストアアプリ

2015.01.27

今回からストアアプリでのアニメーションについて見ていきます。

まずは、アニメーションの基礎を学んでいきましょう。

今回は例として、TextBlockコントロールのフォントサイズを徐々に大きくするアニメーションを作成してみます。

ストアアプリでアニメーションを行うには、主にXAMLで記述します（コードで書くことも可能ですが、かなり大変です）。

アニメーションはStoryBoard要素と、DoubleAnimation要素を使用して作成します。これらの要素はPageのResourceとして作成します。

XAMLの例

<Page
    x:Class="Step23.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Step23"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Loaded="Page_Loaded">

    <Page.Resources>
        <Storyboard x:Key="storyBoard">
            <DoubleAnimation Storyboard.TargetName="txbFont"
                             Storyboard.TargetProperty="FontSize"
                             EnableDependentAnimation="True"
                             From="10" To="50" />
        </Storyboard>
    </Page.Resources>
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="txbFont" HorizontalAlignment="Left" Margin="120,85,0,0" 
                   TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
        <Button Content="Button" HorizontalAlignment="Left" Margin="117,116,0,0" VerticalAlignment="Top" Click="Button_Click"/>
    </Grid>
</Page>

まずDoubleAnimation要素ですが、これは変化量（この例ではフォントサイズ）がDouble型のプロパティをターゲットとするものです。

よって必ずしもDoubleAnimation要素かというと、そうではないため注意が必要です。

DoubleAnimation要素内のStoryboard.TargetNameは、アニメーションを行うターゲットを指定します。txbFontと名前を付けたTextBlockコントロールをターゲットにしています。

DoubleAnimation要素内のStoryboard.TargetPropertyは、実際にアニメーションとして変化させるプロパティを指定します。ここではtxbFontのFontSizeプロパティをターゲットに設定しています。

次にEnableDependantAnimation属性ですが、アニメーションをUIスレッドで実行するということを示します。Trueにしておきます。

最後のFromとToは、アニメーションをするときの変化開始量と変化終了量を指定します。この値は、先ほど説明したStoryboard.TargetPropertyで指定したプロパティに適用されます。よってFontSizeがFrom～Toの間で変化します。

アニメーションを実行する

最後にボタンをクリックしたときにアニメーションが実行されるようにしてみましょう。

これにはStoryBoardのBeginメソッドを実行します。

VBの例

Imports Windows.UI.Xaml.Media.Animation

Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
    DirectCast(Me.Resources("storyBoard"), Storyboard).Begin()
End Sub

C#の例

using Windows.UI.Xaml.Media.Animation;

private void Button_Click(object sender, RoutedEventArgs e)
{
    (this.Resources["storyBoard"] as Storyboard).Begin();
}

画像では伝えにくいのですが、実行するとフォントサイズが徐々に大きくなるアニメーションが実行されます。