今回からストアアプリでのアニメーションについて見ていきます。
まずは、アニメーションの基礎を学んでいきましょう。
今回は例として、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(); }
画像では伝えにくいのですが、実行するとフォントサイズが徐々に大きくなるアニメーションが実行されます。
コメント
[…] ← 前へ […]
[…] 前回の記事に少し修正を加えていきます。 […]