方法: ストーリーボードを使ってプロパティをアニメーション化するHow to: Animate a Property by Using a Storyboard

この例では、 Storyboardを使用してプロパティをアニメーション化する方法を示します。This example shows how to use a Storyboard to animate properties. を使用しStoryboardてプロパティをアニメーション化するには、アニメーション化するプロパティごとにアニメーションを作成し、 Storyboardアニメーションを格納するを作成することもできます。To animate a property by using a Storyboard, create an animation for each property that you want to animate and also create a Storyboard to contain the animations.

プロパティの種類によって、使用するアニメーションの種類が決まります。The type of property determines the type of animation to use. たとえば、値を受け取るDoubleプロパティをアニメーション化するには、をDoubleAnimation使用します。For example, to animate a property that takes Double values, use a DoubleAnimation. 添付プロパティは、 TargetNameアニメーションを適用するオブジェクトとプロパティを指定します。 TargetPropertyThe TargetName and TargetProperty attached properties specify the object and property to which the animation is applied.

Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)ストーリーボードを開始するにはBeginStoryboard 、アクションとEventTriggerを使用します。To start a storyboard in Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML), use a BeginStoryboard action and an EventTrigger. EventTriggerRoutedEventプロパティBeginStoryboardによって指定されたイベントが発生したときにアクションを開始します。The EventTrigger begins the BeginStoryboard action when the event that is specified by its RoutedEvent property occurs. アクションBeginStoryboardは、をStoryboard開始します。The BeginStoryboard action starts the Storyboard.

次の例でStoryboardは、オブジェクトをButton使用して、2つのコントロールをアニメーション化します。The following example uses Storyboard objects to animate two Button controls. 最初のボタンのサイズを変更するにはWidth 、そのボタンをアニメーション化します。To make the first button change in size, its Width is animated. 2番目のボタンの色Colorを変更するには、のプロパティSolidColorBrushを使用Backgroundして、アニメーション化されたボタンのを設定します。To make the second button change color, the Color property of the SolidColorBrush is used to set the Background of the button that is animated.

Example

<!-- StoryboardExample.xaml
     Uses storyboards to animate properties. -->
<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Animate Properties with Storyboards">

  <Border Background="White">
    <StackPanel Margin="30" HorizontalAlignment="Left" MinWidth="500">

      <TextBlock>Storyboard Animation Example</TextBlock>
      
      <!-- The width of this button is animated. -->
      <Button Name="myWidthAnimatedButton"
        Height="30" Width="200" HorizontalAlignment="Left">
        A Button   
        <Button.Triggers>
        
          <!-- Animates the width of the first button 
               from 200 to 300. -->         
          <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
              <Storyboard>           
                <DoubleAnimation Storyboard.TargetName="myWidthAnimatedButton"
                  Storyboard.TargetProperty="Width"
                  From="200" To="300" Duration="0:0:3" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Button.Triggers>
      </Button>

      <!-- The color of the brush used to paint this button is animated. -->
      <Button Height="30" Width="200" 
        HorizontalAlignment="Left">Another Button
        <Button.Background>
          <SolidColorBrush x:Name="myAnimatedBrush" Color="Blue" />
        </Button.Background>
        <Button.Triggers>
        
        <!-- Animates the color of the brush used to paint 
             the second button from red to blue . -->             
          <EventTrigger RoutedEvent="Button.Click">    
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetName="myAnimatedBrush"
                  Storyboard.TargetProperty="Color"
                  From="Red" To="Blue" Duration="0:0:7" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Button.Triggers>
      </Button>
    </StackPanel>
  </Border>
</Page>

注意

アニメーションFrameworkElementNameオブジェクト ( ControlPanelなど) とFreezableオブジェクト ( BrushTransformなど) の両方をターゲットにすることができますが、プロパティを持つのはフレームワーク要素だけです。Although animations can target both a FrameworkElement object, such as a Control or Panel, and a Freezable object, such as a Brush or Transform, only framework elements have a Name property. 名前をフリーズ可能オブジェクトに割り当てて、アニメーションの対象にできるようにするには、前の例で示したように x:Name ディレクティブを使用します。To assign a name to a freezable so that it can be targeted by an animation, use the x:Name Directive, as the previous example shows.

コードを使用する場合は、 NameScope FrameworkElementに対してを作成し、そのFrameworkElementオブジェクトの名前を登録してアニメーション化する必要があります。If you use code, you must create a NameScope for a FrameworkElement and register the names of the objects to animate with that FrameworkElement. コードでアニメーションを開始するには、 BeginStoryboard EventTriggerでアクションを使用します。To start the animations in code, use a BeginStoryboard action with an EventTrigger. 必要に応じて、イベントハンドラーとBeginStoryboardメソッドを使用できます。Optionally, you can use an event handler and the Begin method of Storyboard. Begin メソッドを使用する方法の例を次に示します。The following example shows how to use the Begin method.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Microsoft.Samples.Animation.AnimatingWithStoryboards
{


    // Uses a storyboard to animate the properties
    // of two buttons.
    public class StoryboardExample : Page
    {

        public StoryboardExample()
        {
            // Create a name scope for the page.
            NameScope.SetNameScope(this, new NameScope());
            
            this.WindowTitle = "Animate Properties using Storyboards";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.MinWidth = 500;
            myStackPanel.Margin = new Thickness(30);
            myStackPanel.HorizontalAlignment = HorizontalAlignment.Left;
            TextBlock myTextBlock = new TextBlock();
            myTextBlock.Text = "Storyboard Animation Example";
            myStackPanel.Children.Add(myTextBlock);
            
            //
            // Create and animate the first button.
            //
            
            // Create a button.
            Button myWidthAnimatedButton = new Button();
            myWidthAnimatedButton.Height = 30;
            myWidthAnimatedButton.Width = 200;
            myWidthAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left;
            myWidthAnimatedButton.Content = "A Button";

            // Set the Name of the button so that it can be referred
            // to in the storyboard that's created later.
            // The ID doesn't have to match the variable name;
            // it can be any unique identifier.
            myWidthAnimatedButton.Name = "myWidthAnimatedButton";
            
            // Register the name with the page to which the button belongs.
            this.RegisterName(myWidthAnimatedButton.Name, myWidthAnimatedButton);
            
            // Create a DoubleAnimation to animate the width of the button.
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 200;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(3000));          
   
            // Configure the animation to target the button's Width property.
            Storyboard.SetTargetName(myDoubleAnimation, myWidthAnimatedButton.Name); 
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Button.WidthProperty));
            
            // Create a storyboard to contain the animation.
            Storyboard myWidthAnimatedButtonStoryboard = new Storyboard();
            myWidthAnimatedButtonStoryboard.Children.Add(myDoubleAnimation);
            
            // Animate the button width when it's clicked.
            myWidthAnimatedButton.Click += delegate(object sender, RoutedEventArgs args)
                {
                    myWidthAnimatedButtonStoryboard.Begin(myWidthAnimatedButton);
                };

            
            myStackPanel.Children.Add(myWidthAnimatedButton);

            //
            // Create and animate the second button.
            //

            // Create a second button.
            Button myColorAnimatedButton = new Button();
            myColorAnimatedButton.Height = 30;
            myColorAnimatedButton.Width = 200;
            myColorAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left;
            myColorAnimatedButton.Content = "Another Button";
            
            // Create a SolidColorBrush to paint the button's background.
            SolidColorBrush myBackgroundBrush = new SolidColorBrush();
            myBackgroundBrush.Color = Colors.Blue;
            
            // Because a Brush isn't a FrameworkElement, it doesn't
            // have a Name property to set. Instead, you just
            // register a name for the SolidColorBrush with
            // the page where it's used.
            this.RegisterName("myAnimatedBrush", myBackgroundBrush);
            
            // Use the brush to paint the background of the button.
            myColorAnimatedButton.Background = myBackgroundBrush;
            
            // Create a ColorAnimation to animate the button's background.
            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Red;
            myColorAnimation.To = Colors.Blue;
            myColorAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(7000));    
            
            // Configure the animation to target the brush's Color property.
            Storyboard.SetTargetName(myColorAnimation, "myAnimatedBrush");                        
            Storyboard.SetTargetProperty(myColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));    

            // Create a storyboard to contain the animation.
            Storyboard myColorAnimatedButtonStoryboard = new Storyboard();
            myColorAnimatedButtonStoryboard.Children.Add(myColorAnimation);

            // Animate the button background color when it's clicked.
            myColorAnimatedButton.Click += delegate(object sender, RoutedEventArgs args)
                {
                    myColorAnimatedButtonStoryboard.Begin(myColorAnimatedButton);
                };

          
            myStackPanel.Children.Add(myColorAnimatedButton);
            this.Content = myStackPanel;

        }
    }
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation

Namespace SDKSample


    ' Uses a storyboard to animate the properties
    ' of two buttons.
    Public Class StoryboardExample
        Inherits Page
        
        Private Dim WithEvents myWidthAnimatedButton As Button
        Private Dim WithEvents myColorAnimatedButton As Button        
        Private Dim myWidthAnimatedButtonStoryboard As Storyboard
        Private Dim myColorAnimatedButtonStoryboard As Storyboard
        

        Public Sub New()
            ' Create a name scope for the page.
            NameScope.SetNameScope(Me, New NameScope())

            Me.WindowTitle = "Animate Properties using Storyboards"
            Dim myStackPanel As New StackPanel()
            myStackPanel.MinWidth = 500
            myStackPanel.Margin = New Thickness(30)
            myStackPanel.HorizontalAlignment = HorizontalAlignment.Left
            Dim myTextBlock As New TextBlock()
            myTextBlock.Text = "Storyboard Animation Example"
            myStackPanel.Children.Add(myTextBlock)

            '
            ' Create and animate the first button.
            '

            ' Create a button.
            myWidthAnimatedButton = New Button()
            myWidthAnimatedButton.Height = 30
            myWidthAnimatedButton.Width = 200
            myWidthAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left
            myWidthAnimatedButton.Content = "A Button"

            ' Set the Name of the button so that it can be referred
            ' to in the storyboard that's created later.
            ' The ID doesn't have to match the variable name;
            ' it can be any unique identifier.
            myWidthAnimatedButton.Name = "myWidthAnimatedButton"

            ' Register the name with the page to which the button belongs.
            Me.RegisterName(myWidthAnimatedButton.Name, myWidthAnimatedButton)

            ' Create a DoubleAnimation to animate the width of the button.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 200
            myDoubleAnimation.To = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(3000))

            ' Configure the animation to target the button's Width property.
            Storyboard.SetTargetName(myDoubleAnimation, myWidthAnimatedButton.Name)
            Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Button.WidthProperty))

            ' Create a storyboard to contain the animation.
            myWidthAnimatedButtonStoryboard = New Storyboard()
            myWidthAnimatedButtonStoryboard.Children.Add(myDoubleAnimation)

            myStackPanel.Children.Add(myWidthAnimatedButton)

            '
            ' Create and animate the second button.
            '

            ' Create a second button.
            myColorAnimatedButton = New Button()
            myColorAnimatedButton.Height = 30
            myColorAnimatedButton.Width = 200
            myColorAnimatedButton.HorizontalAlignment = HorizontalAlignment.Left
            myColorAnimatedButton.Content = "Another Button"

            ' Create a SolidColorBrush to paint the button's background.
            Dim myBackgroundBrush As New SolidColorBrush()
            myBackgroundBrush.Color = Colors.Blue

            ' Because a Brush isn't a FrameworkElement, it doesn't
            ' have a Name property to set. Instead, you just
            ' register a name for the SolidColorBrush with
            ' the page where it's used.
            Me.RegisterName("myAnimatedBrush", myBackgroundBrush)

            ' Use the brush to paint the background of the button.
            myColorAnimatedButton.Background = myBackgroundBrush

            ' Create a ColorAnimation to animate the button's background.
            Dim myColorAnimation As New ColorAnimation()
            myColorAnimation.From = Colors.Red
            myColorAnimation.To = Colors.Blue
            myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))

            ' Configure the animation to target the brush's Color property.
            Storyboard.SetTargetName(myColorAnimation, "myAnimatedBrush")
            Storyboard.SetTargetProperty(myColorAnimation, New PropertyPath(SolidColorBrush.ColorProperty))

            ' Create a storyboard to contain the animation.
            myColorAnimatedButtonStoryboard = New Storyboard()
            myColorAnimatedButtonStoryboard.Children.Add(myColorAnimation)

            myStackPanel.Children.Add(myColorAnimatedButton)
            Me.Content = myStackPanel

        End Sub
        
        ' Start the animation when the button is clicked.
        Private Sub myWidthAnimatedButton_Loaded(ByVal sender as object, ByVal args as RoutedEventArgs) Handles myWidthAnimatedButton.Click
        
            myWidthAnimatedButtonStoryboard.Begin(myWidthAnimatedButton)
        
        End Sub        
        
        ' Start the animation when the button is clicked.
        Private Sub myColorAnimatedButton_Loaded(ByVal sender as object, ByVal args as RoutedEventArgs) Handles myColorAnimatedButton.Click
        
            myColorAnimatedButtonStoryboard.Begin(myColorAnimatedButton)
        
        End Sub           
        
    End Class
End Namespace

アニメーションとストーリー ボードの詳細については、「アニメーションの概要」を参照してください。For more information about animation and storyboards, see Animation Overview.

コードを使用する場合、プロパティをアニメーション化するStoryboardためにオブジェクトを使用するだけではありません。If you use code, you are not limited to using Storyboard objects in order to animate properties. 使用例を含む詳細については、「ストーリーボードを使用せずにプロパティをアニメーション化する」と「AnimationClock を使用してプロパティをアニメーション化する」を参照してください。For more information and examples, see Animate a Property Without Using a Storyboard and Animate a Property by Using an AnimationClock.