Udostępnij za pośrednictwem

Jak kontrolować animację z użyciem od, do i przez

  • Artykuł

Wyrażenie "From/To/By" lub "podstawowa animacja" tworzy przejście między dwiema wartościami docelowymi (zobacz Omówienie animacji, aby zapoznać się z wprowadzeniem do różnych typów animacji). Aby ustawić wartości docelowe podstawowej animacji, użyj jej Fromwłaściwości , Toi By . W poniższej tabeli przedstawiono podsumowanie sposobu, w jaki Fromwłaściwości , Toi By mogą być używane razem lub oddzielnie w celu określenia wartości docelowych animacji.

Określone właściwości Wynikowe działanie
From Animacja przechodzi z wartości określonej przez From właściwość do podstawowej wartości właściwości animowanej lub do wartości wyjściowej poprzedniej animacji, w zależności od tego, jak skonfigurowano poprzednią animację.
From i To Animacja przechodzi z wartości określonej przez From właściwość do wartości określonej przez To właściwość.
From i By Animacja przechodzi z wartości określonej przez From właściwość do wartości określonej przez sumę From właściwości i By .
To Animacja przechodzi z wartości bazowej animowanej właściwości lub wartości wyjściowej poprzedniej animacji do wartości określonej przez To właściwość.
By Animacja przechodzi z wartości podstawowej właściwości animowanej lub wartości wyjściowej poprzedniej animacji do sumy tej wartości i wartości określonej przez By właściwość.

Uwaga

Nie należy ustawiać zarówno To właściwości, jak i By właściwości w tej samej animacji.

Aby użyć innych metod interpolacji lub animować między więcej niż dwiema wartościami docelowymi, użyj animacji klatek kluczowych. Aby uzyskać więcej informacji, zobacz Omówienie animacji klatek kluczowych.

Aby uzyskać informacje na temat stosowania wielu animacji do jednej właściwości, zobacz Omówienie animacji klatek kluczowych.

W poniższym przykładzie przedstawiono różne efekty ustawienia To, Byi From właściwości animacji.

Przykład

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

Zobacz też