Поделиться через

Практическое руководство. Управление анимацией с помощью свойств From, To, и By

  • Статья

"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, and By Animation Target Values Sample