Microsoft Silverlight

Silverlight では、アニメーションを利用することで、動きやインタラクティビティを追加して、Web サイトを充実させることができます。背景色のアニメーション化やアニメーション化された Transform の適用によって、画面を大胆に変化させたり、役に立つビジュアル キューを提供したりすることができます。このクイックスタートでは、プロパティ値の変更やキーフレームの使用による基本的なアニメーションの作成方法について説明します。

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

• Double プロパティのアニメーション化
• Color プロパティのアニメーション化
• 開始、停止、一時停止、再開
• 高度なアニメーション (キーフレーム アニメーション)

アニメーションの詳細については、MSDN の Silverlight ドキュメントの「アニメーションの概要」を参照してください。

Double プロパティのアニメーション化

Silverlight アニメーションを作成するには、オブジェクトのプロパティ値をアニメーション化します。たとえば、四角形の幅、RotateTransform の角度、ボタンの色の値などをアニメーション化できます。次の例では、Opacity プロパティをアニメーション化します。このサンプルを実行するには、四角形をクリックしてください。四角形のフェード インとフェード アウトが繰り返し実行されます。

XAML

<StackPanel x:Name="rootElement"> <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" RepeatBehavior="Forever" /> </Storyboard> </StackPanel.Resources> <Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" /> </StackPanel>

C#

// When the user clicks the rectangle, the animation // begins. private void Mouse_Clicked(object sender, MouseEventArgs e) { myStoryboard.Begin(); }

Visual Basic

' When the user clicks the rectangle, the animation ' begins. Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs) myStoryboard.Begin End Sub

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

 

アニメーション化するプロパティの特定

この例では、四角形の Opacity プロパティをアニメーション化します。アニメーション化したいプロパティをオブジェクト自体で宣言する必要はありません。通常は、アニメーション化するオブジェクトに名前を付けます。オブジェクトに名前を付けることで、アニメーション化の対象オブジェクトを簡単に指定できます。以下の XAML では、四角形に MyAnimatedRectangle という名前を付けています。

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

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

Storyboard は、アニメーション オブジェクトを格納するコンテナーです。この Storyboard を、アニメーション化したいオブジェクトで利用可能なリソースとして設定する必要があります。以下の XAML は、Storyboard をルート要素 (StackPanel) のリソースとして設定する方法を示します。

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

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

アニメーション化するプロパティ (Opacity) は Double 型の値であるため、この例では DoubleAnimation オブジェクトを使用します。アニメーション オブジェクトは、アニメーションの対象と動作を指定します。以下の XAML は、DoubleAnimation を Storyboard に追加する方法を示します。

... <Storyboard x:Name="myStoryboard"> <DoubleAnimation Storyboard.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" は、このプロパティがアニメーション化するオブジェクト (四角形) を指定します。
• From="1.0" To="0.0" は、Opacity プロパティ値が 1 から 0 まで遷移するアニメーションを指定します (不透明な状態から次第に非表示になります)。
• Duration="0:0:1" は、アニメーションの継続時間 (四角形が非表示になる速度) を指定します。Duration プロパティは "時間:分:秒" という形式で指定するため、この例での継続時間は 1 秒になります。
• AutoReverse="True" は、アニメーションが終了したら逆再生するように指定します。この例では、四角形は非表示になった後、完全に不透明な状態にまで戻ります。
• RepeatBehavior="Forever" は、アニメーションが開始したら無限に再生するように指定します。この例では、四角形のフェード インとフェード アウトが繰り返されます。

 

アニメーションの開始

アニメーションを開始するには、クリックや読み込みなどのイベントを利用する方法が最も一般的です。この例では、MouseLeftButtonDown イベントを四角形にアタッチして、四角形がクリックされたらアニメーションを開始するように設定します。

... <Rectangle MouseLeftButtonDown="Mouse_Clicked" x:Name="MyAnimatedRectangle" Width="100" Height="100" Fill="Blue" /> ...

Storyboard (アニメーション) を開始するには、Storyboard の Begin メソッドを使用します。

myStoryboard.Begin()

---

Color プロパティのアニメーション化

前の例では、Double 値を使用するプロパティをアニメーション化する方法を示しました。ここでは、色をアニメーション化する方法について説明します。Silverlight には、さまざまな値をアニメーション化するためのアニメーション オブジェクトが用意されています。次の基本的なアニメーション オブジェクトは、それぞれ Double、Color、Point の各プロパティをアニメーション化します。

• DoubleAnimation
• ColorAnimation
• PointAnimation

次の例は、色のアニメーションを作成する方法を示します。このサンプルを実行するには、四角形をクリックしてください。キャンバスの背景色が 4 秒間で赤から緑に変化します。

XAML

<StackPanel MouseLeftButtonDown="Mouse_Clicked"> <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>

C#

// When the user clicks the rectangle, the animation // begins. private void Mouse_Clicked(object sender, MouseEventArgs e) { myStoryboard.Begin(); }

Visual Basic

' When the user clicks the rectangle, the animation ' begins. Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs) myStoryboard.Begin End Sub

---

開始、停止、一時停止、再開

前の例では、Begin メソッドを使用してアニメーションを開始する方法を示しました。Storyboard には、アニメーションを制御するメソッドとして、さらに Stop、Pause、Resume が用意されています。次の例では、画面を横切る Ellipse のアニメーションを制御する 4 つのボタンを作成します。このサンプルを実行するには、いずれかのボタンをクリックします。アニメーションの動作を確認してください。

XAML

<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="Horizontal" Canvas.Left="10" Canvas.Top="265"> <!-- Button that begins animation. --> <Button Click="Animation_Begin" Width="65" Height="30" Margin="2" Content="Begin" /> <!-- Button that pauses animation. --> <Button Click="Animation_Pause" Width="65" Height="30" Margin="2" Content="Pause" /> <!-- Button that resumes animation. --> <Button Click="Animation_Resume" Width="65" Height="30" Margin="2" Content="Resume" /> <!-- Button that stops animation. Stopping the animation returns the ellipse to its original location. --> <Button Click="Animation_Stop" Width="65" Height="30" Margin="2" Content="Stop" /> </StackPanel> </Canvas>

C#

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(); }

Visual Basic

Private Sub Animation_Begin(ByVal sender As Object, ByVal e As RoutedEventArgs) myStoryboard.Begin End Sub Private Sub Animation_Pause(ByVal sender As Object, ByVal e As RoutedEventArgs) myStoryboard.Pause End Sub Private Sub Animation_Resume(ByVal sender As Object, ByVal e As RoutedEventArgs) myStoryboard.Resume End Sub Private Sub Animation_Stop(ByVal sender As Object, ByVal e As RoutedEventArgs) myStoryboard.Stop End Sub

---

高度なアニメーション (キーフレーム アニメーション)

これまで、このクイックスタートでは 2 つの値の間を遷移するアニメーションの例を示しました (これらは From/To/By アニメーションと呼ばれます)。キーフレーム アニメーションでは、3 つ以上のターゲット値を使用して、アニメーションの補間法を制御できます。複数の値を指定してアニメーション化することで、より複雑なアニメーションを作成できます。アニメーションの補間 (具体的には、KeySpline プロパティ) を指定することで、アニメーションの加速度を制御できます。

次の例は、キーフレーム アニメーションを使用して、四角形の高さをアニメーション化する方法を示します。このサンプルを実行するには、四角形をクリックしてください。アニメーションが実行されます。

XAML

<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" MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" Width="200" Height="30" /> </StackPanel>

C#

// When the user clicks the rectangle, the animation // begins. private void Mouse_Clicked(object sender, MouseEventArgs e) { myStoryboard.Begin(); }

Visual Basic

' When the user clicks the rectangle, the animation ' begins. Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs) myStoryboard.Begin End Sub

この XAML には、以下の 3 つのキーフレームが設定されています。各キーフレームは、アニメーションが遷移する所定の時点の値を指定します。アニメーション全体の実行時間は 1.5 秒です。

• 1 番目のキーフレームは、LinearDoubleKeyFrame です。LinearTypeKeyFrame オブジェクト (LinearDoubleKeyFrame など) は、値間の滑らかな線形遷移を作成します。ただし、この例では、アニメーションを 0 秒の時点で 30 の値に指定するにとどまっています。
• 2 番目のキーフレーム (SplineDoubleKeyFrame) では、四角形の高さを、アニメーション開始後 0.8 秒の時点で 300 に指定しています。SplineTypeKeyFrame オブジェクト (SplineDoubleKeyFrame) は、KeySpline プロパティの値に対応した値間の可変遷移を作成します。この例では、四角形はゆっくりと動き始め、時間セグメントの終点に向かって加速します。
• 3 番目のキーフレーム (SplineDoubleKeyFrame) では、四角形の高さを、アニメーション開始後 1.5 秒の時点 (直前の SplineDoubleKeyFrame の終了後 0.7 秒の時点) で 250 に指定しています。直前の SplineDoubleKeyFrame とは反対に、このキーフレームによってアニメーションは高速で動き始め、終点に向かって減速します。

SplineDoubleKeyFrame で使用するプロパティの中で最も注意が必要なのが、KeySpline プロパティです。このプロパティは、ベジエ曲線の 1 番目と 2 番目の制御点を指定して、アニメーションの加速度を決定します。

---

参照

• アニメーションの概要
• キー フレーム アニメーション
• プログラムによるアニメーションの操作

フィードバックを送信する