From/To/By 動畫概觀
本主題說明如何使用 From/To/By 動畫以動畫顯示相依性屬性。 From/To/By 動畫可建立兩個值之間的轉換。
必要條件
若要了解本主題，您應該熟悉 WPF 動畫功能。 如需動畫功能的簡介，請參閱 動畫概觀。
什麼是 From/To/By 動畫？
From/To/By 動畫是一種 AnimationTimeline 類型，可建立起始值和結束值之間的轉換。 完成轉換所花費的時間量由該動畫的 Duration 決定。
您可以在標記和程式碼中使用 Storyboard，或在程式碼中使用 BeginAnimation 方法，將 From/To/By 動畫套用至屬性。 您也可以使用 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 屬性來設定)。 不過，您也可以只指定起始值、目的值或位移值。 在這些情況下，動畫會從以動畫顯示的屬性，取得遺漏的目標值。 下列清單說明指定動畫目標值的不同方式。
起始值
當您想要明確指定動畫的起始值時，可使用 From 屬性。 您可以單獨使用 From 屬性，也可以搭配 To 或 By 屬性使用。 如果您只有指定 From 屬性，動畫會從該值轉換為動畫屬性的基底值。
結束值
若要指定動畫的結束值，請使用其 To 屬性。 如果您單獨使用 To 屬性，動畫會從以動畫顯示的屬性或從另一個套用至相同屬性的動畫輸出來取得其起始值。 您可以將 To 屬性和 From 屬性一起使用，以明確指定動畫的起始值與結束值。
位移值
By 屬性可讓您指定位移值，而不是明確的動畫起始值或結束值。 動畫的 By 屬性會指定動畫在其持續期間變更值的程度。 您可以單獨使用 By 屬性，也可以搭配 From 屬性使用。 如果您只有指定 By 屬性，動畫會將位移值加上屬性的基底值，或加上另一個動畫的輸出。
使用 From/To/By 值
下列各節說明如何一起或分開使用 From、To 和 By 屬性。
本節中的範例使用 DoubleAnimation 這個 From/To/By 動畫類型，以動畫顯示高度為 10 裝置獨立畫素且寬度為 100 裝置獨立畫素之 Rectangle 的 Width 屬性。
雖然每個範例都使用 DoubleAnimation，但所有 From/To/By 動畫的 From、To 和 By 屬性的行為均相同。 雖然每個範例都使用 Storyboard，但您能以其他方式來使用 From/To/By 動畫。 如需詳細資訊，請參閱 屬性動畫技術概觀。
寄件者/收件者
當您同時設定 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.
' 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 屬性所指定的值。
(「組成動畫」是指先前套用至相同屬性且在使用 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(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 屬性所指定值的總和。
下列範例只會將 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.
' 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 屬性的總和所指定的值。
下列範例會將 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.
' 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 屬性所指定的值，進展至以動畫顯示的屬性基底值，或進展至組成動畫輸出。
下列範例只會將 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.
' 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 也可讓您建立自己的自訂動畫類型。 如需詳細資訊，請參閱 自訂動畫概觀。
