Panoramica sulle animazioni From/To/By

Questo argomento descrive come usare le animazioni From/To/By per animare le proprietà di dipendenza. Un'animazione From/To/By crea una transizione tra due valori.

Prerequisiti

Per comprendere questo argomento, è necessario avere familiarità con le funzionalità delle animazioni 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 AnimationTimeline che crea una transizione tra un valore iniziale e un valore finale. La quantità di tempo impiegato dalla transizione per il completamento è determinata dall'oggetto Duration di tale animazione.

Puoi applicare un'animazione From/To/By a una proprietà usando un Storyboard oggetto nel markup e il codice oppure usando il BeginAnimation metodo nel codice. Puoi anche usare un'animazione From/To/By per creare un oggetto e applicarlo AnimationClock a una o più proprietà. Per altre informazioni sui diversi metodi per l'applicazione di 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, usare un'animazione con fotogrammi chiave. Le animazioni con fotogrammi chiave sono descritte in Cenni preliminari sulle animazioni con fotogrammi chiave.

Tipi di animazione From/To/By

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

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

<Digitare> Animation

Dove <Type> è il tipo di valore a cui viene animata la classe .

WPF fornisce le classi di animazione From/To/By seguenti.

Tipo di 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. È comune specificare un valore iniziale (impostarlo usando la From proprietà ) e un valore finale (impostarlo usando la To proprietà ). È anche possibile tuttavia specificare solo un valore iniziale, un valore di destinazione o un valore di scostamento. In questi casi, l'animazione ottiene il valore di destinazione mancante dalla proprietà che viene animata. L'elenco seguente descrive le diverse modalità per specificare i valori di destinazione di un'animazione.

• Valore iniziale

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

• Valore finale

  Per specificare un valore finale di un'animazione, usarne la To proprietà . Se usi la To proprietà da sola, l'animazione ottiene il valore iniziale dalla proprietà animata o dall'output di un'altra animazione applicata alla stessa proprietà. È possibile utilizzare la To proprietà insieme alla From proprietà per specificare in modo esplicito i valori iniziale e finale per l'animazione.

• Valore di scostamento

  La By proprietà consente di specificare un offset anziché un valore iniziale o finale esplicito per l'animazione. La By proprietà di un'animazione specifica in base alla quantità di modifica di un valore per la durata dell'animazione. È possibile utilizzare la By proprietà stessa o con la From proprietà . Se specifichi solo la By proprietà , l'animazione aggiunge il valore di offset al valore di base della proprietà o all'output di un'altra animazione.

Uso dei valori From/To/By

Le sezioni seguenti descrivono come usare le Fromproprietà , Toe By insieme o separatamente.

Gli esempi in questa sezione usano un DoubleAnimationoggetto , che è un tipo di animazione From/To/By, per animare la Width proprietà di un Rectangle oggetto con 10 pixel indipendenti dal dispositivo di altezza e 100 pixel indipendenti dal dispositivo.

Anche se ogni esempio usa un DoubleAnimation, le proprietà From, To e By di tutte le animazioni From/To/By si comportano in modo identico. Anche se ognuno di questi esempi usa un Storyboardoggetto , è possibile usare le animazioni From/To/By in altri modi. Per altre informazioni, vedere Cenni preliminari sulle tecniche di animazione delle proprietà.

Da/A

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

Nell'esempio seguente la From proprietà dell'oggetto DoubleAnimation viene impostata su 50 e la relativa To proprietà su 300. Di conseguenza, l'oggetto Width Rectangle di viene animato 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(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.

' 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)

Per

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

("Composizione dell'animazione" fa riferimento a un'animazione Active o Filling applicata in precedenza alla stessa proprietà ancora in vigore quando l'animazione corrente è stata applicata usando il Compose comportamento di handoff.

Nell'esempio seguente viene impostata solo la To proprietà di su DoubleAnimation 300. Poiché non è stato specificato alcun valore iniziale, DoubleAnimation usa il valore di base (100) della Width proprietà come valore iniziale. L'oggetto Width Rectangle di è animato 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(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.

' 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)

Con

Quando imposti solo la By proprietà di un'animazione, l'animazione passa dal valore di base della proprietà animata o dall'output di un'animazione di composizione alla somma di tale valore e al valore specificato dalla By proprietà .

Nell'esempio seguente viene impostata solo la By proprietà di su DoubleAnimation 300. Poiché l'esempio non specifica un valore iniziale, DoubleAnimation usa il valore di base della Width proprietà 100 come valore iniziale. Il valore finale viene determinato aggiungendo il By valore dell'animazione, 300, al valore iniziale 100: 400. Di conseguenza, l'oggetto Width Rectangle di viene animato 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(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.

' 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)

From/By

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

Nell'esempio seguente la From proprietà dell'oggetto DoubleAnimation viene impostata su 50 e la relativa By proprietà su 300. Il valore finale viene determinato aggiungendo il By valore dell'animazione, 300, al valore iniziale 50: 350. Di conseguenza, l'oggetto Width Rectangle di viene animato 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(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.

' 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)

Da

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

Nell'esempio seguente viene impostata solo la From proprietà di DoubleAnimation su 50. Poiché non è stato specificato alcun valore finale, DoubleAnimation usa il valore di base della Width proprietà 100 come valore finale. L'oggetto Width Rectangle di è animato da 50 al valore di base della Width proprietà 100.

// 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.

' 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)

To/By

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

Altri tipi di animazione

Le animazioni from/To/By non sono l'unico tipo di animazioni fornite da WPF: fornisce anche animazioni con fotogrammi chiave e animazioni di percorso.

• Un'animazione con fotogrammi chiave è applicabile a un numero qualsiasi di valori di destinazione, descritti mediante i fotogrammi chiave. Per altre informazioni, vedere Cenni preliminari sulle animazioni con fotogrammi chiave.

• Un'animazione di percorso genera valori di output da un oggetto PathGeometry. Per altre informazioni, vedere Panoramica sulle animazioni tracciato.

WPF consente anche di creare tipi di animazione personalizzati. Per altre informazioni, vedere Cenni preliminari sulle animazioni percorso.

Vedi anche

• Timeline
• Storyboard
• Cenni preliminari sull'animazione
• Cenni preliminari sugli storyboard
• Cenni preliminari sulle animazioni con fotogrammi chiave
• Panoramica sulle animazioni tracciato
• Cenni preliminari sulle animazioni personalizzate
• Esempio di valori di destinazione dell'animazione From/To/By