アニメーションの概要Animation Overview

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) には、魅力的なユーザーインターフェイスや魅力的なドキュメントを作成するための強力なグラフィックスおよびレイアウト機能が用意されています。Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) provides a powerful set of graphics and layout features that enable you to create attractive user interfaces and appealing documents. アニメーションを使うと、魅力的なユーザー インターフェイスをさらに豪華で使いやすいものにすることができます。Animation can make an attractive user interface even more spectacular and usable. 背景色をアニメーション化するか、アニメーション化された Transformを適用するだけで、大幅な画面切り替え効果を作成したり、便利な視覚的な手掛かりを提供したりすることができます。By just animating a background color or applying an animated Transform, you can create dramatic screen transitions or provide helpful visual cues.

この概要では、WPFWPF アニメーションとタイミングシステムの概要について説明します。This overview provides an introduction to the WPFWPF animation and timing system. ストーリーボードを使用した WPFWPF オブジェクトのアニメーションに焦点を当てています。It focuses on the animation of WPFWPF objects by using storyboards.

アニメーションの概要Introducing Animations

アニメーションは、それぞれが直前のイメージと少しずつ異なる一連のイメージをすばやく繰り返すことで生み出される錯覚です。Animation is an illusion that is created by quickly cycling through a series of images, each slightly different from the last. 脳は、イメージのグループを 1 つの変化するシーンとして認識します。The brain perceives the group of images as a single changing scene. 映画では、この錯覚は 1 秒あたりに多数の写真またはフレームを記録するカメラを使って生み出されます。In film, this illusion is created by using cameras that record many photographs, or frames, each second. フレームを映写機で再生すると、見る人には動く画像として映ります。When the frames are played back by a projector, the audience sees a moving picture.

コンピューター上のアニメーションも同様です。Animation on a computer is similar. たとえば、四角形の描画をビューからフェードアウトするプログラムは次のように動作する可能性があります。For example, a program that makes a drawing of a rectangle fade out of view might work as follows.

  • プログラムがタイマーを作成します。The program creates a timer.

  • 設定された間隔でプログラムがタイマーをチェックして経過時間を確認します。The program checks the timer at set intervals to see how much time has elapsed.

  • プログラムは、タイマーをチェックするたびに、経過時間に基づいて四角形の現在の不透明度値を計算します。Each time the program checks the timer, it computes the current opacity value for the rectangle based on how much time has elapsed.

  • プログラムは、新しい値で四角形を更新し、再描画します。The program then updates the rectangle with the new value and redraws it.

WPFWPF前に、Microsoft Windows の開発者は、独自のタイミングシステムを作成して管理するか、特別なカスタムライブラリを使用する必要がありました。Prior to WPFWPF, Microsoft Windows developers had to create and manage their own timing systems or use special custom libraries. WPFWPF には、マネージコードと Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) を通じて公開され、WPFWPF framework に緊密に統合された効率的なタイミングシステムが含まれています。includes an efficient timing system that is exposed through managed code and Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) and that is deeply integrated into the WPFWPF framework. WPFWPF アニメーションを使うと、コントロールやその他のグラフィカル オブジェクトを簡単にアニメーション化できます。animation makes it easy to animate controls and other graphical objects.

WPFWPF は、タイミング システムの管理と画面の効率的な再描画をすべてバックグラウンドで処理します。handles all the behind-the-scenes work of managing a timing system and redrawing the screen efficiently. 効果を実現するしくみではなく、作り出す効果に重点を置くことのできるタイミング クラスが提供されます。It provides timing classes that enable you to focus on the effects you want to create, instead of the mechanics of achieving those effects. WPFWPF では、クラスが継承できるアニメーションの基底クラスを公開しているため、独自のアニメーションを簡単に作成して、カスタマイズされたアニメーションを生成することもできます。also makes it easy to create your own animations by exposing animation base classes from which your classes can inherit, to produce customized animations. これらのカスタム アニメーションは、標準のアニメーション クラスのパフォーマンス上のメリットの多くを得ます。These custom animations gain many of the performance benefits of the standard animation classes.

WPF プロパティ アニメーション システムWPF Property Animation System

タイミングシステムに関するいくつかの重要な概念を理解している場合は、WPFWPF アニメーションを使用する方が簡単です。If you understand a few important concepts about the timing system, WPFWPF animations can be easier to use. 最も重要な点は、WPFWPFでは、個々のプロパティにアニメーションを適用してオブジェクトをアニメーション化することです。Most important is that, in WPFWPF, you animate objects by applying animation to their individual properties. たとえば、フレームワーク要素を拡大するには、その Width をアニメーション化し、プロパティを Height します。For example, to make a framework element grow, you animate its Width and Height properties. オブジェクトをビューからフェードさせるには、その Opacity プロパティをアニメーション化します。To make an object fade from view, you animate its Opacity property.

プロパティにアニメーション機能を持たせるには、次の 3 つの要件を満たす必要があります。For a property to have animation capabilities, it must meet the following three requirements:

  • 依存関係プロパティである必要があります。It must be a dependency property.

  • DependencyObject から継承し、IAnimatable インターフェイスを実装するクラスに属している必要があります。It must belong to a class that inherits from DependencyObject and implements the IAnimatable interface.

  • 互換性のあるアニメーションの種類が使用可能である必要があります。There must be a compatible animation type available. (WPFWPF で提供されていない場合は、独自のものを作成できます。(If WPFWPF does not provide one, you can create your own. カスタムアニメーションの概要」を参照してください)。See the Custom Animations Overview.)

WPFWPF には、IAnimatable プロパティを持つ多数のオブジェクトが含まれています。contains many objects that have IAnimatable properties. ButtonTabControlなどのコントロール、および Panel および Shape オブジェクトは DependencyObjectから継承されます。Controls such as Button and TabControl, and also Panel and Shape objects inherit from DependencyObject. これらのプロパティの大部分は依存関係プロパティです。Most of their properties are dependency properties.

アニメーションは、スタイルやコントロール テンプレートなど、ほぼ任意の場所で使用できます。You can use animations almost anywhere, which includes in styles and control templates. アニメーションはビジュアルである必要はありません。このセクションで説明している条件を満たしていれば、ユーザー インターフェイスの一部ではないオブジェクトをアニメーション化できます。Animations do not have to be visual; you can animate objects that are not part of the user interface if they meet the criteria that are described in this section.

例: ビューで要素のフェードインとフェードアウトを行うExample: Make an Element Fade In and Out of View

この例では、WPFWPF アニメーションを使用して、依存関係プロパティの値をアニメーション化する方法を示します。This example shows how to use a WPFWPF animation to animate the value of a dependency property. DoubleAnimationを使用します。これは Double 値を生成するアニメーションの一種であり、RectangleOpacity プロパティをアニメーション化します。It uses a DoubleAnimation, which is a type of animation that generates Double values, to animate the Opacity property of a Rectangle. その結果、Rectangle フェードインして表示されなくなります。As a result, the Rectangle fades in and out of view.

この例の最初の部分では、Rectangle 要素を作成します。The first part of the example creates a Rectangle element. 次の手順では、アニメーションを作成し、四角形の Opacity プロパティに適用する方法を示します。The steps that follow show how to create an animation and apply it to the rectangle's Opacity property.

次の例は、XAML で StackPanelRectangle 要素を作成する方法を示しています。The following shows how to create a Rectangle element in a StackPanel in XAML.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

コードで StackPanelRectangle 要素を作成する方法を次に示します。The following shows how to create a Rectangle element in a StackPanel in code.

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;
Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)

Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

パート 1: DoubleAnimation を作成するPart 1: Create a DoubleAnimation

要素のフェードインとビューアウトを行う方法の1つは、その Opacity プロパティをアニメーション化することです。One way to make an element fade in and out of view is to animate its Opacity property. Opacity プロパティは Double型であるため、double 値を生成するアニメーションが必要になります。Because the Opacity property is of type Double, you need an animation that produces double values. DoubleAnimation は、このようなアニメーションの1つです。A DoubleAnimation is one such animation. DoubleAnimation は、2つの double 値の間の遷移を作成します。A DoubleAnimation creates a transition between two double values. 開始値を指定するには、その From プロパティを設定します。To specify its starting value, you set its From property. 終了値を指定するには、その To プロパティを設定します。To specify its ending value, you set its To property.

  1. 不透明度の値 1.0 を指定すると、オブジェクトは完全に不透明になり、不透明度の値 0.0 によって完全に非表示になります。An opacity value of 1.0 makes the object completely opaque, and an opacity value of 0.0 makes it completely invisible. アニメーションを 1.0 からに遷移させるには 0.0 From プロパティを 1.0 に設定し、その To プロパティを 0.0に設定します。To make the animation transition from 1.0 to 0.0 you set its From property to 1.0 and its To property to 0.0. XAML で DoubleAnimation を作成する方法を次に示します。The following shows how to create a DoubleAnimation in XAML.

    <DoubleAnimation From="1.0" To="0.0" />
    

    コードで DoubleAnimation を作成する方法を次に示します。The following shows how to create a DoubleAnimation in code.

    var myDoubleAnimation = new DoubleAnimation();
    myDoubleAnimation.From = 1.0;
    myDoubleAnimation.To = 0.0;
    
    Dim myDoubleAnimation As New DoubleAnimation()
    myDoubleAnimation.From = 1.0
    myDoubleAnimation.To = 0.0
    
  2. 次に、Durationを指定する必要があります。Next, you must specify a Duration. アニメーションの Duration は、開始値から対象の値への移動にかかる時間を指定します。The Duration of an animation specifies how long it takes to go from its starting value to its destination value. XAML で Duration を5秒に設定する方法を次に示します。The following shows how to set the Duration to five seconds in XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />
    

    次に、Duration をコードで5秒に設定する方法を示します。The following shows how to set the Duration to five seconds in code.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    
    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
    
  3. 前のコードでは、1.0 から 0.0に遷移するアニメーションを示しています。これにより、target 要素は完全に不透明なものから完全に非表示になります。The previous code showed an animation that transitions from 1.0 to 0.0, which causes the target element to fade from completely opaque to completely invisible. 消滅した後に要素をビューにフェードバックするには、アニメーションの AutoReverse プロパティを trueに設定します。To make the element fade back into view after it vanishes, set the AutoReverse property of the animation to true. アニメーションを無期限に繰り返すには、その RepeatBehavior プロパティを Foreverに設定します。To make the animation repeat indefinitely, set its RepeatBehavior property to Forever. XAML で AutoReverseRepeatBehavior のプロパティを設定する方法を次に示します。The following shows how to set the AutoReverse and RepeatBehavior properties in XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>
    

    AutoReverseRepeatBehavior のプロパティをコードで設定する方法を次に示します。The following shows how to set the AutoReverse and RepeatBehavior properties in code.

    myDoubleAnimation.AutoReverse = true;
    myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
    
    myDoubleAnimation.AutoReverse = True
    myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever
    

パート 2: ストーリーボードを作成するPart 2: Create a Storyboard

オブジェクトにアニメーションを適用するには、Storyboard を作成し、TargetName および TargetProperty 添付プロパティを使用して、アニメーション化するオブジェクトとプロパティを指定します。To apply an animation to an object, you create a Storyboard and use the TargetName and TargetProperty attached properties to specify the object and property to animate.

  1. Storyboard を作成し、アニメーションをその子として追加します。Create the Storyboard and add the animation as its child. XAML で Storyboard を作成する方法を次に示します。The following shows how to create the Storyboard in XAML.

    <Storyboard>
        <DoubleAnimation
            From="1.0" To="0.0" Duration="0:0:1" 
            AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    

    コードで Storyboard を作成するには、クラスレベルで Storyboard 変数を宣言します。To create the Storyboard in code, declare a Storyboard variable at the class level.

    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;
    
    Class MainWindow
    
        Private myStoryboard As Storyboard
    

    次に、Storyboard を初期化し、その子としてアニメーションを追加します。Then initialize the Storyboard and add the animation as its child.

    myStoryboard = new Storyboard();
    myStoryboard.Children.Add(myDoubleAnimation);
    
    myStoryboard = New Storyboard()
    myStoryboard.Children.Add(myDoubleAnimation)
    
  2. Storyboard は、アニメーションを適用する場所を認識している必要があります。The Storyboard has to know where to apply the animation. アニメーション化するオブジェクトを指定するには、Storyboard.TargetName 添付プロパティを使用します。Use the Storyboard.TargetName attached property to specify the object to animate. 次の例は、XAML で MyRectangle する DoubleAnimation のターゲット名を設定する方法を示しています。The following shows how to set the target name of the DoubleAnimation to MyRectangle in XAML.

    <Storyboard>
        <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            From="1.0" To="0.0" Duration="0:0:1" 
            AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    

    コードで MyRectangle する DoubleAnimation のターゲット名を設定する方法を次に示します。The following shows how to set the target name of the DoubleAnimation to MyRectangle in code.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
    
  3. TargetProperty 添付プロパティを使用して、アニメーション化するプロパティを指定します。Use the TargetProperty attached property to specify the property to animate. 次の例は、XAML で RectangleOpacity プロパティをターゲットとするようにアニメーションを構成する方法を示しています。The following shows how the animation is configured to target the Opacity property of the Rectangle in XAML.

    <Storyboard>
        <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    

    次に、コードで RectangleOpacity プロパティを対象とするようにアニメーションを構成する方法を示します。The following shows how the animation is configured to target the Opacity property of the Rectangle in code.

    Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));
    
    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))
    

TargetProperty 構文の詳細とその他の例については、「ストーリーボードの概要」を参照してください。For more information about TargetProperty syntax and for additional examples, see the Storyboards Overview.

パート 3 (XAML): ストーリーボードをトリガーに関連付けるPart 3 (XAML): Associate the Storyboard with a Trigger

XAMLXAMLStoryboard を適用および開始する最も簡単な方法は、イベントトリガーを使用することです。The easiest way to apply and start a Storyboard in XAMLXAML is to use an event trigger. このセクションでは、XAML で Storyboard をトリガーに関連付ける方法について説明します。This section shows how to associate the Storyboard with a trigger in XAML.

  1. BeginStoryboard オブジェクトを作成し、ストーリーボードを関連付けます。Create a BeginStoryboard object and associate your storyboard with it. BeginStoryboard は、Storyboardを適用して開始する TriggerAction の一種です。A BeginStoryboard is a type of TriggerAction that applies and starts a Storyboard.

    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation
          Storyboard.TargetName="MyRectangle" 
          Storyboard.TargetProperty="Opacity"
          From="1.0" To="0.0" Duration="0:0:5" 
          AutoReverse="True" RepeatBehavior="Forever" />
      </Storyboard>
    </BeginStoryboard>
    
  2. EventTrigger を作成し、その Actions コレクションに BeginStoryboard を追加します。Create an EventTrigger and add the BeginStoryboard to its Actions collection. EventTriggerRoutedEvent プロパティを、Storyboardを開始するルーティングイベントに設定します。Set the RoutedEvent property of the EventTrigger to the routed event that you want to start the Storyboard. (ルーティングイベントの詳細については、「ルーティングイベントの概要」を参照してください)。(For more information about routed events, see the Routed Events Overview.)

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
    
  3. 四角形の Triggers コレクションに EventTrigger を追加します。Add the EventTrigger to the Triggers collection of the Rectangle.

    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
      <Rectangle.Triggers>
        <!-- Animates the rectangle's opacity. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyRectangle" 
                Storyboard.TargetProperty="Opacity"
                From="1.0" To="0.0" Duration="0:0:5" 
                AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
    

パート 3 (コード): ストーリーボードをイベント ハンドラーに関連付けるPart 3 (Code): Associate the Storyboard with an Event Handler

コードで Storyboard を適用して開始する最も簡単な方法は、イベントハンドラーを使用することです。The easiest way to apply and start a Storyboard in code is to use an event handler. このセクションでは、Storyboard をコード内のイベントハンドラーに関連付ける方法について説明します。This section shows how to associate the Storyboard with an event handler in code.

  1. 四角形の Loaded イベントに登録します。Register for the Loaded event of the rectangle.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    
    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
    
  2. イベント ハンドラーを宣言します。Declare the event handler. イベントハンドラーで、Begin メソッドを使用してストーリーボードを適用します。In the event handler, use the Begin method to apply the storyboard.

    private void myRectangleLoaded(object sender, RoutedEventArgs e)
    {
        myStoryboard.Begin(this);
    }
    
    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub
    

コード例全体Complete Example

次に、XAML でフェードインおよびフェードアウトする四角形を作成する方法を示します。The following shows how to create a rectangle that fades in and out of view in XAML.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Margin="10">
            <Rectangle
                Name="MyRectangle"
                Width="100" 
                Height="100"
                Fill="Blue">
                <Rectangle.Triggers>
                    <!-- Animates the rectangle's opacity. -->
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="MyRectangle" 
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:5" 
                                    AutoReverse="True" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </StackPanel>
    </Grid>
</Window>

ビューでフェードインおよびフェードアウトする四角形をコードで作成する方法を次に示します。The following shows how to create a rectangle that fades in and out of view in code.

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

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }
    }
}
Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As New DoubleAnimation()
        myDoubleAnimation.From = 1.0
        myDoubleAnimation.To = 0.0
        myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
        myDoubleAnimation.AutoReverse = True
        myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

        myStoryboard = New Storyboard()
        myStoryboard.Children.Add(myDoubleAnimation)
        Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
        Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

        ' Use the Loaded event to start the Storyboard.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

アニメーションの種類Animation Types

アニメーションはプロパティの値を生成するため、異なるプロパティの型ごとに異なるアニメーションの種類が存在します。Because animations generate property values, different animation types exist for different property types. 要素の Width プロパティなど、Doubleを受け取るプロパティをアニメーション化するには Double 値を生成するアニメーションを使用します。To animate a property that takes a Double, such as the Width property of an element, use an animation that produces Double values. Pointを受け取るプロパティをアニメーション化するには、Point 値を生成するアニメーションを使用します。To animate a property that takes a Point, use an animation that produces Point values, and so on. さまざまなプロパティの型の数が多いため、System.Windows.Media.Animation 名前空間にはいくつかのアニメーションクラスがあります。Because of the number of different property types, there are several animation classes in the System.Windows.Media.Animation namespace. 幸いにも、それらは厳密な名前付け規則に従っているため、簡単に区別できます。Fortunately, they follow a strict naming convention that makes it easy to differentiate between them:

  • <の種類> アニメーション<Type>Animation

    これらは "From/To/By" または "基本" アニメーションと呼ばれ、開始値と宛先値の間をアニメーション化するか、開始値にオフセット値を加算することでアニメーション化します。Known as a "From/To/By" or "basic" animation, these animate between a starting and destination value, or by adding an offset value to its starting value.

    • 開始値を指定するには、アニメーションの From プロパティを設定します。To specify a starting value, set the From property of the animation.

    • 終了値を指定するには、アニメーションの To プロパティを設定します。To specify an ending value, set the To property of the animation.

    • オフセット値を指定するには、アニメーションの By プロパティを設定します。To specify an offset value, set the By property of the animation.

    これらのアニメーションは最も簡単に使用できるため、この概要の例ではこれらを使っています。The examples in this overview use these animations, because they are the simplest to use. From/To/By アニメーションの詳細については、「From/To/By アニメーションの概要」を参照してください。From/To/By animations are described in detail in the From/To/By Animations Overview.

  • <の種類> のキーフレームの使い方<Type>AnimationUsingKeyFrames

    キー フレーム アニメーションは、任意の数のターゲット値を指定でき、補間方法も制御できるため、From/To/By アニメーションよりも強力です。Key frame animations are more powerful than From/To/By animations because you can specify any number of target values and even control their interpolation method. 一部の型は、キー フレーム アニメーションでのみアニメーション化できます。Some types can only be animated with key frame animations. キーフレームアニメーションの詳細については、 「キーフレームアニメーションの概要」を参照してください。Key frame animations are described in detail in the Key-Frame Animations Overview.

  • <の種類> アニメーションのパス<Type>AnimationUsingPath

    パス アニメーションでは、アニメーション値を生成するためにジオメトリック パスを使用できます。Path animations enable you to use a geometric path in order to produce animated values.

  • <の種類> アニメーションベース<Type>AnimationBase

    抽象クラス。これを実装すると、<> 値にアニメーション化されます。Abstract class that, when you implement it, animates a <Type> value. このクラスは、アニメーションの基本クラスとして機能し > アニメーションと <の >を使用して、キーフレームクラスを使用して <します。This class serves as the base class for <Type>Animation and <Type>AnimationUsingKeyFrames classes. これらのクラスは、ユーザー独自のカスタム アニメーションを作成する場合にのみ直接扱う必要があります。You have to deal directly with these classes only if you want to create your own custom animations. それ以外の場合は、<> アニメーションまたはキーフレーム<使用して > アニメーションを入力します。Otherwise, use a <Type>Animation or KeyFrame<Type>Animation.

ほとんどの場合、DoubleAnimationColorAnimationなどのアニメーションクラス > <を使用します。In most cases, you will want to use the <Type>Animation classes, such as DoubleAnimation and ColorAnimation.

次の表は、いくつかの一般的なアニメーションの種類と、そこで使われるいくつかのプロパティを示しています。The following table shows several common animation types and some properties with which they are used.

プロパティの型Property type 対応する基本 (From/To/By) アニメーションCorresponding basic (From/To/By) animation 対応するキー フレーム アニメーションCorresponding key frame animation 対応するパス アニメーションCorresponding Path Animation 使用例Usage example
Color ColorAnimation ColorAnimationUsingKeyFrames なしNone SolidColorBrush または GradientStopColor をアニメーション化します。Animate the Color of a SolidColorBrush or a GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath DockPanel または ButtonHeightWidth をアニメーション化します。Animate the Width of a DockPanel or the Height of a Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath EllipseGeometryCenter 位置をアニメーション化します。Animate the Center position of an EllipseGeometry.
String なしNone StringAnimationUsingKeyFrames なしNone TextBlock または ButtonContentText をアニメーション化します。Animate the Text of a TextBlock or the Content of a Button.

アニメーションはタイムラインであるAnimations Are Timelines

すべてのアニメーションの種類は、Timeline クラスから継承されます。したがって、すべてのアニメーションは特殊な種類のタイムラインです。All the animation types inherit from the Timeline class; therefore, all animations are specialized types of timelines. Timeline は、時間のセグメントを定義します。A Timeline defines a segment of time. タイムラインのタイミングの動作を指定するには、タイムラインの Duration、繰り返し回数、およびそれにかかる時間の短縮についても指定します。You can specify the timing behaviors of a timeline: its Duration, how many times it is repeated, and even how fast time progresses for it.

アニメーションは Timelineであるため、時間のセグメントも表します。Because an animation is a Timeline, it also represents a segment of time. また、アニメーションは、指定された時間 (または Duration) の進行状況に応じて出力値を計算します。An animation also calculates output values as it progresses through its specified segment of time (or Duration). アニメーションは、進行時、つまり "再生" 時に、関連付けられているプロパティを更新します。As the animation progresses, or "plays," it updates the property that it is associated with.

頻繁に使用される3つのタイミングプロパティは、DurationAutoReverse、および RepeatBehaviorです。Three frequently used timing properties are Duration, AutoReverse, and RepeatBehavior.

Duration プロパティThe Duration Property

既に述べたように、タイムラインは時間のセグメントを表します。As previously mentioned, a timeline represents a segment of time. セグメントの長さは、タイムラインの Duration によって決定されます。これは通常、TimeSpan 値を使用して指定されます。The length of that segment is determined by the Duration of the timeline, which is usually specified by using a TimeSpan value. タイムラインがその期間の最後に達すると、イテレーションが完了します。When a timeline reaches the end of its duration, it has completed an iteration.

アニメーションは、その Duration プロパティを使用して、現在の値を決定します。An animation uses its Duration property to determine its current value. アニメーションの Duration 値を指定しなかった場合は、既定の1秒が使用されます。If you do not specify a Duration value for an animation, it uses 1 second, which is the default.

次の構文は、Duration プロパティの Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) 属性構文の簡略化されたバージョンを示しています。The following syntax shows a simplified version of the Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) attribute syntax for the Duration property.

: : hours : minutes : seconds

次の表は、いくつかの Duration 設定とその結果値を示しています。The following table shows several Duration settings and their resulting values.

設定Setting 結果の値Resulting value
0:0:5.50:0:5.5 5.5 秒。5.5 seconds.
0:30:5.50:30:5.5 30 分 5.5 秒。30 minutes and 5.5 seconds.
1:30:5.51:30:5.5 1 時間 30 分 5.5 秒。1 hour, 30 minutes, and 5.5 seconds.

コードで Duration を指定する方法の1つとして、FromSeconds メソッドを使用して TimeSpanを作成し、その TimeSpanを使用して新しい Duration 構造体を宣言する方法があります。One way to specify a Duration in code is to use the FromSeconds method to create a TimeSpan, then declare a new Duration structure using that TimeSpan.

Duration 値と完全な Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) 構文の詳細については、Duration 構造体を参照してください。For more information about Duration values and the complete Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) syntax, see the Duration structure.

AutoReverseAutoReverse

AutoReverse プロパティは、タイムラインが Durationの末尾に達した後に戻るかどうかを指定します。The AutoReverse property specifies whether a timeline plays backward after it reaches the end of its Duration. このアニメーションのプロパティを trueに設定した場合、アニメーションは Durationの末尾に達した後で反転し、終了値から開始値まで再生されます。If you set this animation property to true, an animation reverses after it reaches the end of its Duration, playing from its ending value back to its starting value. 既定では、このプロパティは falseです。By default, this property is false.

RepeatBehaviorRepeatBehavior

RepeatBehavior プロパティは、タイムラインの再生回数を指定します。The RepeatBehavior property specifies how many times a timeline plays. 既定では、タイムラインには 1.0のイテレーション数が含まれています。これは、1回だけ再生され、繰り返されないことを意味します。By default, timelines have an iteration count of 1.0, which means they play one time and do not repeat at all.

これらのプロパティとその他のプロパティの詳細については、「タイミング動作の概要」を参照してください。For more information about these properties and others, see the Timing Behaviors Overview.

プロパティにアニメーションを適用するApplying an Animation to a Property

これまでのセクションでは、さまざまな種類のアニメーションとそれらのタイミング プロパティについて説明しました。The previous sections describe the different types of animations and their timing properties. このセクションでは、アニメーション化するプロパティにアニメーションを適用する方法を示します。This section shows how to apply the animation to the property that you want to animate. Storyboard オブジェクトは、アニメーションをプロパティに適用するための1つの方法を提供します。Storyboard objects provide one way to apply animations to properties. Storyboard は、含まれているアニメーションのターゲット情報を提供するコンテナータイムラインです。A Storyboard is a container timeline that provides targeting information for the animations it contains.

ターゲットとするオブジェクトとプロパティTargeting Objects and Properties

Storyboard クラスは、TargetName および TargetProperty 添付プロパティを提供します。The Storyboard class provides the TargetName and TargetProperty attached properties. アニメーションでこれらのプロパティを設定して、アニメーション化する内容をアニメーションに指示します。By setting these properties on an animation, you tell the animation what to animate. ただし、アニメーションがオブジェクトをターゲット指定するには、通常その前にオブジェクの名前を指定する必要があります。However, before an animation can target an object, the object must usually be given a name.

FrameworkElement への名前の割り当ては、Freezable オブジェクトへの名前の割り当てとは異なります。Assigning a name to a FrameworkElement differs from assigning a name to a Freezable object. ほとんどのコントロールとパネルはフレームワーク要素ですが、ブラシ、変換、ジオメトリなどのほとんどの純粋なグラフィカル オブジェクトは Freezable オブジェクトです。Most controls and panels are framework elements; however, most purely graphical objects, such as brushes, transforms, and geometries, are freezable objects. 型が FrameworkElement であるか Freezableであるかわからない場合は、リファレンスドキュメントの「継承階層」セクションを参照してください。If you are not sure whether a type is a FrameworkElement or a Freezable, refer to the Inheritance Hierarchy section of its reference documentation.

  • アニメーションターゲット FrameworkElement を作成するには、その Name プロパティを設定して名前を指定します。To make a FrameworkElement an animation target, you give it a name by setting its Name property. コードでは、RegisterName メソッドを使用して、要素名を所属するページに登録する必要もあります。In code, you must also use the RegisterName method to register the element name with the page to which it belongs.

  • Freezable オブジェクトを XAMLXAMLのアニメーションターゲットにするには、 X:Name ディレクティブを使用して名前を割り当てます。To make a Freezable object an animation target in XAMLXAML, you use the x:Name Directive to assign it a name. コードでは、RegisterName メソッドを使用して、オブジェクトが属しているページにオブジェクトを登録するだけです。In code, you just use the RegisterName method to register the object with the page to which it belongs.

以下のセクションでは、XAMLXAML とコードで要素に名前を付ける例を示します。The sections that follow provide an example of naming an element in XAMLXAML and code. 名前付けとターゲット設定の詳細については、「ストーリーボードの概要」を参照してください。For more detailed information about naming and targeting, see the Storyboards Overview.

ストーリーボードの適用と開始Applying and Starting Storyboards

XAMLXAMLでストーリーボードを開始するには、ストーリーボードを EventTriggerに関連付けます。To start a storyboard in XAMLXAML, you associate it with an EventTrigger. EventTrigger は、指定されたイベントが発生したときに実行するアクションを記述するオブジェクトです。An EventTrigger is an object that describes what actions to take when a specified event occurs. これらのアクションの1つに、ストーリーボードを開始するために使用する BeginStoryboard アクションを指定できます。One of those actions can be a BeginStoryboard action, which you use to start your storyboard. イベント トリガーは、アプリケーションが特定のイベントに応答する方法を指定できるようにするため、概念はイベント ハンドラーに似ています。Event triggers are similar in concept to event handlers because they enable you to specify how your application responds to a particular event. イベントハンドラーとは異なり、イベントトリガーは XAMLXAMLで完全に記述できます。他のコードは必要ありません。Unlike event handlers, event triggers can be fully described in XAMLXAML; no other code is required.

コードで Storyboard を開始するには、EventTrigger を使用するか、Storyboard クラスの Begin メソッドを使用します。To start a Storyboard in code, you can use an EventTrigger or use the Begin method of the Storyboard class.

ストーリーボードを対話的に制御するInteractively Control a Storyboard

前の例では、イベントが発生したときに Storyboard を開始する方法を示しました。The previous example showed how to start a Storyboard when an event occurs. また、開始後に Storyboard を対話形式で制御することもできます。これにより、一時停止、再開、停止、塗りつぶし期間への先行、シーク、Storyboardの削除を行うことができます。You can also interactively control a Storyboard after it starts: you can pause, resume, stop, advance it to its fill period, seek, and remove the Storyboard. Storyboardを対話的に制御する方法の詳細と例については、「ストーリーボードの概要」を参照してください。For more information and an example that shows how to interactively control a Storyboard, see the Storyboards Overview.

アニメーションの終了後の動作What Happens After an Animation Ends?

FillBehavior プロパティは、タイムラインが終了したときの動作を指定します。The FillBehavior property specifies how a timeline behaves when it ends. 既定では、タイムラインは終了時に Filling 開始されます。By default, a timeline starts Filling when it ends. Filling のアニメーションは、最終的な出力値を保持します。An animation that is Filling holds its final output value.

RepeatBehavior プロパティが Foreverに設定されているため、前の例の DoubleAnimation は終了しません。The DoubleAnimation in the previous example does not end because its RepeatBehavior property is set to Forever. 次の例では、類似のアニメーションを使って四角形をアニメーション化します。The following example animates a rectangle by using a similar animation. 前の例とは異なり、このアニメーションの RepeatBehaviorAutoReverse のプロパティは既定値のままです。Unlike the previous example, the RepeatBehavior and AutoReverse properties of this animation are left at their default values. したがって、アニメーションは 5 秒間で 1 から 0 まで進行し、停止します。Therefore, the animation progresses from 1 to 0 over five seconds and then stops.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

FillBehaviorHoldEndの既定値から変更されていないため、アニメーションは終了時に最終的な値0を保持します。Because its FillBehavior was not changed from its default value, which is HoldEnd, the animation holds its final value, 0, when it ends. したがって、アニメーションが終了した後も四角形の Opacity は0のままです。Therefore, the Opacity of the rectangle remains at 0 after the animation ends. 四角形の Opacity を別の値に設定した場合、アニメーションはまだ Opacity プロパティに影響しているので、コードは効果がないように見えます。If you set the Opacity of the rectangle to another value, your code appears to have no effect, because the animation is still affecting the Opacity property.

コードでアニメーション化されたプロパティを再び制御する方法の1つとして、BeginAnimation メソッドを使用し、AnimationTimeline パラメーターに null を指定する方法があります。One way to regain control of an animated property in code is to use the BeginAnimation method and specify null for the AnimationTimeline parameter. 詳細と例については、「ストーリーボードを使用してアニメーション化した後にプロパティを設定する」を参照してください。For more information and an example, see Set a Property After Animating It with a Storyboard.

Active または Filling アニメーションを持つプロパティ値を設定しても効果はありませんが、プロパティ値は変更されることに注意してください。Note that, although setting a property value that has an Active or Filling animation appears to have no effect, the property value does change. 詳細については、「アニメーションとタイミングシステムの概要」を参照してください。For more information, see the Animation and Timing System Overview.

アニメーションのデータ バインディングとアニメーション化Data Binding and Animating Animations

ほとんどのアニメーションプロパティは、データバインドまたはアニメーション化できます。たとえば、DoubleAnimationDuration プロパティをアニメーション化できます。Most animation properties can be data bound or animated; for example, you can animate the Duration property of a DoubleAnimation. ただし、タイミング システムの動作が原因で、データ バインドまたはアニメーション化されたアニメーションは他のデータ バインドまたはアニメーション化されたオブジェクトと同様には動作しません。However, because of the way the timing system works, data bound or animated animations do not behave like other data bound or animated objects. その動作を理解するには、アニメーションをプロパティに適用する意味を理解することが役立ちます。To understand their behavior, it helps to understand what it means to apply an animation to a property.

四角形の Opacity をアニメーション化する方法については、前のセクションの例を参照してください。Refer to the example in the previous section that showed how to animate the Opacity of a rectangle. 前の例の四角形が読み込まれると、そのイベントトリガーによって Storyboardが適用されます。When the rectangle in the previous example is loaded, its event trigger applies the Storyboard. タイミングシステムは、Storyboard とそのアニメーションのコピーを作成します。The timing system creates a copy of the Storyboard and its animation. これらのコピーは固定され (読み取り専用になり)、Clock オブジェクトがそれらから作成されます。These copies are frozen (made read-only) and Clock objects are created from them. これらのクロックは、ターゲット プロパティをアニメーション化する実際の作業を実行します。These clocks do the actual work of animating the targeted properties.

タイミングシステムによって DoubleAnimation のクロックが作成され、DoubleAnimationTargetNameTargetProperty によって指定されたオブジェクトおよびプロパティに適用されます。The timing system creates a clock for the DoubleAnimation and applies it to the object and property that is specified by the TargetName and TargetProperty of the DoubleAnimation. この場合、タイミングシステムは、"MyRectangle" という名前のオブジェクトの Opacity プロパティに時計を適用します。In this case, the timing system applies the clock to the Opacity property of the object that is named "MyRectangle."

Storyboardのクロックも作成されますが、時計はプロパティには適用されません。Although a clock is also created for the Storyboard, the clock is not applied to any properties. その目的は、DoubleAnimationに対して作成される時計である子クロックを制御することです。Its purpose is to control its child clock, the clock that is created for the DoubleAnimation.

アニメーションがデータ バインディングまたはアニメーションの変更を反映するためには、そのクロックを再生成する必要があります。For an animation to reflect data binding or animation changes, its clock must be regenerated. クロックは、自動的には再生成されません。Clocks are not regenerated for you automatically. アニメーションに変更を反映させるには、BeginStoryboard または Begin メソッドを使用して、そのストーリーボードを再適用します。To make an animation reflect changes, reapply its storyboard by using a BeginStoryboard or the Begin method. これらのメソッドのいずれかを使うと、アニメーションが再起動されます。When you use either of these methods, the animation restarts. コードでは、Seek メソッドを使用して、ストーリーボードを前の位置に戻すことができます。In code, you can use the Seek method to shift the storyboard back to its previous position.

データバインドされたアニメーションの例については、「キースプラインアニメーションのサンプル」を参照してください。For an example of a data bound animation, see Key Spline Animation Sample. アニメーションとタイミングシステムの動作の詳細については、「アニメーションとタイミングシステムの概要」を参照してください。For more information about how the animation and timing system works, see Animation and Timing System Overview.

その他のアニメーション化方法Other Ways to Animate

この概要の例では、ストーリーボードを使ってアニメーション化する方法を示します。The examples in this overview show how to animate by using storyboards. コードを使う場合は、その他のいくつかの方法でアニメーション化できます。When you use code, you can animate in several other ways. 詳細については、「プロパティアニメーションの手法の概要」を参照してください。For more information, see the Property Animation Techniques Overview.

アニメーションのサンプルAnimation Samples

以下のサンプルは、アプリケーションへのアニメーションの追加を開始するのに役立つ場合があります。The following samples can help you start adding animation to your applications.

タイトルTitle 説明Description
アニメーションとタイミング システムの概要Animation and Timing System Overview タイミングシステムが Timeline クラスと Clock クラスを使用して、アニメーションを作成できるようにする方法について説明します。Describes how the timing system uses the Timeline and Clock classes, which allow you to create animations.
アニメーションのヒントとテクニックAnimation Tips and Tricks パフォーマンスなど、アニメーションでの問題を解決するための役に立つヒントの一覧を示します。Lists helpful tips for solving issues with animations, such as performance.
カスタム アニメーションの概要Custom Animations Overview アニメーション システムをキー フレーム、アニメーション クラス、またはフレームごとのコールバックで拡張する方法について説明します。Describes how to extend the animation system with key frames, animation classes, or per-frame callbacks.
From/To/By アニメーションの概要From/To/By Animations Overview 2 つの値の間を遷移するアニメーションを作成する方法について説明します。Describes how to create an animation that transitions between two values.
キー フレーム アニメーションの概要Key-Frame Animations Overview 補間メソッドを制御する機能など、複数のターゲット値を持つアニメーションを作成する方法について説明します。Describes how to create an animation with multiple target values, including the ability to control the interpolation method.
イージング関数Easing Functions 数式をアニメーションに適用してバウンスなどの現実的な動作を実現する方法について説明します。Explains how to apply mathematical formulas to your animations to get realistic behavior, such as bouncing.
パス アニメーションの概要Path Animations Overview 複雑なパスに沿ってオブジェクトを移動または回転する方法について説明します。Describes how to move or rotate an object along a complex path.
プロパティ アニメーションの手法の概要Property Animation Techniques Overview ストーリーボード、ローカル アニメーション、クロック、フレームごとのアニメーションを使ったプロパティのアニメーションについて説明します。Describes property animations using storyboards, local animations, clocks, and per-frame animations.
ストーリーボードの概要Storyboards Overview 複数のタイムラインを持つストーリーボードを使って複雑なアニメーションを作成する方法について説明します。Describes how to use storyboards with multiple timelines to create complex animations.
タイミング動作の概要Timing Behaviors Overview アニメーションで使用される Timeline の型とプロパティについて説明します。Describes the Timeline types and properties used in animations.
タイミング イベントの概要Timing Events Overview 開始、一時停止、再開、スキップ、停止など、タイムラインのポイントでコードを実行するために Timeline および Clock オブジェクトで使用できるイベントについて説明します。Describes the events available on the Timeline and Clock objects for executing code at points in the timeline, such as begin, pause, resume, skip, or stop.
方法のトピックHow-to Topics アプリケーションでアニメーションとタイムラインを使うためのコード例を示します。Contains code examples for using animations and timelines in your application.
クロックに関する「方法」トピックClocks How-to Topics アプリケーションで Clock オブジェクトを使用するためのコード例が含まれています。Contains code examples for using the Clock object in your application.
キー フレームに関する「方法」トピックKey-Frame How-to Topics アプリケーションでキー フレーム アニメーションを使うためのコード例を示します。Contains code examples for using key-frame animations in your application.
パス アニメーションに関する「方法」トピックPath Animation How-to Topics アプリケーションでパス アニメーションを使うためのコード例を示します。Contains code examples for using path animations in your application.

参照Reference