From/To/By アニメーションの概要From/To/By Animations Overview

このトピックでは、From/To/By アニメーションを使って依存関係プロパティをアニメーション化する方法を説明します。This topic describes how to use From/To/By animations to animate dependency properties. From/To/By アニメーションでは、2 つの値の間の遷移が作成されます。A From/To/By animation creates a transition between two values.

前提条件Prerequisites

このトピックを理解するには、WPFWPF アニメーション機能について理解しておく必要があります。To understand this topic, you should be familiar with WPFWPF animations features. アニメーション機能の概要については、「アニメーションの概要」を参照してください。For an introduction to animation features, see the Animation Overview.

From/To/By アニメーションとはWhat Is a From/To/By Animation?

From/To/By アニメーションは、開始値と終了値の間の遷移を作成する AnimationTimeline の一種です。A From/To/By animation is a type of AnimationTimeline that creates a transition between a starting value and an ending value. 遷移が完了するまでにかかる時間は、そのアニメーションの Duration によって決まります。The amount of time that the transition takes to complete is determined by the Duration of that animation.

マークアップとコードの Storyboard を使用するか、コードで BeginAnimation メソッドを使用することにより、プロパティに From/To/By アニメーションを適用できます。You can apply a From/To/By animation to a property by using a Storyboard in markup and code, or by using the BeginAnimation method in code. また、From/To/By アニメーションを使用して AnimationClock を作成し、1つまたは複数のプロパティに適用することもできます。You may also use a From/To/By Animation to create an AnimationClock and apply it to one or more properties. アニメーションを適用するためのさまざまなメソッドの詳細については、「プロパティ アニメーションの手法の概要」を参照してください。For more information about the different methods for applying animations, see the Property Animation Techniques Overview.

From/To/By アニメーションは、2 つのターゲット値以外の値を持つことはできません。From/To/By animations can have no more than two target values. 3 つ以上のターゲット値を持つアニメーションを必要とする場合は、キー フレーム アニメーションを使います。If you require an animation that has more than two target values, use a key-frame animation. キーフレームアニメーションについては、「キーフレームアニメーションの概要」を参照してください。Key-frame animations are described in the Key-Frame Animations Overview.

From/To/By アニメーションの種類From/To/By Animation Types

アニメーションはプロパティ値を生成するため、プロパティの型ごとに異なるアニメーションの種類があります。Because animations generate property values, there are different animation types 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.

From/To/By アニメーションクラスは System.Windows.Media.Animation 名前空間に属し、次の名前付け規則を使用します。From/To/By animation classes belong to the System.Windows.Media.Animation namespace and use the following naming convention:

<の種類 > Animation<Type> Animation

ここで、 <Type> は、クラスがアニメーション化する値の型です。Where <Type> is the type of value that the class animates.

WPFWPF には、次の From/To/By アニメーション クラスが用意されています。provides the following From/To/By animation classes.

プロパティの種類Property type 対応する From/To/By アニメーションのクラスCorresponding From/To/By animation class
Byte ByteAnimation
Color ColorAnimation
Decimal DecimalAnimation
Double DoubleAnimation
Int16 Int16Animation
Int32 Int32Animation
Int64 Int64Animation
Point PointAnimation
Quaternion QuaternionAnimation
Rect RectAnimation
Rotation3D Rotation3DAnimation
Single SingleAnimation
Size SizeAnimation
Thickness ThicknessAnimation
Vector3D Vector3DAnimation
Vector VectorAnimation

ターゲット値Target Values

From/To/By アニメーションでは、2 つのターゲット値の間の遷移が作成されます。A From/To/By animation creates a transition between two target values. 通常は、開始値 (From プロパティを使用して設定) と終了値 (To プロパティを使用して設定) を指定します。It is common to specify a starting value (set it by using the From property) and an ending value (set it by using the To property). ただし、開始値、終了値、またはオフセット値のみを指定することもできます。However, you can also specify only a starting value, a destination value, or an offset value. これらの場合、アニメーションは不足しているターゲット値をアニメーション化するプロパティから取得します。In these cases, the animation obtains the missing target value from the property that is being animated. 次の一覧では、アニメーションのターゲット値を指定する方法について説明します。The following list describes the different ways to specify the target values of an animation.

  • 開始値Starting Value

    アニメーションの開始値を明示的に指定する場合は、From プロパティを使用します。Use the From property when you want to explicitly specify the starting value of an animation. From プロパティは、単独で使用することも、To または By プロパティと共に使用することもできます。You can use the From property by itself, or with the To or By property. From プロパティのみを指定すると、アニメーションはその値からアニメーション化されたプロパティの基本値に遷移します。If you specify only the From property, the animation transitions from that value to the base value of the animated property.

  • 終了値Ending Value

    アニメーションの終了値を指定するには、その To プロパティを使用します。To specify an ending value of an animation, use its To property. To プロパティを単独で使用する場合、アニメーションは、アニメーション化されているプロパティ、または同じプロパティに適用されている別のアニメーションの出力から開始値を取得します。If you use the To property by itself, the animation obtains its starting value from the property that is being animated or from the output of another animation that is applied to the same property. From プロパティと共に To プロパティを使用して、アニメーションの開始値と終了値を明示的に指定できます。You can use the To property together with the From property to explicitly specify starting and ending values for the animation.

  • オフセット値Offset Value

    By プロパティを使用すると、アニメーションの開始値または終了値の明示的な値ではなくオフセットを指定できます。The By property enables you to specify an offset instead of an explicit starting or ending value for the animation. アニメーションの By プロパティは、アニメーションがその期間にわたって値を変更する量を指定します。The By property of an animation specifies by how much the animation changes a value over its duration. By プロパティは、単独で、または From プロパティで使用できます。You can use the By property by itself or with the From property. By プロパティのみを指定すると、アニメーションは、プロパティの基本値または別のアニメーションの出力にオフセット値を追加します。If you specify only the By property, the animation adds the offset value to the base value of the property or to the output of another animation.

From/To/By 値の使用Using From/To/By Values

次のセクションでは、FromTo、および By の各プロパティを一緒に使用する方法、または個別に使用する方法について説明します。The following sections describe how to use the From, To, and By properties together or separately.

このセクションの例では、DoubleAnimationを使用します。これは、From/To/By アニメーションの一種であり、10デバイス非依存ピクセルの高さが10で、デバイスに依存しないピクセルが100である RectangleWidth プロパティをアニメーション化します。The examples in this section each use a DoubleAnimation, which is a type of From/To/By animation, to animate the Width property of a Rectangle that is 10 device independent pixels high and 100 device independent pixels wide.

各例では DoubleAnimationを使用しますが、from/To/By アニメーションの From、To、および By の各プロパティは同じように動作します。Although each example uses a DoubleAnimation, the From, To, and By properties of all From/To/By animations behave identically. これらの各例では Storyboardを使用しますが、From/To/By アニメーションを他の方法で使用することもできます。Although each of these examples uses a Storyboard, you can use From/To/By animations in other ways. 詳細については、「プロパティアニメーションの手法の概要」を参照してください。For more information, see Property Animation Techniques Overview.

送信元/送信先From/To

FromTo 値を一緒に設定すると、アニメーションは From プロパティによって指定された値から To プロパティによって指定された値に進みます。When you set the From and To values together, the animation progresses from the value that is specified by the From property, to the value that is specified by the To property.

次の例では、DoubleAnimationFrom プロパティを50に、その To プロパティを300に設定しています。The following example sets the From property of the DoubleAnimation to 50 and its To property to 300. その結果、RectangleWidth は50から300にアニメーション化されます。As a result, the Width of the Rectangle is animated from 50 to 300.

// Demonstrates the From and To properties used together.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "fromToAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Black;

// Demonstrates the From and To properties used together.
// Animates the rectangle's Width property from 50 to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };
' Demonstrates the From and To properties used together.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("fromToAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Black

' Demonstrates the From and To properties used together.
' Animates the rectangle's Width property from 50 to 300 over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

目的To

To プロパティのみを設定すると、アニメーションは、アニメーション化されたプロパティの基本値、または同じプロパティに以前に適用されていた作成中のアニメーションの出力から、To プロパティで指定された値に進みます。When you set just the To property, the animation progresses from the base value of the animated property, or from the output of a composing animation that was previously applied to the same property, to the value that is specified by the To property.

("アニメーションの作成" とは、前に Compose ハンドオフ動作を使用して現在のアニメーションが適用されていた場合に有効な、同じプロパティに以前に適用された Active または Filling のアニメーションを指します)。("Composing animation" refers to an Active or Filling animation that previously applied to the same property that is still in effect when the current animation was applied by using the Compose handoff behavior.)

次の例では、DoubleAnimationTo プロパティのみを300に設定します。The following example sets just the To property of the DoubleAnimation to 300. 開始値が指定されていないため、DoubleAnimationWidth プロパティの基本値 (100) を開始値として使用します。Because no starting value was specified, the DoubleAnimation uses the base value (100) of the Width property as its starting value. RectangleWidth は、100からアニメーションのターゲット値300にアニメーション化されます。The Width of the Rectangle is animated from 100 to the animation's target value of 300.

// Demonstrates the use of the To property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "toAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Gray;

// Demonstrates the To property used by itself. Animates
// the Rectangle's Width property from its base value
// (100) to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };
' Demonstrates the use of the To property.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("toAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Gray

' Demonstrates the To property used by itself. Animates
' the Rectangle's Width property from its base value
' (100) to 300 over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

By

アニメーションの By プロパティのみを設定すると、アニメーションは、アニメーション化されているプロパティの基本値、または作成中のアニメーションの出力から、その値と By プロパティで指定された値の合計まで進行します。When you set just the By property of an animation, the animation progresses from the base value of the property that is being animated, or from the output of a composing animation to the sum of that value and the value that is specified by the By property.

次の例では、DoubleAnimationBy プロパティのみを300に設定します。The following example sets just the By property of the DoubleAnimation to 300. この例では開始値が指定されていないため、DoubleAnimationWidth プロパティ100の基本値を開始値として使用します。Because the example does not specify a starting value, the DoubleAnimation uses the base value of the Width property, 100, as its starting value. 終了値は、アニメーション300の By 値を開始値 100: 400 に追加することによって決定されます。The ending value is determined by adding the By value of the animation, 300, to its starting value, 100: 400. その結果、RectangleWidth は100から400にアニメーション化されます。As a result, the Width of the Rectangle is animated from 100 to 400.

// Demonstrates the use of the By property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.RoyalBlue;

// Demonstrates the By property used by itself.
// Increments the Rectangle's Width property by 300 over 10 seconds.
// As a result, the Width property is animated from its base value
// (100) to 400 (100 + 300) over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };
' Demonstrates the use of the By property.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("byAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.RoyalBlue

' Demonstrates the By property used by itself.
' Increments the Rectangle's Width property by 300 over 10 seconds.
' As a result, the Width property is animated from its base value
' (100) to 400 (100 + 300) over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

From/ByFrom/By

アニメーションの FromBy のプロパティを設定すると、アニメーションは From プロパティによって指定された値から、From および By プロパティの合計で指定された値に進みます。When you set the From and By properties of an animation, the animation progresses from the value that is specified by the From property, to the value that is specified by the sum of the From and By properties.

次の例では、DoubleAnimationFrom プロパティを50に、その By プロパティを300に設定しています。The following example sets the From property of the DoubleAnimation to 50 and its By property to 300. 終了値は、アニメーション300の By 値を開始値 50: 350 に追加することによって決定されます。The ending value is determined by adding the By value of the animation, 300, to its starting value, 50: 350. その結果、RectangleWidth は50から350にアニメーション化されます。As a result, the Width of the Rectangle is animated from 50 to 350.

// Demonstrates the use of the From and By properties.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.BlueViolet;

// Demonstrates the From and By properties used together.
// Increments the Rectangle's Width property by 300 over 10 seconds.
// As a result, the Width property is animated from 50
// to 350 (50 + 300) over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };
' Demonstrates the use of the From and By properties.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("byAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.BlueViolet

' Demonstrates the From and By properties used together.
' Increments the Rectangle's Width property by 300 over 10 seconds.
' As a result, the Width property is animated from 50
' to 350 (50 + 300) over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

ソースFrom

アニメーションの From の値のみを指定すると、アニメーションは、From プロパティで指定された値から、アニメーション化されるプロパティの基本値、または作成中のアニメーションの出力に進行します。When you specify just the From value of an animation, the animation progresses from the value that is specified by the From property, to the base value of the property that is being animated or to the output of a composing animation.

次の例では、DoubleAnimationFrom プロパティのみを50に設定します。The following example sets just the From property of the DoubleAnimation to 50. 終了値が指定されていないため、DoubleAnimationWidth プロパティ100の基本値を終了値として使用します。Because no ending value was specified, the DoubleAnimation uses the base value of the Width property, 100, as its ending value. RectangleWidth は、50から、Width プロパティ100の基本値にアニメーション化されます。The Width of the Rectangle is animated from 50 to the base value of the Width property, 100.

// Demonstrates the use of the From property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "fromAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Purple;

// Demonstrates the From property used by itself. Animates the
// rectangle's Width property from 50 to its base value (100)
// over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };
' Demonstrates the use of the From property.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("fromAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Purple

' Demonstrates the From property used by itself. Animates the
' rectangle's Width property from 50 to its base value (100)
' over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

To/ByTo/By

アニメーションの ToBy の両方のプロパティを設定した場合、By プロパティは無視されます。If you set both the To and the By properties of an animation, the By property is ignored.

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

From/To/By アニメーションは、WPFWPF が提供するアニメーションの唯一の種類ではありません。キーフレームアニメーションとパスアニメーションも用意されています。From/To/By animations are not the only type of animations that WPFWPF provides: it also provides key-frame animations and path animations.

WPFWPF では、独自のカスタム アニメーションの種類を作成することもできます。also enables you to create your own custom animation types. 詳細については、「カスタムアニメーションの概要」を参照してください。For more information, see the Custom Animations Overview.

参照See also