複数の XAML オブジェクトへのストーリーボード アニメーションの適用

Applies to Windows and Windows Phone

ここでは、複数のストーリーボード アニメーションを作る代わりに同じストーリーボードを複数のオブジェクトに適用する方法について説明します。

アプリのこの XAML ページでは、キーパッドの画像のグリッドを表示しています。ユーザーがこれらのボタンの 1 つをタップしたときに、ボタンが動くアニメーションを表示するとします。

複数のボタンを含む XAML ファイル。ボタンごとにストーリーボード アニメーションを作りたいと思いますか。

ボタンのスキン適用とアニメーション化」で説明したように、アニメーション ブロック内で時間の経過に合わせて不透明度などのパラメーターを変える iOS とは異なり、Windows 8 では、ストーリーボード オブジェクトを使います。 たとえば、このボタンのグリッドのように複数の類似の XAML オブジェクトを画面に表示する場合、オブジェクトごとに一意のストーリーボードを作る必要があるかどうか気になることでしょう。 さいわいなことにその必要はありません。そこで、同じアニメーションを複数のオブジェクトに適用する方法を示します。

  Windows 8 では、ストーリーボードは、Xcode の場合のようにアプリケーションをレイアウトする手段ではなく、アニメーションであることを思い出してください。

その秘密は、次の例に示されているように、プログラムでストーリーボードの TargetName プロパティを変更することにあります。

ストーリーボードの定義

最初に、ストーリーボード アニメーションを定義します。Blend を使うか、XAML で手動でストーリーボード アニメーションを定義します。Blend を使った例については、「ボタンのスキン適用とアニメーション化」をご覧ください。Blend を使う場合は、すべての TargetName プロパティを削除します。この操作を行わないと、アニメーションはその特定のターゲットのみに適用されます。次に例を示します。


    <Page.Resources>
        <Storyboard x:Name="TapAnimation">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" >
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0.95"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" >
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0.95"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
    </Page.Resources>

ストーリーボードで変更するすべての XAML オブジェクトに <RenderTransform> タグを追加し、アニメーション化する特定の変換のプレースホルダーを追加します。この操作を行わないと、アプリは例外をスローします。ストーリーボードを適用する準備が整った Image オブジェクトの例を次に示します。


 <Image x:Name="myImage" Width="256" Height="160" RenderTransformOrigin= "0.5,0.5" >
                        <Image.RenderTransform>
                            <CompositeTransform/>
                        </Image.RenderTransform>
                    </Image>

  RenderTransformOrigin= "0.5,0.5" プロパティは、すべてのアニメーションがオブジェクトの中央を中心に配置されることを指定します。

ストーリーボードの適用

次に、ストーリーボードをオブジェクトと関連付け、必要に応じてトリガーします。ここで、注意事項が 1 つあります。アニメーションの再生中は TargetName プロパティを変更できません。そのような操作を行うと、アプリは例外をスローします。これを防ぐには、ターゲットを変更する前に Stop() を呼び出します。

ヒント  GetCurrentState() を呼び出すと、ストーリーボードが現在実行中かどうかを検出できます。

特定の Image オブジェクトに対してアニメーションをトリガーするコードを次に示します。このコードは、たとえば、PointerPressed イベントを使ったユーザーのタップに対する応答内で使うことができます。このコードを使うのは、Click イベントを使って Button に適用するのと同じくらい簡単です。


 // Add using Windows.UI.Xaml.Media.Animation;
            TapAnimation.Stop();
            TapAnimation.SetValue(Storyboard.TargetNameProperty,"myImage");
            TapAnimation.Begin();

この方法は、次に示すように、イベントをトリガーしたコントロールから新しいターゲット名を自動的に生成する場合に便利です。


  private void someImages_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            TapImage.Stop();
            TapImage.SetValue(Storyboard.TargetNameProperty, (sender as Image).Name);
            TapImage.Begin();
        }

ここでは、ユーザーがタップした Image オブジェクトによりイベントが作成され、この名前をターゲットとして使います。ページ上の各画像がタップされたときにすべて同じイベントを生成する場合、これらの画像はすべて同じストーリーボードでアニメーション化されます。つまり、このキーパッドの例では各キーがアニメーション化されるため、ストーリーボードを 1 つ作るだけで済みます。

  ご存じない方のための情報として、as キーボードは、センダーに対してキャストを実行して Image にします。

1 つのイベント ハンドラーによる複数のボタンの処理

複数の類似のボタンを持つアプリでは、それぞれのボタンに対してイベント ハンドラーを用意するのではなく、マスター イベント ハンドラーを 1 つ用意するのが合理的です。すべてのボタンで同じクリック イベントを使うことができますが、ボタンを区別する方法をコードで用意する必要があります。ここで使うのが、tags です。

iOS の場合と同様、すべてのコントロールまたはオブジェクトはタグを持つことができます。タグは、コントロールやブジェクトを一意に識別するために使うことができる値です。たとえば、このキーパッドの例では、この XAML のようにボタンを定義できます。それぞれのボタンはよく似ていますがタグ値が異なる点に注目してください。


	<Button Content="1" HorizontalAlignment="Left" Margin="446,78,0,0" VerticalAlignment="Top" Width="120" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="1">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>
        <Button Content="2" HorizontalAlignment="Left" Margin="446,543,0,0" VerticalAlignment="Top" Width="460" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="2">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>
        <Button Content="3" HorizontalAlignment="Left" Margin="446,393,0,0" VerticalAlignment="Top" Width="120" Height="120" FontSize="48" FontWeight="Bold" Click="Button_Click" Tag="3">
    		<Button.Background>
    			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    				<GradientStop Color="Black"/>
    				<GradientStop Color="#FF838383" Offset="1"/>
    			</LinearGradientBrush>
    		</Button.Background>
    	</Button>

すべてのボタンは、Button_Click という同じイベント ハンドラーを指しています。ハンドラー内では、次のようにタグ値を読み取り、適切に応答しています。


        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var tag = (sender as Button).Tag;

            int t = Convert.ToInt16(tag);

            switch (t)
            {
                case 0: break;
                case 1: break;
                case 2: break;
                default: break;
            }
        }

関連トピック

プログラムによるアニメーションの操作
はじめに: アニメーション
XAML と Expression Blend を使ってユーザー インターフェイスを作成する方法
ストーリーボードに設定されたアニメーション

 

 

表示:
© 2015 Microsoft