Procedura: impostare una durata per un'animazione

Aggiornamento: novembre 2007

Timeline rappresenta un intervallo di tempo la cui durata è determinata dall'oggetto Duration della sequenza temporale. Quando Timeline raggiunge la fine della propria durata, la riproduzione viene interrotta. Se Timeline ha sequenze temporali figlio, anche la relativa riproduzione viene interrotta. Nel caso di un'animazione, Duration specifica il tempo impiegato dall'animazione per la transizione dal valore iniziale a quello finale.

È possibile specificare un oggetto Duration con un tempo specifico finito o il valore speciale Automatic o Forever. La durata di un'animazione deve essere sempre un valore temporale, poiché un'animazione deve sempre disporre di una durata definita e finita, in caso contrario l'animazione non sarebbe in grado di stabilire come effettuare la transizione tra i valori di destinazione. Le sequenze temporali contenitore (oggetti TimelineGroup), ad esempio Storyboard e ParallelTimeline, hanno una durata predefinita di Automatic, che implica che tali sequenze temporali terminano automaticamente quando viene interrotta la riproduzione dell'ultima sequenza figlio.

Nell'esempio riportato di seguito, vengono animati la larghezza, l'altezza e colore di riempimento di Rectangle. Le durate sono impostate su sequenze temporali di animazione e contenitore i cui effetti di animazione risultanti includono il controllo della velocità percepita di un'animazione e l'override della durata delle sequenze temporali figlio con la durata di una sequenza temporale contenitore.

Esempio

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel Margin="20">

    <Rectangle Width="100" Height="100" Name="myRectangle">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Black" />
      </Rectangle.Fill>
      <Rectangle.Triggers>

        <!-- Animates the rectangle fill to yellow and width to 300. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>

            <!-- By default, TimelineGroup objects like Storyboard and ParallelTimeline have 
            a Duration of "Automatic". A TimelineGroup's automatic duration encompasses its 
            last-ending child. In this example, there is only one child of the Storyboard, the
            ParallelTimeline, so when the ParallelTimeline ends, the Storyboard duration will
            automatically end. -->
            <Storyboard>

              <!-- This ParallelTimeline has overriden its default duration of "Automatic" with
              a finite duration of half a second. This will force this Timeline to end after half a
              second even though its child Timelines have a longer duration (2 and 4 seconds respectively). 
              This cuts off the animation prematurely and the rectangle's fill will not go all the way to 
              yellow nor will the rectangle width get all the way to 300. Again, the default duration of a
              ParallelTimeline is "Automatic" so if you remove the finite duration, the ParallelTimeline
              will wait for its child timelines to end before it ends. -->

              <!-- Note: To specify a finite time in XAML, use the syntax of "days:hours:seconds". As mentioned,
              this ParallelTimeline has a duration of half a second. -->
              <ParallelTimeline Duration="0:0:0.5">

                <!-- For Animation Timelines like DoubleAnimation, the duration is one factor that
                determines the rate at which an animation appears to progress. For example, the DoubleAnimation
                below that animates the rectangle height will complete in only one second while the animation
                that animates the width willwill complete in 2 seconds which is relatively fast compared to the DoubleAnimation
                which animates the rectangle width over 4 seconds. -->
                <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Height"
                  To="300" Duration="0:0:1" />

                <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Width"
                  To="300" Duration="0:0:4" />

                <ColorAnimation
                  Storyboard.TargetName="MyAnimatedBrush"
                  Storyboard.TargetProperty="Color"
                  To="Yellow" Duration="0:0:2" />

              </ParallelTimeline>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>

      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

Vedere anche

Concetti

Cenni preliminari sull'animazione

Riferimenti

Duration