From/To/By 動畫概觀

發行項
08/12/2011

本主題說明如何使用 From/To/By 動畫建立相依性屬性的動畫效果。 From/To/By 動畫會在兩個值之間建立轉換。

本主題包含下列章節。

必要條件

若要了解本主題，您應該熟悉 WPF 動畫功能。如需動畫功能的簡介，請參閱動畫概觀。

什麼是 From/To/By 動畫

From/To/By 動畫是一種 AnimationTimeline，會在開始值與結束值之間建立轉換。轉換完成所需的時間是由動畫的 Duration 決定。

要將 From/To/By 動畫套用到屬性，可以在標記和程式碼中使用 Storyboard，或在程式碼中使用 BeginAnimation 方法。您也可以使用 From/To/By 動畫建立 AnimationClock，然後將它套用到一個或多個屬性。如需套用動畫之不同方法的詳細資訊，請參閱建立屬性動畫技術概觀。

From/To/By 動畫的目標值不能超過兩個。若需要有兩個以上目標值的動畫，請使用主要畫面格動畫。有關主要畫面格動畫的說明，請參閱主要畫面格動畫概觀。

From/To/By 動畫型別

由於動畫會產生屬性值，因此屬性型別不同，動畫型別也不同。如果要讓 Double 的屬性 (例如項目的 Width 屬性，請使用產生 Double 值的動畫。如果要讓使用 Point 的屬性顯示動畫，請使用會產生 Point 值的動畫，依此類推。

From/To/By 動畫類別屬於 System.Windows.Media.Animation 命名空間，使用下列命名規範：

*<型別>*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 動畫會在兩個目標值之間建立轉換。一般會指定開始值 (使用 From 屬性設定) 和結束值 (使用 To 屬性設定)。不過，您也可以只指定開始值、目的值或位移 (Offset) 值。在這些情況下，動畫會從顯示為動畫的屬性取得缺少的目標值。下列清單說明指定動畫目標值的幾種不同方法。

開始值

若要明確指定動畫的開始值時，請使用 From 屬性。您可以單獨使用 From 屬性，或與 To 或 By 屬性一起使用。如果只指定 From 屬性，動畫會從該值轉換到動畫屬性的基底值。
結束值

若要指定動畫的結束值，請使用動畫的 To 屬性。如果單獨使用 To 屬性，動畫會從顯示為動畫的屬性取得開始值，或是套用到相同屬性之其他動畫的輸出取得開始值。您可以將 To 屬性與 From 屬性一起使用，明確指定動畫的開始和結束值。
位移值

By 屬性可用來指定動畫的位移，而非明確的開始或結束值。動畫的 By 屬性會指定動畫在整個期間相對於某個值的變化。您可以單獨使用 By 屬性，或與 From 屬性一起使用。如果只指定 By 屬性，動畫會將位移值加到屬性的基底值或其他動畫的輸出。

使用 From/To/By 值

下列章節描述如何一起或單獨使用 From、To 和 By 屬性。

本節的幾個範例都使用 DoubleAnimation (From/To/By 動畫的一種)，將 Rectangle 的 Width 屬性顯示為動畫，這個矩形的高度為 10 個與裝置無關的像素，寬度為 100 個與裝置無關的像素。

雖然這幾個範例都使用 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 屬性指定的值為止。

(「組合動畫」是指先前套用到相同屬性的 Active 或 Filling 動畫，當目前的動畫使用 Compose 傳遞行為套用時，該動畫仍有作用)

下列範例只會將 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 也可讓您建立自訂動畫型別。如需詳細資訊，請參閱自訂動畫概觀。

請參閱

共用方式為