コントロールにアニメーションを追加する　その1(WP7)

| 2012年3月14日 | WindowsPhone7 | 2 Comments
Bookmark this on Hatena Bookmark

アプリケーションのUIにアニメーションを追加すると、
UIにリッチさやわかりやすさを与えることができます。
本エントリから複数回にわたって、WindowsPhone7においてアニメーションを利用する方法を
紹介していきます。
今回は第一回ということで、アニメーションを利用する基本について紹介していきます。

以下は今回紹介する内容のサンプルスクリーンショットの画像です。
今回作成するサンプルは、ボタン押下を機に色と数値を変更するアニメーションを取り扱っています。
下記画像の通り、青色部分が徐々に緑色に、画像サイズが徐々に細長くなっていきます。

それではつづきをどうぞ

アニメーションの基本

XAMLでアニメーションを指定する場合には、以下の３つの要素を作成する必要があります。
・Storyboard
・Animation
・アニメーションするオブジェクト

Storyboard

アニメーションはStoryboardを使用し管理します。
Storyboardタグの中に詳細なAnimationを用意することで、
一まとめに管理することができます。
StoryboardはResourcesタグの内部に書く必要があります。

Animation

アニメーションの詳細を作成する部分です。
WP7には3つのAnimation用クラスが用意されています。

[table “219” not found /]

DoubleAnimationは大きさの変化など、数値を変化させるアニメーションを行い、
PointAnimationは円などのジオメトリデータの持つ、Point型のプロパティを変化させ、
描画位置を移動させるなどのアニメーションを行うことができます。

Animationタグの中で、アニメーションを行うオブジェクトとプロパティを
指定します。

アニメーションするオブジェクト

アニメーションを指定するオブジェクトを従来どおりに作成します。

３つの構成要素をまとめると、以下のようなサンプルコードになります。

1
2
3
4
5
6
7
8
9
10
11
12
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <StackPanel.Resources>
        <Storyboard x:Name="アニメーション名">
            <ColorAnimation アニメーション詳細 />
        </Storyboard>
    </StackPanel.Resources>
 
    <!-- アニメーションするオブジェクト -->
    <StackPanel.Background>
        <SolidColorBrush x:Name="stackpanel_backcolor" Color="Red" />
    </StackPanel.Background>
</StackPanel>

ColorAnimationを作成する

それでは、実際にアニメーションを作成していきます。
上記で紹介した、3つのアニメーション用クラスには、
Storyboard.TargetName、Storyboard.TargetProperty、Durationを指定する必要があります。
その他、From/By/Toといった主要プロパティがあります。
プロパティの詳細は以下の表を参考にしてください。

[table “220” not found /]

以下に紹介するサンプルは、
StackPanelの背景を赤から緑にアニメーションするサンプルです。

1
2
3
4
5
6
7
8
9
10
11
12
13
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <StackPanel.Resources>
                <Storyboard x:Name="myAnimationBoard">
                    <ColorAnimation Storyboard.TargetName="stackpanel_backcolor"
                                    Storyboard.TargetProperty="Color"
                                    Duration="0:0:2" To="Green" />
                </Storyboard>
            </StackPanel.Resources>
             
            <StackPanel.Background>
                <SolidColorBrush x:Name="stackpanel_backcolor" Color="Blue" />
            </StackPanel.Background>
        </StackPanel>

2行目の通りに、StoryboardはResource要素の中に書き込む必要があります。
4,5,6行目でColorAnimationを作成しています。
11行目のSolidColorBrushオブジェクトをアニメーションのターゲットとする為に、
ColorAnimationのStoryboard.TargetNameプロパティにはSolidColorBrushのNameプロパティのstackpanel_backcolorを、
ColorAnimationのStoryboard.TargetPropertyにはSolidColorBrushのColorプロパティを指定しています。

Animationを実行する

AnimationはXAMLに記述するのみでは動作しません。
作成したStoryboardに対してStoryboardクラスのBeginメソッドを呼び出す必要があります。

また、Beginメソッド以外にもStoryboardで作成したアニメーションをコントロールする為の
メソッドが用意されています。

[table “221” not found /]

以下のサンプルコードは、Button押下時にアニメーションを開始するソースコードです。

1
2
3
4
private void button1_Click(object sender, RoutedEventArgs e)
{
    this.myAnimationBoard.Begin();
}

1行目のメソッドはStartボタンをタッチしたときに呼び出されるコールバックメソッドです。
3行目でアニメーションを開始するメソッドBeginを呼び出しています。
myAnimationBardは上部で紹介している、ColorAnimationを設定したStoryboardのNameプロパティ要素です。

サンプル紹介

サンプルアプリでは、ColorAnimationのほかにDoubleAnimationを利用して、
Image画像を縮めるアニメーションを作成しています。
DoubleAnimationもColorAnimationと同様に使用することができます。

以下に使用例として、サンプルアプリ全体のXAMLコードを引用します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
        <!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <StackPanel.Resources>
                <Storyboard x:Name="myAnimationBoard">
                    <ColorAnimation Storyboard.TargetName="stackpanel_backcolor"
                                    Storyboard.TargetProperty="Color"
                                    Duration="0:0:2" From="Blue" To="Green" />
                </Storyboard>
            </StackPanel.Resources>
             
            <StackPanel.Background>
                <SolidColorBrush x:Name="stackpanel_backcolor" Color="Blue" />
            </StackPanel.Background>
             
             
            <TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="AnimationSample" Foreground="Red" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
         
        <!--ContentPanel - 追加コンテンツをここに入力します-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.Resources>
                <Storyboard x:Name="AnimationForGrid">
                    <DoubleAnimation Storyboard.TargetName="image1" 
                                     Storyboard.TargetProperty="Height"
                                     Duration="0:0:5" From="200" By="0.5" To="50" />
                </Storyboard>
            </Grid.Resources>
            <Button Content="Start" Height="72" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
            <Image Height="150" HorizontalAlignment="Left" Margin="12,110,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/PhoneApp3;component/Images/tb.jpg" />
            <Button Content="Resume" Height="72" HorizontalAlignment="Left" Margin="144,0,0,0" Name="button2" VerticalAlignment="Top" Width="160" Click="button2_Click" />
            <Button Content="Pause" Height="72" HorizontalAlignment="Left" Margin="290,0,0,0" Name="button3" VerticalAlignment="Top" Width="160" Click="button3_Click" />
        </Grid>
    </Grid>

23行目～27行目にて、DoubleAnimationを使用しています。
サンプルでは、TargetPropertyにHeight(高さ)を指定することで、
どんどん小さくなっていくアニメーションを実現しています。

本エントリで紹介したアニメーションは、
一次関数としての直線的な変化しかもたせることができませんでした。
次回は、より複雑なアニメーションの利用方法を紹介したいと思います。

About The Author

UpDown-G

2 Comments