アニメーションの概要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.

前のバージョンWPFWPFMicrosoft WindowsMicrosoft Windows開発者は、作成し、独自のタイミング システムを管理または特殊なカスタム ライブラリを使用する必要があります。Prior to WPFWPF, Microsoft WindowsMicrosoft 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フレームワーク。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. たとえば、フレームワーク要素を拡張するために、アニメーション化する、WidthHeightプロパティ。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、またPanelShapeオブジェクトから継承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値をアニメーション化する、OpacityのプロパティをRectangleします。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.

作成する方法を次に示します、Rectangle内の要素をStackPanelXAML でします。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>

作成する方法を次に示します、Rectangle内の要素をStackPanelコード。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. ADoubleAnimationはこのようなアニメーションを 1 つです。A DoubleAnimation is one such animation. A DoubleAnimation 2 つの倍精度値間の遷移を作成します。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.00.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. 作成する方法を次に示します、 DoubleAnimation XAML でします。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. 設定する方法を次に示します、Durationを XAML で 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.00.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プロパティをアニメーションのtrueTo 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. 設定する方法を次に示します、AutoReverseRepeatBehaviorXAML のプロパティ。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を使用して、TargetNameTargetPropertyオブジェクトを指定するプロパティとアニメーション化するプロパティをアタッチします。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. 作成する方法を次に示します、 Storyboard XAML でします。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. ターゲットの名前を設定する方法を次に示します、DoubleAnimationMyRectangleXAML でします。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>
    

    ターゲットの名前を設定する方法を次に示します、DoubleAnimationMyRectangleコード。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. アニメーションを構成する方法を次に示しますターゲットに、Opacityのプロパティ、 Rectangle XAML でします。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>
    

    アニメーションを構成する方法を次に示しますターゲットに、Opacityのプロパティ、Rectangleコード。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

適用して開始する最も簡単な方法をStoryboardXAMLXAMLイベント トリガーを使用することです。The easiest way to apply and start a Storyboard in XAMLXAML is to use an event trigger. このセクションに関連付ける方法を示しています、 Storyboard XAML でトリガーを使用します。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. ABeginStoryboardの種類は、TriggerActionを適用し、開始、Storyboardします。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を追加し、BeginStoryboardにそのActionsコレクション。Create an EventTrigger and add the BeginStoryboard to its Actions collection. 設定、RoutedEventのプロパティ、EventTriggerを開始するルーティング イベントに、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. 追加、EventTriggerTriggers四角形のコレクション。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. 受け取るプロパティをアニメーション化する、Doubleなど、 Width 、要素のプロパティを生成するアニメーションを使用して、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/を/、アニメーションは、From/To/By アニメーションの概要で詳しく説明します。From/To/By animations are described in detail in the From/To/By Animations Overview.

  • <> AnimationUsingKeyFrames<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.

  • <> AnimationUsingPath<Type>AnimationUsingPath

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

  • <> AnimationBase<Type>AnimationBase

    それを実装するときにアニメーション化する抽象クラス、 <> 値。Abstract class that, when you implement it, animates a <Type> value. このクラスの基本クラスとして機能<> アニメーションと<> AnimationUsingKeyFrames クラス。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. それ以外の場合、使用、 <> Animation または KeyFrame<> アニメーション。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 アニメーション化する、ColorSolidColorBrushまたはGradientStopします。Animate the Color of a SolidColorBrush or a GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath アニメーション化する、WidthDockPanelまたはHeightButtonします。Animate the Width of a DockPanel or the Height of a Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath アニメーション化する、Centerの位置、EllipseGeometryします。Animate the Center position of an EllipseGeometry.
String なしNone StringAnimationUsingKeyFrames なしNone アニメーション化する、TextTextBlockまたはContentButtonします。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. ATimeline時間のセグメントを定義します。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.

次の構文の簡略化されたバージョンを示しています、Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)属性の構文、Durationプロパティ。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.

指定する方法の 1 つ、Durationコードでは使用する、FromSecondsを作成する方法、 TimeSpan、宣言し、新しいDurationを使用している構造体TimeSpanします。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、いずれかの再生、つまり時間、まったく、繰り返されない。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. AStoryboardは、コンテナー タイムラインが含まれているアニメーションのターゲットの情報を提供します。A Storyboard is a container timeline that provides targeting information for the animations it contains.

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

Storyboardクラスには、TargetNameTargetProperty添付プロパティ。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. これらのアクションのいずれかを指定できます、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を使用して、または、Beginのメソッド、Storyboardクラス。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.

DoubleAnimation前の例で終わらないためそのRepeatBehaviorプロパティに設定されてForeverします。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))

ため、そのFillBehaviorは既定値から変更されていないHoldEnd、終了時に、アニメーションがその最終値 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メソッドに null を指定し、AnimationTimelineパラメーター。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

ほとんどのアニメーション プロパティがデータ バインドまたはアニメーション化できます。たとえば、アニメーション化できます、DurationのプロパティをDoubleAnimationします。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オブジェクトとで指定されているプロパティに適用し、TargetNameTargetPropertyDoubleAnimationします。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. タイミング システムにクロックを適用する、ここで、 Opacity "MyRectangle"という名前のオブジェクトのプロパティ。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 タイミング システムの使用方法について説明します、TimelineClockクラスで、使用するアニメーションを作成できます。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 使用できるイベントについて説明します、TimelineClockなど、タイムラインのポイントでコードを実行するためのオブジェクトを開始、一時停止、再開、スキップ、または停止します。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