Översikt över animeringar från/till/efter

I det här avsnittet beskrivs hur du använder animeringar från/till/efter för att animera beroendeegenskaper. En från/till-efter-animering skapar en övergång mellan två värden.

Förutsättningar

För att förstå det här avsnittet bör du vara bekant med WPF-animeringsfunktioner. För en introduktion till animeringsfunktioner, se översikt över animering.

Vad är en från/till/efter-animering?

En från/till/genom-animering är en typ av AnimationTimeline som skapar en övergång mellan ett startvärde och ett slutvärde. Hur lång tid övergången tar att slutföra bestäms av animeringens Duration.

Du kan använda en From/To/By-animering på en egenskap med hjälp av en Storyboard i kod eller med hjälp av metoden BeginAnimation i koden. Du kan också använda en Från/Till/Av-animering för att skapa en AnimationClock och tillämpa den på en eller flera egenskaper. Mer information om de olika metoderna för att tillämpa animeringar finns i översikten över -egenskapsanimeringstekniker.

Animationer från/till/av får inte ha fler än två målvärden. Om du behöver en animering som har fler än två målvärden använder du en animering med nyckelram. Animeringar av nyckelramar beskrivs i Översikt över Key-Frame Animeringar.

Från/till/efter-animeringstyper

Eftersom animeringar genererar egenskapsvärden finns det olika animeringstyper för olika egenskapstyper. Om du vill animera en egenskap som tar en Double, till exempel egenskapen Width för ett element, använder du en animering som genererar Double värden. Om du vill animera en egenskap som tar en Pointanvänder du en animering som genererar Point värden och så vidare.

Animeringsklasser Från/Till/Genom tillhör namnrymden System.Windows.Media.Animation och använder följande namngivningskonvention:

<typ>Animation

Där <Typ> är den typ av värde som klassen animerar.

WPF innehåller följande animeringsklasser från/till/efter.

Målvärden

En från/till-efter-animering skapar en övergång mellan två målvärden. Det är vanligt att ange ett startvärde (ange det med hjälp av egenskapen From) och ett slutvärde (ange det med hjälp av egenskapen To). Du kan dock bara ange ett startvärde, ett målvärde eller ett förskjutningsvärde. I dessa fall hämtar animeringen det saknade målvärdet från egenskapen som animeras. I följande lista beskrivs de olika sätten att ange målvärden för en animering.

• Startvärde

  Använd egenskapen From när du uttryckligen vill ange startvärdet för en animering. Du kan använda egenskapen From själv, eller med egenskapen To eller By. Om du bara anger egenskapen From övergår animeringen från det värdet till basvärdet för den animerade egenskapen.

• Slutvärde

  Om du vill ange ett slutvärde för en animering använder du dess egenskap To. Om du använder egenskapen To hämtar animeringen sitt startvärde från egenskapen som animerats eller från utdata från en annan animering som tillämpas på samma egenskap. Du kan använda egenskapen To tillsammans med egenskapen From för att uttryckligen ange start- och slutvärden för animeringen.

• Förskjutningsvärde

  Med egenskapen By kan du ange en förskjutning i stället för ett explicit start- eller slutvärde för animeringen. Egenskapen By för en animering anger hur mycket animeringen ändrar ett värde under dess varaktighet. Du kan använda egenskapen By själv eller med egenskapen From. Om du bara anger egenskapen By lägger animeringen till förskjutningsvärdet till egenskapens basvärde eller till utdata från en annan animering.

Använda värden från/till/efter

I följande avsnitt beskrivs hur du använder egenskaperna From, Tooch By tillsammans eller separat.

Exemplen i det här avsnittet använder varje en DoubleAnimation, som är en typ av From/To/By-animering, för att animera egenskapen Width för en Rectangle som är 10 enhetsoberoende pixlar hög och 100 enhetsoberoende pixlar bred.

Även om varje exempel använder en DoubleAnimationbeter sig egenskaperna Från, Till och Efter för alla från/till-animeringar på samma sätt. Även om vart och ett av dessa exempel använder en Storyboardkan du använda från/till/genom-animationer på andra sätt. För mer information, se översikten över tekniker för fastighetsanimation.

Från/till

När du ställer in värdena From och To tillsammans fortsätter animeringen från värdet som anges av egenskapen From till det värde som anges av egenskapen To.

I följande exempel anges egenskapen From för DoubleAnimation till 50 och egenskapen To till 300. Som ett resultat blir Width av Rectangle animerad från 50 till 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)

Till

När du bara anger egenskapen To förlopps animeringen från basvärdet för den animerade egenskapen, eller från utdata från en komponerande animering som tidigare tillämpades på samma egenskap, till det värde som anges av egenskapen To.

("Skapa animering" refererar till en Active- eller Filling animering som tidigare tillämpades på samma egenskap som fortfarande gäller när den aktuella animeringen tillämpades med hjälp av Compose överlämningsbeteende.)

I följande exempel anges bara egenskapen To för DoubleAnimation till 300. Eftersom inget startvärde angavs använder DoubleAnimation basvärdet (100) för egenskapen Width som startvärde. Width av Rectangle animeras från värdet 100 till animeringens målvärdet 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)

Vid

När du bara anger egenskapen By för en animering går animeringen vidare från basvärdet för egenskapen som animerats, eller från utdata från en komponerande animering till summan av det värdet och värdet som anges av egenskapen By.

I följande exempel anges bara egenskapen By för DoubleAnimation till 300. Eftersom exemplet inte anger något startvärde använder DoubleAnimation basvärdet för egenskapen Width, 100, som startvärde. Slutvärdet bestäms genom att lägga till By värdet för animeringen, 300, till dess startvärde, 100: 400. Därmed animeras Width av Rectangle från 100 till 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)

Från/Av

När du anger egenskaperna From och By för en animering går animeringen vidare från värdet som anges av egenskapen From till det värde som anges av summan av egenskaperna From och By.

I följande exempel anges egenskapen From för DoubleAnimation till 50 och egenskapen By till 300. Slutvärdet bestäms genom att värdet By för animeringen, 300, läggs till startvärdet 50: 350. Som ett resultat är Width av Rectangle animerad från 50 till 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)

Från

När du bara anger From värdet för en animering går animeringen vidare från det värde som anges av egenskapen From, till basvärdet för egenskapen som animerats eller till utdata från en komponerande animering.

I följande exempel anges bara egenskapen From för DoubleAnimation till 50. Eftersom inget slutvärde angavs använder DoubleAnimation basvärdet för egenskapen Width, 100, som slutvärde. Width för Rectangle är animeras från 50 till basvärdet 100 för egenskapen Width.

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

Till/efter

Om du anger både egenskaperna To och By för en animering ignoreras egenskapen By.

Andra animeringstyper

Animeringar från/till/efter är inte den enda typen av animeringar som WPF tillhandahåller: den innehåller även animeringar för nyckelramar och sökvägsanimationer.

• En animering av nyckelramar animerar längs valfritt antal målvärden, som beskrivs med hjälp av nyckelramar. Mer information finns i översikten över Key-Frame animeringar.

• En sökvägsanimering genererar utdatavärden från en PathGeometry. Mer information finns i översikten över Path Animations.

MED WPF kan du också skapa egna anpassade animeringstyper. Mer information finns i översikten över anpassade animeringar.

Se även

• Timeline
• Storyboard
• Översikt över animering
• Översikt över Storyboards
• Key-Frame Översikt av animeringar
• Översikt över sökvägsanimeringar
• Översikt över anpassade animeringar
• exempel på målvärden för från, till och efter animering