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