エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

クイックスタート: Windows Phone のアニメーション

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Windows Phone では、アニメーションを利用することにより、動きや対話機能などの要素を追加して、より充実したアプリを実現できます。背景色のアニメーション化やアニメーション化された変換の適用によって、画面を大胆に変化させたり、役に立つ視覚的な手掛かりを提供したりすることができます。このクイックスタートでは、プロパティ値の変更やキー フレームの使用による基本的なアニメーションの作成方法を示します。

このトピックは、次のセクションで構成されています。

Windows Phone のアニメーションは、オブジェクトのプロパティ値を変更することによって作成します。たとえば、RectangleWidthRotateTransform の角度、または Button のカラー値をアニメーション化できます。

次の例では、Opacity プロパティをアニメーション化しています。

<StackPanel>
    <StackPanel.Resources>
        <!-- Animates the rectangle's opacity. -->
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation
            Storyboard.TargetName="MyAnimatedRectangle"
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:1"
            AutoReverse="True"/>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle MouseLeftButtonUp="Rectangle_Tapped"
        x:Name="MyAnimatedRectangle"
        Width="300" Height="200" Fill="Blue" />
</StackPanel>
// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
    myStoryboard.Begin();
}
Animating a double property

以下の各セクションでは、Opacity プロパティをアニメーション化する手順を説明し、各手順で使用する XAML について検証します。

1. アニメーション化するプロパティの識別

この例では、RectangleOpacity プロパティをアニメーション化します。アニメーション化するプロパティをオブジェクト自体で宣言する必要はありません。ただし、一般にアニメーション化するオブジェクトに名前を付けます。オブジェクトに名前を付けることで、アニメーションの対象となるオブジェクトを簡単に指定できるようになります。次の XAML は、RectangleMyAnimatedRectangle という名前を付ける方法を示しています。

<Rectangle x:Name="MyAnimatedRectangle" ...

2. ストーリーボードの作成とリソース化

Storyboard は、アニメーション オブジェクトを入れるコンテナーです。Storyboard を、アニメーション化するオブジェクトで使用可能なリソースにする必要があります。次の XAML は、StackPanel を、ルート要素である Storyboard のリソースにする方法を示しています。

<StackPanel x:Name="rootElement">
    <StackPanel.Resources>
    <!-- Animates the rectangle's opacity. -->
        <Storyboard x:Name="myStoryboard">
            <!-- Animation objects go here. -->
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>

3. ストーリーボードへのアニメーション オブジェクトの追加

アニメーション化するプロパティ (Opacity) の値は double を使用するので、この例では DoubleAnimation オブジェクトを使用しています。アニメーション オブジェクトは、アニメーション化する対象と、そのアニメーションの動作を指定します。次の XAML は、StoryboardDoubleAnimation を追加する方法を示しています。

<Storyboard x:Name="myStoryboard">
     <DoubleAnimationStoryboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard>

この DoubleAnimation オブジェクトは、次のようなアニメーションを指定します。

  • Storyboard.TargetProperty="Opacity" は、Opacity プロパティがアニメーション化されることを指定します。

  • Storyboard.TargetName="MyAnimatedRectangle" は、このプロパティによってアニメーション化するオブジェクト (Rectangle) を指定します。

  • From="1.0" To="0.0" は、Opacity プロパティが値 1 から始まって 0 までアニメーション化する (最初は不透明で最後はフェードする) ことを指定します。

  • Duration="0:0:1" は、アニメーションの持続時間 (Rectangle がフェードする速さ) を指定します。Duration プロパティは "時間:分:秒" の形式で指定します。したがって、この例では 1 秒を持続時間として使用しています。

  • AutoReverse="True" は、アニメーションが終わった時点で逆の動作が始まることを指定します。この例の場合は、フェードした後で完全な不透明に戻ります。

  • RepeatBehavior="Forever" は、開始したアニメーションを無期限に続けることを指定します。この例では、Rectangle がフェード インとフェード アウトを繰り返します。

4. アニメーションの開始

アニメーションを開始する方法としては、イベントへの応答が一般的です。この例では、MouseLeftButtonUp イベントを使用して、ユーザーが Rectangle をタップした時点でアニメーションを開始します。

<Rectangle MouseLeftButtonUp="Rectangle_Tapped"
    x:Name="MyAnimatedRectangle"
    Width="100" Height="100" Fill="Blue" />

Begin メソッドを使用して Storyboard が開始されます。

myStoryboard.Begin();
メモメモ:

XAML の代わりに C# または Visual Basic を使用してアニメーションをセットアップすることができます。

前の例では、Double 値を使用するプロパティをアニメーション化する方法を示しました。Color をアニメーション化するには、どうすればよいでしょうか。他の種類の値をアニメーション化するために使用される Windows Phone のアニメーション オブジェクトが用意されています。次に示す基本的なアニメーション オブジェクトは、それぞれ DoubleColor、および Point のプロパティをアニメーション化します。

メモメモ:

オブジェクトを使用するプロパティをアニメーション化することも可能です。

ColorAnimation の作成方法を次の例に示します。

<StackPanel MouseLeftButtonUp="Rectangle_Tapped">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
        <!-- Animate the background color of the canvas from red to green over 4 seconds. -->
            <ColorAnimation Storyboard.TargetName="mySolidColorBrush"
                Storyboard.TargetProperty="Color"
                From="Red" To="Green" Duration="0:0:4" />
        </Storyboard>
    </StackPanel.Resources>
    <StackPanel.Background>
        <SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
    </StackPanel.Background>
</StackPanel>
// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
    myStoryboard.Begin();
}
Animating a color property

前の例では、Begin メソッドを使用してアニメーションを開始する方法を示しました。Storyboard には、アニメーションを制御するメソッドとして、StopPause、および Resume もあります。次の例では 4 つの Button オブジェクトを作成しています。これらのオブジェクトにより、ユーザーが画面全体で Ellipse のアニメーションを制御できます。

<Canvas>
    <Canvas.Resources>
        <Storyboard x:Name="myStoryboard">
        <!-- Animate the center point of the ellipse. -->
        <PointAnimation Storyboard.TargetProperty="Center"
            Storyboard.TargetName="MyAnimatedEllipseGeometry"
            Duration="0:0:5"
            From="20,200"
            To="400,100"
            RepeatBehavior="Forever" />
        </Storyboard>
    </Canvas.Resources>
    <Path Fill="Blue">
        <Path.Data>
        <!-- Describe an ellipse. -->
            <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
            Center="20,20" RadiusX="15" RadiusY="15" />
        </Path.Data>
    </Path>
    <StackPanel Orientation="Vertical" Canvas.Left="60" Canvas.Top="265">
      <StackPanel Orientation="Horizontal">
        <!-- Button that begins animation. -->
        <Button Click="Animation_Begin"
            Width="165" Height="130" Margin="2" Content="Begin" />
        <!-- Button that pauses animation. -->
        <Button Click="Animation_Pause"
            Width="165" Height="130" Margin="2" Content="Pause" />
      </StackPanel>
      <StackPanel Orientation="Horizontal">
        <!-- Button that resumes animation. -->
        <Button Click="Animation_Resume"
            Width="165" Height="130" Margin="2" Content="Resume" />
        <!-- Button that stops animation. Stopping the animation returns the
        ellipse to its original location. -->
        <Button Click="Animation_Stop"
            Width="165" Height="130" Margin="2" Content="Stop" />
      </StackPanel>
    </StackPanel>
</Canvas>
private void Animation_Begin(object sender, RoutedEventArgs e){
    myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e){
    myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e){
    myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e){
    myStoryboard.Stop();
}
Starting, stopping, pausing, and resuming

今までのところ、このクイックスタートで示したアニメーションの例は、いずれも 2 つの値の間のアニメーションでした(このようなアニメーションを From/To/By アニメーションと言います)。キー フレーム アニメーションでは、3 つ以上のターゲット値を使用し、アニメーションの補間方式を制御することができます。複数の値を指定することで、より複雑なアニメーションを作成できます。アニメーションの補間処理を指定する (具体的には、KeySpline プロパティを使用する) ことにより、アニメーションの加速度を制御できます。

キー フレーム アニメーションを使用して RectangleHeight をアニメーション化する方法を次の例に示します。

<StackPanel Background="#FDF5E6">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="myRectangle"
            Storyboard.TargetProperty="Height">

            <!-- This key frame resets the animation to its starting
            value (30) at the beginning of the animation. -->
            <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />

            <!-- Spline animations are used to create acceleration. This
            SplineDoubleKeyFrame creates an animation that starts out slow
            and then speeds up. The rectangle "falls". -->
            <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300"
            KeyTime="0:0:0.8" />

            <!-- This spline animation creates the "bounce" at the end where
            the rectangle shortens its length quickly at first and then
            slows down and stops. -->
            <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250"
            KeyTime="0:0:1.5" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" MouseLeftButtonUp="Rectangle_Tapped" Fill="Blue" Width="200" Height="30" />
</StackPanel>
// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
     myStoryboard.Begin(); 
}
Animating by using key-frames

この XAML には次の 3 つのキー フレームが含まれています。各キー フレームは、特定の時点でアニメーション化する値を指定します。アニメーション全体の持続時間は 1.5 秒です。

  • この例の最初のキー フレームは LinearDoubleKeyFrame です。LinearDoubleKeyFrame などの LinearTypeKeyFrame オブジェクトを使用すると、値の間に滑らかな線形の遷移が生成されます。ただしこの例で、このオブジェクトは単に時間 0 でアニメーションが値 30 であることを指定しているに過ぎません。

  • この例で 2 番目のキー フレームは SplineDoubleKeyFrame であり、アニメーション開始後 0.8 秒の時点で RectangleHeight が 300 であることを指定しています。SplineDoubleKeyFrame などの SplineTypeKeyFrame オブジェクトは、値から値までの間で KeySpline プロパティの値に従って変化する遷移を作成します。この例では、Rectangle の動きは最初はゆっくりしていますが、時間セグメントの終わりに近づくにつれて急激に速くなります。

  • この例で 3 番目のキー フレームは SplineDoubleKeyFrame であり、アニメーション開始後 1.5 秒 (前の SplineDoubleKeyFrame の終了から 0.7 秒後) の時点で、RectangleHeight が 250 であることを示しています。前の SplineDoubleKeyFrame とは対照的に、このキー フレームは、速いスピードで始まったアニメーションをゆっくりと終わらせます。

SplineDoubleKeyFrame が使用するプロパティのうち、おそらく最も扱いづらいのは KeySpline プロパティでしょう。このプロパティは、ベジエ曲線の最初および 2 番目の制御ポイントを指定し、それによってアニメーションの加速度を記述します。

イージング関数を使用すると、アニメーションに独自の数式を適用できます。たとえば、物体が自然にバウンドしたり、スプリングに乗っているような動きを与えることができます。それに近い効果は、キー フレーム アニメーションや From/To/By アニメーションを使用して実現することもできますが、かなりの労力が伴ううえ、数式を使った場合に比べると、動きが不自然になる場合があります。

IEasingFunction インターフェイスを実装して、独自のカスタム イージング関数を作成する以外にも、基本的な効果であれば、ランタイムに標準で備わっている、いずれかのイージング関数を使用して作成できます。次の例で、ランタイムに含まれるイージング関数のデモを示します。ドロップダウンからイージング関数を選択し、プロパティを設定し、アニメーションを実行します。アニメーションの XAML は右下に示されています。

次の一覧に、上記の例で示したイージング関数と、それぞれの機能の簡単な要約を示します。

イージング関数

要約

BackEase

指定されたパスのアニメーションを開始する直前に、逆の動きを与えます。

BounceEase

バウンド効果を作成します。

CircleEase

円関数を使って加速と減速のアニメーションを作成します。

CubicEase

数式 f(t) = t3 を使って加速と減速のアニメーションを作成します。

ElasticEase

スプリングが伸び縮みしながら最終的に停止するまでの動きを模したアニメーションを作成します。

ExponentialEase

指数式を使って加速と減速のアニメーションを作成します。

PowerEase

数式 f(t) = tp を使って加速と減速のアニメーションを作成します (p = Power プロパティ)。

QuadraticEase

数式 f(t) = t2 を使って加速と減速のアニメーションを作成します。

QuarticEase

数式 f(t) = t4 を使って加速と減速のアニメーションを作成します。

QuinticEase

数式 f(t) = t5 を使って加速と減速のアニメーションを作成します。

SineEase

サイン式を使って加速と減速のアニメーションを作成します。

これらのイージング関数は、EasingDoubleKeyFrameEasingPointKeyFrame、または EasingColorKeyFrame を使用して、キー フレーム アニメーションに適用できます。キー フレームとそれに関連付けられたイージング関数を使用して、Rectangle のアニメーションを作成する例を次に示します。四角形が上方向へ収縮し、減速した後、(落ちてくるかのように) 下方向へ膨張し、何度か弾んでから停止します。

<StackPanel Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
            Storyboard.TargetProperty="Height"
            Storyboard.TargetName="myRectangle">

            <!-- This keyframe animates the ellipse up to the crest
            where it slows down and stops. -->
            <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>

            <!-- This keyframe animates the ellipse back down and makes it bounce. -->
            <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
                <EasingDoubleKeyFrame.EasingFunction>
                <BounceEase Bounces="5" EasingMode="EaseOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" MouseLeftButtonUp="Rectangle_Tapped" Fill="Blue" Width="200" Height="200" />
</StackPanel>
// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
     myStoryboard.Begin();
}
Animating by using easing functions

ランタイムに含まれているイージング関数を使用することに加え、EasingFunctionBase を継承することによって、独自のカスタム イージング関数を作成することもできます。

表示:
© 2014 Microsoft