From/To/By 动画概述

更新：2007 年 11 月

本主题描述如何使用 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 属性来设置）。但是，也可以只指定起始值、目标值或偏移量值。此时，动画从正在进行动画处理的属性获取缺少的目标值。以下列表描述了指定动画目标值的各种方法。

• 起始值

  如果要显式指定动画的起始值，请使用 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(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 属性指定的值。

（“组合动画”是指以前应用于同一属性、在使用 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. -->
<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 属性。

其他动画类型

From/To/By 动画不是 WPF 提供的唯一动画类型，它还提供了关键帧动画和路径动画。

• 关键帧动画沿着用关键帧所描述的任意数量的目标值进行动画处理。有关更多信息，请参见关键帧动画概述。

• 路径动画从 PathGeometry 生成输出值。有关更多信息，请参见路径动画概述。

WPF 还允许您创建自己的自定义动画类型。有关更多信息，请参见自定义动画概述。

请参见

任务

From/To/By 动画的目标值示例

概念

动画概述

演示图板概述

关键帧动画概述

路径动画概述

自定义动画概述

参考

Timeline

Storyboard