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

Aggiornamento: novembre 2007

Un’animazione "From/To/By" o "animazione di base" crea 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, utilizzare le proprietà From, To e By. Nella tabella riportata di seguito viene fornito un riepilogo sull'utilizzo singolo o collettivo delle proprietà From, To e By per determinare i valori di destinazione di un'animazione.

Proprietà specificate	Comportamento risultante
From	L'animazione avanza dal valore specificato dalla proprietà From al valore di base della proprietà a cui si sta aggiungendo un'animazione o al valore di output di un'animazione precedente, a seconda della relativa configurazione.
From e To	L'animazione avanza dal valore specificato dalla proprietà From al valore specificato dalla proprietà To.
From e By	L'animazione avanza dal valore specificato dalla proprietà From al valore specificato dalla somma delle proprietà From e By.
To	L'animazione avanza dal valore di base della proprietà a cui è stata aggiunta un'animazione o dal valore di output di un'animazione precedente al valore specificato dalla proprietà To.
By	L'animazione avanza dal valore di base della proprietà a cui si sta aggiungendo un'animazione o dal valore di output di un'animazione precedente alla somma di tale valore e del valore specificato dalla proprietà By.

Nota

Non impostare la proprietà To e la proprietà By sulla stessa animazione.

Per utilizzare altri metodi di interpolazione o aggiungere un'animazione tra più di due valori di destinazione, utilizzare un’animazione con fotogrammi chiave. Per ulteriori 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 con fotogrammi chiave.

Nell’esempio riportato di seguito vengono illustrati i diversi effetti dell’impostazione delle proprietà To, By e From sulle animazione.

Esempio

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

Vedere anche

Attività

Esempio di valori di destinazione dell'animazione From/To/By

Concetti

Cenni preliminari sull'animazione

Cenni preliminari sulle animazioni con fotogrammi chiave