Condividi tramite


Cenni preliminari sulle animazioni From/To/By

In questo argomento viene descritto come utilizzare le animazioni From/To/By per animare le proprietà di dipendenza. Un'animazione From/To/By crea una transizione tra due valori.

Di seguito sono elencate le diverse sezioni di questo argomento.

Prerequisiti

Per comprendere questo argomento, è necessario avere familiarità con le funzionalità di animazione di WPF. Per un'introduzione alle funzionalità di animazione, vedere Cenni preliminari sull'animazione.

Descrizione di un'animazione From/To/By

Un'animazione From/To/By è un tipo di oggetto AnimationTimeline che crea una transizione tra un valore iniziale e un valore finale. Il tempo necessario per completare la transizione è determinato dalla proprietà Duration di tale animazione.

È possibile applicare un'animazione From/To/By a una proprietà utilizzando un oggetto Storyboard nel markup e nel codice o utilizzando il metodo BeginAnimation nel codice. È inoltre possibile utilizzare un'animazione From/To/By per creare un oggetto AnimationClock e applicarlo a una o più proprietà. Per ulteriori informazioni sui diversi metodi per l'applicazione delle animazioni, vedere Cenni preliminari sulle tecniche di animazione delle proprietà.

Le animazioni From/To/By non possono avere più di due valori di destinazione. Se è necessaria un'animazione con più di due valori di destinazione, utilizzare un'animazione basata su fotogrammi chiave. Per informazioni sulle animazioni basate su fotogrammi chiave, vedere Cenni preliminari sulle animazioni con fotogrammi chiave.

Tipi di animazione From/To/By

Poiché le animazioni generano valori di proprietà, sono disponibili tipi di animazione diversi per i diversi tipi di proprietà. Per animare una proprietà che accetta un oggetto Double, ad esempio la proprietà Width di un elemento, utilizzare un'animazione che produce valori Double. Per animare una proprietà che accetta un oggetto Point, utilizzare un'animazione che produce valori Point e così via.

Le classi di animazioni From/To/By appartengono allo spazio dei nomi System.Windows.Media.Animation e utilizzano la convenzione di denominazione seguente:

*<Tipo>*Animation

Dove <Tipo> è il tipo di valore animato dalla classe.

In WPF sono disponibili le classi di animazioni From/To/By seguenti.

Tipo proprietà

Classe di animazione From/To/By corrispondente

Byte

ByteAnimation

Color

ColorAnimation

Decimal

DecimalAnimation

Double

DoubleAnimation

Int16

Int16Animation

Int32

Int32Animation

Int64

Int64Animation

Point

PointAnimation

Quaternion

QuaternionAnimation

Rect

RectAnimation

Rotation3D

Rotation3DAnimation

Single

SingleAnimation

Size

SizeAnimation

Thickness

ThicknessAnimation

Vector3D

Vector3DAnimation

Vector

VectorAnimation

Valori di destinazione

Un'animazione From/To/By crea una transizione tra due valori di destinazione. In genere, si specificano un valore iniziale (impostarlo tramite la proprietà From ) e un valore finale (impostarlo tramite la proprietà To ). È tuttavia possibile specificare solo un valore iniziale, un valore di destinazione o un valore di offset. In questi casi, l'animazione ottiene il valore di destinazione mancante dalla proprietà a cui viene applicata. Nell'elenco seguente sono descritte le diverse modalità per specificare i valori di destinazione di un'animazione.

  • Valore iniziale

    Utilizzare la proprietà From quando si desidera specificare in modo esplicito il valore iniziale di un'animazione. È possibile utilizzare la proprietà From da sola o con la proprietà To o By. Se si specifica solo la proprietà From, l'animazione esegue la transizione da tale valore al valore di base della proprietà animata.

  • Valore finale

    Per specificare un valore finale di un'animazione, utilizzare la proprietà To. Se si utilizza solo la proprietà To, l'animazione ottiene il valore iniziale dalla proprietà a cui viene applicata o dall'output di un'altra animazione applicata alla stessa proprietà. È possibile utilizzare la proprietà To con la proprietà From per specificare in modo esplicito i valori iniziale e finale dell'animazione.

  • Valore di offset

    La proprietà By consente di specificare un offset anziché un valore iniziale o finale esplicito dell'animazione. La proprietà By di un'animazione specifica di quanto un valore viene modificato dall'animazione nel corso della durata. È possibile utilizzare la proprietà By da sola o con la proprietà From. Se si specifica solo la proprietà By, l'animazione aggiunge il valore di offset al valore di base della proprietà o all'output di un'altra animazione.

Utilizzo di valori From/To/By

Nelle sezioni seguenti viene descritto come utilizzare le proprietà From, Toe By insieme o singolarmente.

In ogni esempio di questa sezione viene utilizzato un oggetto DoubleAnimation, ossia un tipo di animazione From/To/By, per animare la proprietà Width di un oggetto Rectangle, caratterizzato da un'altezza di 10 Device Independent Pixel e da una larghezza di 100 Device Independent Pixel.

Benché ogni esempio utilizzi un oggetto DoubleAnimation, le proprietà From, To e By di tutte le animazioni From/To/By si comportano allo stesso modo. Sebbene ognuno di questi esempi utilizzi un oggetto Storyboard, è possibile utilizzare le animazioni From/To/By in altri modi. Per ulteriori informazioni, vedere Cenni preliminari sulle tecniche di animazione delle proprietà.

From/To

Quando si impostano i valori From e To insieme, l'animazione avanza dal valore specificato dalla proprietà From al valore specificato dalla proprietà To.

Nell'esempio riportato di seguito viene impostata su 50 la proprietà From dell'oggetto DoubleAnimation e su 300 la proprietà To. Di conseguenza, la proprietà Width dell'oggetto Rectangle viene animata da 50 a 300.

            ' Demonstrates the From and To properties used together.

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            Dim myRectangle As New Rectangle()

            ' Assign the Rectangle a name so that
            ' it can be targeted by a Storyboard.
            Me.RegisterName("fromToAnimatedRectangle", myRectangle)
            myRectangle.Height = 10
            myRectangle.Width = 100
            myRectangle.HorizontalAlignment = HorizontalAlignment.Left
            myRectangle.Fill = Brushes.Black

            ' Demonstrates the From and To properties used together.
            ' Animates the rectangle's Width property from 50 to 300 over 10 seconds.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 50
            myDoubleAnimation.To = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

            Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle")
            Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
            Dim myStoryboard As New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)

            ' Use an anonymous event handler to begin the animation
            ' when the rectangle is clicked.
            AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
// Demonstrates the From and To properties used together.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "fromToAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Black;

// Demonstrates the From and To properties used together.
// Animates the rectangle's Width property from 50 to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);

    };
<!-- Demonstrates the From and To properties used together. -->
<Rectangle Name="fromToAnimatedRectangle"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="Black">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>
        <!-- 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="Width"
          From="50" To="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Per

Quando si imposta solo la proprietà To, l'animazione avanza dal valore di base della proprietà animata, o dall'output di un'animazione in composizione applicata in precedenza alla stessa proprietà, al valore specificato dalla proprietà To.

Per animazione in composizione si intende un'animazione Active o Filling applicata in precedenza alla stessa proprietà e ancora attiva quando l'animazione corrente viene applicata utilizzando il comportamento di handoff di Compose.

Nell'esempio riportato di seguito viene impostata su 300 solo la proprietà To dell'oggetto DoubleAnimation. Poiché non è stato specificato alcun valore iniziale, l'oggetto DoubleAnimation utilizza il valore di base (100) della proprietà Width come valore iniziale. La proprietà Width dell'oggetto Rectangle viene animata da 100 al valore di destinazione dell'animazione pari a 300.

            ' Demonstrates the use of the To property.

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            Dim myRectangle As New Rectangle()

            ' Assign the Rectangle a name so that
            ' it can be targeted by a Storyboard.
            Me.RegisterName("toAnimatedRectangle", myRectangle)
            myRectangle.Height = 10
            myRectangle.Width = 100
            myRectangle.HorizontalAlignment = HorizontalAlignment.Left
            myRectangle.Fill = Brushes.Gray

            ' Demonstrates the To property used by itself. Animates
            ' the Rectangle's Width property from its base value
            ' (100) to 300 over 10 seconds.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.To = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

            Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle")
            Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
            Dim myStoryboard As New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)

            ' Use an anonymous event handler to begin the animation
            ' when the rectangle is clicked.
            AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
// Demonstrates the use of the To property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "toAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Gray;

// Demonstrates the To property used by itself. Animates
// the Rectangle's Width property from its base value
// (100) to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);

    };
<!-- Demonstrates the use of the To property. -->
<Rectangle Name="toAnimatedRectangle"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="Gray">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- 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="Width"
            To="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Utente

Quando si imposta solo la proprietà By di un'animazione, l'animazione avanza dal valore di base della proprietà animata, o dall'output di un'animazione in composizione, alla somma di tale valore e del valore specificato dalla proprietà By.

Nell'esempio riportato di seguito viene impostata su 300 solo la proprietà By dell'oggetto DoubleAnimation. Poiché nell'esempio non viene specificato un valore iniziale, l'oggetto DoubleAnimation utilizza il valore di base della proprietà Width, 100, come valore iniziale. Il valore finale, 400, è determinato dall'aggiunta del valore della proprietà By dell'animazione, 300, al valore iniziale, 100. Di conseguenza, la proprietà Width dell'oggetto Rectangle viene animata da 100 a 400.

            ' Demonstrates the use of the By property.

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            Dim myRectangle As New Rectangle()

            ' Assign the Rectangle a name so that
            ' it can be targeted by a Storyboard.
            Me.RegisterName("byAnimatedRectangle", myRectangle)
            myRectangle.Height = 10
            myRectangle.Width = 100
            myRectangle.HorizontalAlignment = HorizontalAlignment.Left
            myRectangle.Fill = Brushes.RoyalBlue

            ' 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.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.By = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

            Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
            Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
            Dim myStoryboard As New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)

            ' Use an anonymous event handler to begin the animation
            ' when the rectangle is clicked.
            AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
// Demonstrates the use of the By property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.RoyalBlue;

// 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 myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);

    };
<!-- Demonstrates the use of the By property. -->
<Rectangle Name="byAnimatedRectangle" 
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="RoyalBlue">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- 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="Width" 
            By="300" Duration="0:0:10" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

From/By

Quando si impostano le proprietà From e By di un'animazione, l'animazione avanza dal valore specificato dalla proprietà From, al valore specificato dalla somma delle proprietà From e By.

Nell'esempio riportato di seguito viene impostata su 50 la proprietà From dell'oggetto DoubleAnimation e su 300 la proprietà By. Il valore finale, 350, è determinato dall'aggiunta del valore della proprietà By dell'animazione, 300, al valore iniziale, 50. Di conseguenza, la proprietà Width dell'oggetto Rectangle viene animata da 50 a 350.

            ' Demonstrates the use of the From and By properties.

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            Dim myRectangle As New Rectangle()

            ' Assign the Rectangle a name so that
            ' it can be targeted by a Storyboard.
            Me.RegisterName("byAnimatedRectangle", myRectangle)
            myRectangle.Height = 10
            myRectangle.Width = 100
            myRectangle.HorizontalAlignment = HorizontalAlignment.Left
            myRectangle.Fill = Brushes.BlueViolet

            ' 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.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 50
            myDoubleAnimation.By = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

            Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
            Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
            Dim myStoryboard As New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)

            ' Use an anonymous event handler to begin the animation
            ' when the rectangle is clicked.
            AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
// Demonstrates the use of the From and By properties.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.BlueViolet;

// 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 myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };
<!-- Demonstrates the use of the From and By properties. -->
<Rectangle Name="fromByAnimatedRectangle" Grid.Row="6" Grid.Column="2"
   Height="10" Width="100" HorizontalAlignment="Left"
   Fill="BlueViolet">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>

          <!-- Demonstrates the From and By properties used by 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="Width" 
            From="50" By="300" Duration="0:0:10"  />

        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Da

Quando si specifica solo il valore della proprietà From di un'animazione, l'animazione avanza dal valore specificato dalla proprietà From, al valore di base della proprietà animata o all'output di un'animazione in composizione.

Nell'esempio riportato di seguito viene impostata su 50 solo la proprietà From dell'oggetto DoubleAnimation. Poiché non è stato specificato alcun valore finale, l'oggetto DoubleAnimation utilizza il valore di base della proprietà Width, 100, come valore iniziale. La proprietà Width dell'oggetto Rectangle viene animata da 50 al valore di base della proprietà Width, 100.

            ' Demonstrates the use of the From property.

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            Dim myRectangle As New Rectangle()

            ' Assign the Rectangle a name so that
            ' it can be targeted by a Storyboard.
            Me.RegisterName("fromAnimatedRectangle", myRectangle)
            myRectangle.Height = 10
            myRectangle.Width = 100
            myRectangle.HorizontalAlignment = HorizontalAlignment.Left
            myRectangle.Fill = Brushes.Purple

            ' Demonstrates the From property used by itself. Animates the
            ' rectangle's Width property from 50 to its base value (100)
            ' over 10 seconds.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 50
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

            Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle")
            Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
            Dim myStoryboard As New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)

            ' Use an anonymous event handler to begin the animation
            ' when the rectangle is clicked.
            AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
// Demonstrates the use of the From property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "fromAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Purple;

// Demonstrates the From property used by itself. Animates the
// rectangle's Width property from 50 to its base value (100)
// over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };
<!-- Demonstrates the use of the From property. -->
<Rectangle Name="fromAnimatedRectangle" Grid.Row="8" Grid.Column="2"
   Height="10" Width="100" HorizontalAlignment="Left" 
   Fill="Purple">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
      <BeginStoryboard>
        <Storyboard>
          <!-- 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="Width"
            From="50" Duration="0:0:10"  />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

To/By

Se si impostano entrambe le proprietà To e By di un'animazione, la proprietà By viene ignorata.

Altri tipi di animazione

Le animazioni From/To/By non sono l'unico tipo di animazioni disponibili in WPF. Vengono inoltre fornite animazioni basate su fotogrammi chiave e animazioni percorso.

In WPF è inoltre possibile creare tipi di animazione personalizzati. Per ulteriori informazioni, vedere Cenni preliminari sulle animazioni personalizzate.

Vedere anche

Riferimenti

Timeline

Storyboard

Concetti

Cenni preliminari sull'animazione

Cenni preliminari sugli storyboard

Cenni preliminari sulle animazioni con fotogrammi chiave

Panoramica sulle animazioni percorso

Cenni preliminari sulle animazioni personalizzate

Altre risorse

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