From/To/By 動畫概觀
本主題說明如何使用 From/To/By 動畫以動畫顯示相依性屬性。 From/To/By 動畫可建立兩個值之間的轉換。
必要條件
若要瞭解本主題，您應該熟悉 WPF 動畫功能。 如需動畫功能的簡介，請參閱 動畫概觀。
什麼是 From/To/By 動畫？
From/To/By 動畫是 的型 AnimationTimeline 別，可建立起始值與結束值之間的轉換。 轉換完成所花費的時間量取決於 Duration 該動畫的 。
您可以使用 標記和程式碼中的 ，或在 BeginAnimation 程式碼中使用 方法，將 From/To/By 動畫套用至屬性 Storyboard 。 您也可以使用 From/To/By Animation 來建立 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 動畫可建立兩個目標值之間的轉換。 通常指定起始值（使用 From 屬性加以設定）和結束值（使用 To 屬性加以設定）。 不過，您也可以只指定起始值、目的值或位移值。 在這些情況下，動畫會從以動畫顯示的屬性，取得遺漏的目標值。 下列清單說明指定動畫目標值的不同方式。
起始值
From當您想要明確指定動畫的起始值時，請使用 屬性。 您可以單獨使用 From 屬性，或使用 To 或 By 屬性。 如果您只 From 指定 屬性，動畫就會從該值轉換為動畫屬性的基底值。
結束值
若要指定動畫的結束值，請使用其 To 屬性。 如果您單獨使用 To 屬性，動畫會從正在產生動畫效果的屬性，或是從套用至相同屬性之另一個動畫的輸出中取得其起始值。 您可以使用 To 屬性與 From 屬性，明確指定動畫的開始和結束值。
位移值
屬性 By 可讓您指定位移，而不是動畫的明確開始或結束值。 動畫 By 的 屬性會指定動畫在其持續時間內變更值的數目。 您可以單獨使用 By 屬性或 屬性 From 。 如果您只 By 指定 屬性，動畫會將位移值新增至屬性的基底值或另一個動畫的輸出。
使用 From/To/By 值
下列各節說明如何將 From 、 To 和 By 屬性一起使用或分開使用。
本節中的範例每一個 DoubleAnimation 都會使用 一種 From/To/By 動畫類型，以動畫顯示 Width 10 個裝置獨立圖元高和 100 個裝置獨立圖元寬的 Rectangle 屬性。
雖然每個範例都使用 DoubleAnimation ，但所有 From/To/By 動畫的 From、To 和 By 屬性的行為都相同。 雖然上述每個範例都使用 Storyboard ，但您可以透過其他方式使用 From/To/By 動畫。 如需詳細資訊，請參閱 屬性動畫技術概觀。
寄件者/收件者
當您將 和 值設定 From 在一起時，動畫會從 屬性所 From 指定的值，前進到 屬性所 To 指定的 To 值。
下列範例會將 From 的 DoubleAnimation 屬性設定為 50，並將其 To 屬性設定為 300。 因此， Width 的 Rectangle 會從 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.
' 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 指定的值。
（「撰寫動畫」是指 Active 使用交接行為套用目前動畫時，先前套用至相同屬性的 或 Filling 動畫 Compose 。
下列範例只會 To 將 的 DoubleAnimation 屬性設定為 300。 因為未指定起始值，因此 會 DoubleAnimation 使用 屬性的 Width 基底值 （100） 作為其起始值。 Width的 Rectangle 會從 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.
' 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 指定的值。
下列範例只會 By 將 的 DoubleAnimation 屬性設定為 300。 因為範例未指定起始值，因此 會 DoubleAnimation 使用 屬性的 Width 基底值 100 做為其起始值。 結束值取決於將動畫 300 的值新增 By 至其起始值 100：400。 因此， Width 的 Rectangle 動畫會從 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.
' 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/By
當您設定動畫的 From 和 By 屬性時，動畫會從 屬性所 From 指定的值，移至 和 屬性的總 From 和 By 所指定的值。
下列範例會將 From 的 DoubleAnimation 屬性設定為 50，並將其 By 屬性設定為 300。 結束值取決於將動畫 300 的值新增 By 至其起始值 50：350。 因此， Width 的 Rectangle 會從 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.
' 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 指定的值，到正在產生動畫之屬性的基底值或撰寫動畫的輸出。
下列範例只會 From 將 的 DoubleAnimation 屬性設定為 50。 由於未指定結束值，因此 會 DoubleAnimation 使用 屬性的 Width 基底值 100 做為其結束值。 Width的 Rectangle 會以動畫顯示從 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.
' 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/By
如果您同時設定 To 動畫的 和 By 屬性， By 則會忽略 屬性。
其他動畫類型
From/To/By 動畫不是 WPF 提供的唯一動畫類型：它也提供主要畫面格動畫和路徑動畫。
主要畫面格動畫會沿著使用主要畫面格所描繪的任意目的數值以動畫顯示。 如需詳細資訊，請參閱 主要畫面格動畫概觀。
路徑動畫會從 PathGeometry 產生輸出值。 如需詳細資訊，請參閱 路徑動畫概觀。
WPF 也可讓您建立自己的自訂動畫類型。 如需詳細資訊，請參閱 自訂動畫概觀。
另請參閱
意見反應
即將登場：在 2024 年，我們將逐步淘汰 GitHub 問題作為內容的意見反應機制，並將它取代為新的意見反應系統。 如需詳細資訊，請參閱：https://aka.ms/ContentUserFeedback。
提交並檢視相關的意見反應