From/To/By 動畫概觀

更新：2007 年 11 月

本主題說明如何使用 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 命名空間，使用下列命名規範：

*<Type>*Animation

其中 <Type> 是類別顯示為動畫之值的型別。

WPF 提供下列 From/To/By 動畫類別。

目標值

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(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 屬性指定的值為止。

(「組合動畫」是指先前套用到相同屬性的 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(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(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(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(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 也可讓您建立自訂動畫型別。如需詳細資訊，請參閱自訂動畫概觀。

請參閱

工作

From、To 和 By 動畫目標值範例

概念

動畫概觀

腳本概觀

主要畫面格動畫概觀

路徑動畫概觀

自訂動畫概觀

參考

Timeline

Storyboard