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

ここでは、From/To/By アニメーションを使用して依存関係プロパティをアニメーション化する方法について説明します。 From/To/By アニメーションでは、2 つの値の間の遷移が作成されます。

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

必要条件

このトピックを理解するには、WPF のアニメーション機能に精通している必要があります。 アニメーション機能の概要については、「アニメーションの概要」を参照してください。

From/To/By アニメーションとは

From/To/By アニメーションは、開始値と終了値の間の遷移を作成する AnimationTimeline の一種です。 遷移の完了に要する時間は、そのアニメーションの Duration によって決まります。

マークアップとコードで Storyboard を使用することにより、またはコードで BeginAnimation メソッドを使用することで、From/To/By アニメーションをプロパティに適用できます。 また、From/To/By アニメーションを使用して AnimationClock を作成し、1 つ以上のプロパティに適用することもできます。 アニメーションを適用するさまざまな方法の詳細については、「プロパティ アニメーションの手法の概要」を参照してください。

From/To/By アニメーションで指定できるターゲット値は 2 つまでです。 3 つ以上のターゲット値を持つアニメーションが必要な場合は、キー フレーム アニメーションを使用してください。 キー フレーム アニメーションについては、「キー フレーム アニメーションの概要」を参照してください。

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

アニメーションによってプロパティ値が生成されるため、さまざまなプロパティ型に対応するさまざまな種類のアニメーションが存在します。 Double を受け取るプロパティ (要素の Width プロパティなど) をアニメーション化するには、Double 値を生成するアニメーションを使用します。 Point を受け取るプロパティをアニメーション化するには、Point 値を生成するアニメーションを使用します。他も同様です。

From/To/By アニメーション クラスは System.Windows.Media.Animation 名前空間に属し、次の名前付け規則を使用します。

*<Type>*Animation

ここで、<Type> はクラスによってアニメーション化される値の型です。

WPF には、次の From/To/By アニメーション クラスが用意されています。

プロパティの型	対応する From/To/By アニメーション クラス
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

ターゲット値

From/To/By アニメーションでは、2 つのターゲット値の間の遷移が作成されます。 開始値 (From プロパティを使用して設定) と終了値 (To プロパティを使用して設定) を指定するのが一般的です。 ただし、開始値だけ、終点の値だけ、またはオフセット値だけを指定することもできます。 これらの場合、アニメーションは、足りないターゲット値をアニメーション化しているプロパティから取得します。 アニメーションのターゲット値を指定するさまざまな方法を次に示します。

• 開始値

  アニメーションの開始値を明示的に指定する場合は、From プロパティを使用します。 From プロパティだけで使用することも、To プロパティまたは By プロパティと共に使用することもできます。 From プロパティだけを指定した場合は、アニメーションはその値から、アニメーション化されているプロパティの基本値まで遷移します。

• 終了値

  アニメーションの終了値を指定するには、To プロパティを使用します。 To プロパティだけを使用すると、アニメーションは開始値を、アニメーション化されているプロパティから、または同じプロパティに適用されている別のアニメーションから取得します。 To プロパティと From プロパティを一緒に使用することで、アニメーションの開始値と終了値を明示的に指定できます。

• オフセット値

  By プロパティを使用すると、アニメーションの明示的な開始値と終了値の代わりに、オフセットを指定できます。 アニメーションの By プロパティは、継続時間中にアニメーションが変更する値の大きさを指定します。 By プロパティだけで使用することも、From プロパティと共に使用することもできます。 By プロパティだけを指定した場合は、プロパティの基本値または別のアニメーションの出力に、オフセット値が追加されます。

From/To/By 値の使用

以下では、From、To、By の各プロパティを、一緒に、または個別に使用する方法を説明します。

このセクションの各例では、From/To/By アニメーションの一種である DoubleAnimation を使用し、高さが 10 デバイス非依存ピクセルで幅が 100 デバイス非依存ピクセルの Rectangle の Width プロパティをアニメーション化します。

各例では DoubleAnimation を使用しますが、すべての From/To/By アニメーションの From、To、By プロパティの動作はまったく同じです。 これらの例では Storyboard を使用しますが、別の方法で From/To/By アニメーションを使用することもできます。 詳細については、「プロパティ アニメーションの手法の概要」を参照してください。

From/To

From 値と To 値を設定すると、アニメーションは、From プロパティで指定されている値から、To プロパティで指定されている値まで進行します。

次の例では、DoubleAnimation の From プロパティを 50 に設定し、To プロパティを 300 に設定しています。 その結果、Rectangle の Width は、50 から 300 までアニメーション化されます。

            ' 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)

// 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. -->
<Rectangle Name="fromToAnimatedRectangle"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="Black">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>
        <!-- Demonstrates the From and To properties used together.
               Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
        <DoubleAnimation 
          Storyboard.TargetName="fromToAnimatedRectangle" 
          Storyboard.TargetProperty="Width"
          From="50" To="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

To

To プロパティだけを設定すると、アニメーションは、アニメーション化されているプロパティの基本値から、または同じプロパティに対して先に適用されている構成アニメーションの出力から、To プロパティで指定されている値まで進行します。

"構成アニメーション" とは、同じプロパティに対して以前に適用されていて、現在のアニメーションが Compose ハンドオフ動作を使用して適用された時点でまだ有効であった、Active アニメーションまたは Filling アニメーションのことです。

次の例では、DoubleAnimation の To プロパティだけを 300 に設定しています。 開始値は指定されていないので、DoubleAnimation は、Width プロパティの基本値 (100) を開始値として使用します。 Rectangle の Width は、100 から、アニメーションのターゲット値である 300 までアニメーション化されます。

            ' 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)

// 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. -->
<Rectangle Name="toAnimatedRectangle"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="Gray">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- Demonstrates the To property used by itself.
               Animates the Rectangle's Width property from its base value
               (100) to 300 over 10 seconds. -->
          <DoubleAnimation 
            Storyboard.TargetName="toAnimatedRectangle" 
            Storyboard.TargetProperty="Width"
            To="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

By

アニメーションの By プロパティだけを設定すると、アニメーションは、アニメーション化されているプロパティの基本値から、または構成アニメーションの出力から、これらの値に By プロパティで指定されている値を加えた合計値まで進行します。

次の例では、DoubleAnimation の By プロパティだけを 300 に設定しています。 開始値は指定されていないので、DoubleAnimation は、Width プロパティの基本値である 100 を開始値として使用します。 終了値は、アニメーションの By の値 300 を開始値 100 に加えた値 400 になります。 その結果、Rectangle の Width は、100 から 400 までアニメーション化されます。

            ' 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)

// 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. -->
<Rectangle Name="byAnimatedRectangle" 
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="RoyalBlue">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- 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 
            Storyboard.TargetName="byAnimatedRectangle" 
            Storyboard.TargetProperty="Width" 
            By="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

From/By

アニメーションの From プロパティと By プロパティを設定すると、アニメーションは、From プロパティで指定されている値から、From プロパティと By プロパティの合計で指定される値まで進行します。

次の例では、DoubleAnimation の From プロパティを 50 に設定し、By プロパティを 300 に設定しています。 終了値は、アニメーションの By の値 300 を開始値 50 に加えた値 350 になります。 その結果、Rectangle の Width は、50 から 350 までアニメーション化されます。

            ' 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)

// 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. -->
<Rectangle Name="fromByAnimatedRectangle" Grid.Row="6" Grid.Column="2"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="BlueViolet">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- Demonstrates the From and By properties used by 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 
            Storyboard.TargetName="fromByAnimatedRectangle" 
            Storyboard.TargetProperty="Width" 
            From="50" By="300" Duration="0:0:10"  />

        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

From

アニメーションの From 値だけを指定すると、アニメーションは、From プロパティで指定されている値から、アニメーション化されているプロパティの基本値、または構成アニメーションの出力まで進行します。

次の例では、DoubleAnimation の From プロパティだけを 50 に設定しています。 終了値は指定されていないので、DoubleAnimation は、Width プロパティの基本値 100 を終了値として使用します。 Rectangle の Width は、50 から、Width プロパティの基本値 100 までアニメーション化されます。

            ' 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)

// 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. -->
<Rectangle Name="fromAnimatedRectangle" Grid.Row="8" Grid.Column="2"
   Height="10" Width="100" HorizontalAlignment="Left" 
   Fill="Purple">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>
          <!-- Demonstrates the From property used by itself.
               Animates the rectangle's Width property from 50 to its base value (100)
               over 10 seconds. -->
          <DoubleAnimation 
            Storyboard.TargetName="fromAnimatedRectangle" 
            Storyboard.TargetProperty="Width"
            From="50" Duration="0:0:10"  />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

To/By

To プロパティと By プロパティの両方を設定した場合は、By プロパティは無視されます。

他のアニメーションの種類

WPF が提供するアニメーションの種類は、From/To/By アニメーションだけではありません。キー フレーム アニメーションとパス アニメーションも提供されています。

• キー フレーム アニメーションは、キー フレームを使用して記述される複数の終了値に沿ってアニメーション化を行います。 詳細については、「キー フレーム アニメーションの概要」を参照してください。

• パス アニメーションは、PathGeometry から出力値を生成します。 詳細については、「パス アニメーションの概要」を参照してください。

WPF では、独自のカスタム アニメーションの種類を作成することもできます。 詳細については、「カスタム アニメーションの概要」を参照してください。

参照

参照

Timeline

Storyboard

概念

アニメーションの概要

ストーリーボードの概要

キー フレーム アニメーションの概要

パス アニメーションの概要

カスタム アニメーションの概要

その他の技術情報

アニメーションのターゲット値 (From、To、および By) のサンプル