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 命名空间,并使用下列命名约定:
*<类型>*Animation
其中,<类型> 是该类进行动画处理的值的类型。
WPF 提供下列 From/To/By 动画类。
属性类型 |
对应的 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 值,则动画从 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 属性指定的值。
(“组合动画”是指以前应用于同一属性、在使用 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(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 属性指定的值,继续到正在进行动画处理的属性的基值,或组合动画的输出。
下面的示例只将 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 属性。
其他动画类型
From/To/By 动画不是 WPF 提供的唯一动画类型,它还提供了关键帧动画和路径动画。
关键帧动画沿着用关键帧所描述的任意数量的目标值进行动画处理。 有关更多信息,请参见 关键帧动画概述。
路径动画从 PathGeometry 生成输出值。 有关更多信息,请参见 路径动画概述。
WPF 还允许您创建自己的自定义动画类型。 有关更多信息,请参见 自定义动画概述。