Condividi tramite

Procedura: controllare un'animazione mediante i valori From, To e By

  • Articolo

"From/To/By" o "un'animazione base" creano una transizione tra due valori di destinazione; vedere Cenni preliminari sull'animazione per un'introduzione ai diversi tipi di animazioni. Per impostare i valori di destinazione di un'animazione di base, usa le relative Fromproprietà , Toe By . Nella tabella seguente viene riepilogato il modo in cui le Fromproprietà , Toe By possono essere usate insieme o separatamente per determinare i valori di destinazione di un'animazione.

Proprietà specificate Comportamento conseguente
From L'animazione passa dal valore specificato dalla From proprietà al valore di base della proprietà animata o al valore di output di un'animazione precedente, a seconda della configurazione dell'animazione precedente.
From e To L'animazione passa dal valore specificato dalla From proprietà al valore specificato dalla To proprietà .
From e By L'animazione passa dal valore specificato dalla From proprietà al valore specificato dalla somma delle From proprietà e By .
To L'animazione passa dal valore di base della proprietà animata o dal valore di output di un'animazione precedente al valore specificato dalla To proprietà .
By L'animazione passa dal valore di base della proprietà animata o dal valore di output di un'animazione precedente alla somma di tale valore e al valore specificato dalla By proprietà .

Nota

Non impostare sia la To proprietà che la By proprietà nella stessa animazione.

Per usare altri metodi di interpolazione o aggiungere un'animazione tra più di due valori di destinazione, usare un'animazione con fotogrammi chiave. Per altre informazioni, vedere Cenni preliminari sulle animazioni con fotogrammi chiave.

Per informazioni sull'applicazione di più animazioni a una singola proprietà, vedere Cenni preliminari sulle animazioni di fotogrammi chiave.

L'esempio seguente mostra i diversi effetti dell'impostazione Todelle proprietà , Bye From sulle animazioni.

Esempio

<!-- 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>

Vedi anche