HOW TO：使用 From、To 和 By 控制動畫

更新：2007 年 11 月

"From/To/By" (或稱「基本動畫」) 可建立兩個目標值之間的轉換 (如需不同動畫類型的簡介，請參閱動畫概觀)。若要設定基本動畫的目標值，請使用其 From、To 和 By 屬性。下表摘要說明如何同時使用或分開使用 From、To 和 By 屬性來決定動畫的目標值。

指定的屬性	產生的行為
From	動畫會從 From 屬性指定的值前進到顯示動畫之屬性的基礎值，或是前進到前一個動畫的輸出值 (依據前一個動畫的設定方式而定)。
From 和 To	動畫會從 From 屬性指定的值前進到 To 屬性指定的值。
From 和 By	動畫會從 From 屬性指定的值前進到 From 和 By 屬性之總和所指定的值。
To	動畫會從動畫屬性的基礎值或前一個動畫的輸出值，前進到 To 指定的值。
By	動畫會從顯示動畫之屬性的基礎值或前一個動畫的輸出值，前進到該值與 By 屬性指定之值的總和。

注意事項：
請勿在同一個動畫上同時設定 To 屬性和 By 屬性。

若要使用其他插補方法，或是在兩個以上的目標值之間建立動畫，請使用主要畫面格動畫。如需詳細資訊，請參閱主要畫面格動畫概觀。

如需將多個動畫套用至單一屬性的詳細資訊，請參閱主要畫面格動畫概觀。

下列範例顯示在動畫上設定 To、By 和 From 屬性的效果。

範例

<!-- This example shows the different effects of setting
   To, By, and From properties on animations.  -->
<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <StackPanel Margin="20">

    <!-- Demonstrates the From and To properties used together. -->
    <Rectangle Name="fromToAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the To property. -->
    <Rectangle Name="toAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the By property. -->
    <Rectangle Name="byAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From and By properties. -->
    <Rectangle Name="fromByAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />

    <!-- Demonstrates the use of the From property. -->
    <Rectangle Name="fromAnimatedRectangle" Height="10" Width="100" 
      HorizontalAlignment="Left" Margin="10" Fill="#99FF9900" />
    <Button>
      Start Animations
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard FillBehavior="Stop">

              <!-- 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="(Rectangle.Width)"
                From="50" To="300" Duration="0:0:10" />

              <!-- 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="(Rectangle.Width)"
                To="300" Duration="0:0:10" />

              <!-- 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="(Rectangle.Width)" 
                By="300" Duration="0:0:10" />

              <!-- 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 
                Storyboard.TargetName="fromByAnimatedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" 
                From="50" By="300" Duration="0:0:10"  />

              <!-- 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="(Rectangle.Width)"
                From="50" Duration="0:0:10"  />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>

請參閱

工作

From、To 和 By 動畫目標值範例

概念

動畫概觀

主要畫面格動畫概觀