Delen via

Animatieoverzicht

  • Artikel

Windows Presentation Foundation (WPF) biedt een krachtige set afbeeldingen en indelingsfuncties waarmee u aantrekkelijke gebruikersinterfaces en aantrekkelijke documenten kunt maken. Animatie kan een aantrekkelijke gebruikersinterface nog spectaculairder en bruikbaarder maken. Door alleen een achtergrondkleur aan te passen of een geanimeerde Transformtoe te passen, kunt u dramatische schermovergangen maken of nuttige visuele aanwijzingen bieden.

Dit overzicht bevat een inleiding tot het WPF-animatie- en timingsysteem. Het richt zich op de animatie van WPF-objecten met behulp van storyboards.

Inleiding tot animaties

Animatie is een illusie die wordt gecreëerd door snel door een reeks afbeeldingen te fietsen, elk iets anders dan de laatste. Het brein ziet de groep afbeeldingen als één veranderende scène. In de film wordt deze illusie gecreëerd door camera's te gebruiken die elke seconde veel foto's of frames vastleggen. Wanneer de frames worden afgespeeld door een projector, ziet het publiek een bewegend beeld.

Animatie op een computer is vergelijkbaar. Een programma dat een tekening van een rechthoek laat vervagen, kan bijvoorbeeld als volgt werken.

  • Het programma maakt een timer.

  • Het programma controleert de timer met ingestelde intervallen om te zien hoeveel tijd er is verstreken.

  • Telkens wanneer het programma de timer controleert, wordt de huidige dekkingswaarde voor de rechthoek berekend op basis van de hoeveelheid tijd die is verstreken.

  • Het programma werkt vervolgens de rechthoek bij met de nieuwe waarde en tekent deze opnieuw.

Vóór WPF moesten Microsoft Windows-ontwikkelaars hun eigen timingsystemen maken en beheren of speciale aangepaste bibliotheken gebruiken. WPF bevat een efficiënt timingsysteem dat beschikbaar wordt gesteld via beheerde code en XAML en die diep is geïntegreerd in het WPF-framework. Met WPF-animatie kunt u eenvoudig besturingselementen en andere grafische objecten animeren.

WPF verwerkt alle werkzaamheden achter de schermen van het beheren van een timingsysteem en het efficiënt opnieuw tekenen van het scherm. Het biedt tijdsklassen waarmee u zich kunt richten op de effecten die u wilt maken, in plaats van de mechanismen voor het bereiken van deze effecten. WPF maakt het ook eenvoudig om uw eigen animaties te maken door animatiebasisklassen weer te geven waaruit uw klassen kunnen overnemen, om aangepaste animaties te produceren. Deze aangepaste animaties krijgen veel van de prestatievoordelen van de standaardanimatieklassen.

WPF Eigenschap Animatiesysteem

Als u een aantal belangrijke concepten over het timingsysteem begrijpt, kunnen WPF-animaties gemakkelijker te gebruiken zijn. Het belangrijkste is dat u in WPF objecten animeren door animatie toe te passen op hun afzonderlijke eigenschappen. Als u bijvoorbeeld een frameworkelement wilt laten groeien, kunt u animatie toepassen op de Width en Height eigenschappen. Als u een object vanuit de weergave wilt laten vervagen, kunt u de Opacity eigenschap van het object animeren.

Voor een eigenschap met animatiemogelijkheden moet deze voldoen aan de volgende drie vereisten:

  • Dit moet een afhankelijkheidseigenschap zijn.

  • Deze moet deel uitmaken van een klasse die wordt overgenomen van DependencyObject en de IAnimatable-interface implementeert.

  • Er moet een compatibel animatietype beschikbaar zijn. (Als WPF er geen biedt, kunt u uw eigen maken. Zie het Overzicht van aangepaste animaties.)

WPF bevat veel objecten met IAnimatable eigenschappen. Besturingselementen zoals Button en TabControl, en ook Panel en Shape objecten overnemen van DependencyObject. De meeste eigenschappen zijn afhankelijkheidseigenschappen.

U kunt animaties vrijwel overal gebruiken, waaronder stijlen en besturingssjablonen. Animaties hoeven niet visueel te zijn; u kunt objecten die geen deel uitmaken van de gebruikersinterface, animeren als ze voldoen aan de criteria die in deze sectie worden beschreven.

Voorbeeld: Een element in en uit beeld laten vervagen

In dit voorbeeld ziet u hoe u een WPF-animatie gebruikt om de waarde van een afhankelijkheidseigenschap te animeren. Het maakt gebruik van een DoubleAnimation, een type animatie waarmee Double waarden worden gegenereerd, om de eigenschap Opacity van een Rectanglete animeren. Als gevolg hiervan vervaagt de Rectangle in en uit het zicht.

In het eerste deel van het voorbeeld wordt een Rectangle element gemaakt. In de volgende stappen ziet u hoe u een animatie maakt en deze toepast op de eigenschap Opacity van de rechthoek.

Hieronder ziet u hoe u een Rectangle-element maakt in een StackPanel in XAML.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

Hieronder ziet u hoe u een Rectangle element maakt in een StackPanel in code.

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;

Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)

Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

Deel 1: Een dubbele animatie maken

Een manier om een element in en uit het zicht te laten vervagen, is het animeren van de eigenschap Opacity. Omdat de eigenschap Opacity van het type Doubleis, hebt u een animatie nodig die dubbele waarden produceert. Een DoubleAnimation is een dergelijke animatie. Een DoubleAnimation maakt een overgang tussen twee dubbele waarden. Als u de beginwaarde wilt opgeven, stelt u de eigenschap From in. Als u de eindwaarde wilt opgeven, stelt u de bijbehorende To eigenschap in.

  1. Een ondoorzichtigheidswaarde van 1.0 maakt het object volledig ondoorzichtig en een ondoorzichtigheidswaarde van 0.0 maakt het volledig onzichtbaar. Als u de animatie wilt overzetten van 1.0 naar 0.0 stelt u de eigenschap From in op 1.0 en de eigenschap To ervan op 0.0. Hieronder ziet u hoe u een DoubleAnimation maakt in XAML.

    <DoubleAnimation From="1.0" To="0.0" />

    Hieronder ziet u hoe u een DoubleAnimation maakt in code.

    var myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;

    Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0

  2. Vervolgens moet u een Durationopgeven. De Duration van een animatie geeft aan hoe lang het duurt om van de beginwaarde naar de doelwaarde te gaan. Hieronder ziet u hoe u de Duration instelt op vijf seconden in XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />

    Hieronder ziet u hoe u de Duration instelt op vijf seconden in code.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

  3. In de vorige code werd een animatie getoond die van 1.0 naar 0.0overgaat, waardoor het doelelement van volledig ondoorzichtig tot volledig onzichtbaar wordt. Als u het element weer in beeld wilt brengen nadat het is verdwenen, stelt u de eigenschap AutoReverse van de animatie in op true. Als u de animatie voor onbepaalde tijd wilt herhalen, stelt u de eigenschap RepeatBehavior in op Forever. Hieronder ziet u hoe u de eigenschappen AutoReverse en RepeatBehavior instelt in XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>

    Hieronder ziet u hoe u de eigenschappen AutoReverse en RepeatBehavior in code instelt.

    myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

    myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

Deel 2: Een storyboard maken

Als u een animatie wilt toepassen op een object, maakt u een Storyboard en gebruikt u de gekoppelde eigenschappen TargetName en TargetProperty om het object en de eigenschap op te geven om animatie toe te passen.

  1. Maak de Storyboard en voeg de animatie toe als onderliggend element. Hieronder ziet u hoe u de Storyboard maakt in XAML.

    <Storyboard>
    <DoubleAnimation
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Als u de Storyboard in code wilt maken, declareert u een Storyboard variabele op klasseniveau.

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Class MainWindow

    Private myStoryboard As Storyboard

    Initialiseer vervolgens de Storyboard en voeg de animatie toe als onderliggend element.

    myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

    myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

  2. De Storyboard moet weten waar de animatie moet worden toegepast. Gebruik de gekoppelde eigenschap Storyboard.TargetName om het object op te geven dat moet worden geanimeerd. Hieronder ziet u hoe u de doelnaam van de DoubleAnimation instelt op MyRectangle in XAML.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Hieronder ziet u hoe u de doelnaam van de DoubleAnimation instelt op MyRectangle in code.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. Gebruik de gekoppelde eigenschap TargetProperty om aan te geven welke eigenschap u wilt animeren. Hieronder ziet u hoe de animatie is ingesteld om de eigenschap Opacity van de Rectangle in XAML te gebruiken.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Hieronder ziet u hoe de animatie is geconfigureerd om de eigenschap Opacity van de Rectangle in code te richten.

    Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

Zie de Storyboards Overviewvoor meer informatie over TargetProperty syntaxis en voor aanvullende voorbeelden.

Deel 3 (XAML): Koppel het storyboard aan een trigger

De eenvoudigste manier om een Storyboard toe te passen en te starten in XAML is door een gebeurtenistrigger te gebruiken. In deze sectie ziet u hoe u de Storyboard koppelt aan een trigger in XAML.

  1. Maak een BeginStoryboard-object en koppel uw storyboard eraan. Een BeginStoryboard is een type TriggerAction dat van toepassing is en een Storyboardstart.

    <BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

  2. Maak een EventTrigger en voeg de BeginStoryboard toe aan de bijbehorende Actions verzameling. Stel de eigenschap RoutedEvent van de EventTrigger in op de gerouteerde gebeurtenis waarmee u de Storyboardwilt starten. (Zie het Overzicht van gerouteerde gebeurtenissenvoor meer informatie over gerouteerde gebeurtenissen.)

    <!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

  3. Voeg de EventTrigger toe aan de Triggers-collectie van de Rechthoek.

    <Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>
    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Deel 3 (code): Verbind het storyboard met een gebeurtenishandler

De eenvoudigste manier om een Storyboard in code toe te passen en te starten, is door een gebeurtenis-handler te gebruiken. In deze sectie ziet u hoe u de Storyboard koppelt aan een gebeurtenis-handler in code.

  1. Meld u aan voor het Loaded-evenement van de rechthoek.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

  2. Declareer de gebeurtenis-handler. Gebruik in de gebeurtenis-handler de methode Begin om het storyboard toe te passen.

    private void myRectangleLoaded(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin(this);
}

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

Volledig voorbeeld

Hieronder ziet u hoe u een rechthoek maakt die in en uit het zicht vervaagt in XAML.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Margin="10">
            <Rectangle
                Name="MyRectangle"
                Width="100" 
                Height="100"
                Fill="Blue">
                <Rectangle.Triggers>
                    <!-- Animates the rectangle's opacity. -->
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="MyRectangle" 
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:5" 
                                    AutoReverse="True" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </StackPanel>
    </Grid>
</Window>

Hieronder ziet u hoe u een rechthoek maakt die in code in en uit de weergave vervaagt.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }
    }
}

Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As New DoubleAnimation()
        myDoubleAnimation.From = 1.0
        myDoubleAnimation.To = 0.0
        myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
        myDoubleAnimation.AutoReverse = True
        myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

        myStoryboard = New Storyboard()
        myStoryboard.Children.Add(myDoubleAnimation)
        Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
        Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

        ' Use the Loaded event to start the Storyboard.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

Animatietypen

Omdat animaties eigenschapswaarden genereren, bestaan er verschillende animatietypen voor verschillende eigenschapstypen. Als u een eigenschap wilt animeren die een Doublegebruikt, zoals de eigenschap Width van een element, gebruikt u een animatie die Double waarden produceert. Als u een eigenschap wilt animeren die een Pointgebruikt, gebruikt u een animatie die Point waarden produceert, enzovoort. Vanwege het aantal verschillende eigenschapstypen zijn er verschillende animatieklassen in de System.Windows.Media.Animation naamruimte. Gelukkig volgen ze een strikte naamconventie die het gemakkelijk maakt om onderscheid te maken tussen deze conventies:

  • < Type>type animatie

    Bekend als een 'Van/naar/door' of 'basis'-animatie, zijn dit animaties die tussen een begin- en doelwaarde bewegen, of door een offsetwaarde toe te voegen aan de beginwaarde.

    • Als u een beginwaarde wilt opgeven, stelt u de eigenschap From van de animatie in.

    • Als u een eindwaarde wilt opgeven, stelt u de eigenschap Tot van de animatie in.

    • Als u een offsetwaarde wilt opgeven, stelt u de eigenschap By van de animatie in.

    In de voorbeelden in dit overzicht worden deze animaties gebruikt, omdat ze het eenvoudigst kunnen worden gebruikt. Van/Naar/Door-animaties worden in detail beschreven in het overzicht van Van/Naar/Door-animaties.

  • < Type>AnimatieMetKeyFrames

    Sleutelframeanimaties zijn krachtiger dan van/naar/door animaties, omdat u een willekeurig aantal doelwaarden kunt opgeven en zelfs de interpolatiemethode kunt beheren. Sommige typen kunnen alleen worden geanimeerd met sleutelframeanimaties. Belangrijke frameanimaties worden gedetailleerd beschreven in de Key-Frame Overzicht van animaties.

  • < Type>AnimationUsingPath

    Met padanimaties kunt u een geometrisch pad gebruiken om animatiewaarden te genereren.

  • < Type>AnimationBase

    Abstracte klasse die, wanneer je deze implementeert, een <Type> waarde animeert. Deze klasse fungeert als de basisklasse voor klassen <Type>Animatie en <Type>AnimationUsingKeyFrames. U moet deze klassen alleen rechtstreeks behandelen als u uw eigen aangepaste animaties wilt maken. Gebruik anders een <Type>-animatie of een KeyFrame<Type>-animatie.

In de meeste gevallen wilt u de klassen <Type>Animatie gebruiken, zoals DoubleAnimation en ColorAnimation.

In de volgende tabel ziet u verschillende algemene animatietypen en enkele eigenschappen waarmee ze worden gebruikt.

Eigenschapstype Bijbehorende basisanimatie (van/naar/door) Bijbehorende keyframe-animatie Bijbehorende padanimatie Gebruiksvoorbeeld
Color ColorAnimation ColorAnimationUsingKeyFrames Geen De Color van een SolidColorBrush of een GradientStopanimeren.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animatie toepassen op de Width van een DockPanel of de Height van een Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animeer de Center-positie van een EllipseGeometry.
String Geen StringAnimationUsingKeyFrames Geen Animatie toepassen op de Text van een TextBlock of de Content van een Button.

Animaties zijn tijdlijnen

Alle animatietypen nemen over van de Timeline klasse; Daarom zijn alle animaties gespecialiseerde typen tijdlijnen. Een Timeline definieert een tijdsegment. U kunt het timinggedrag opgeven van een tijdlijn: het Duration, hoe vaak het wordt herhaald en zelfs hoe snel de tijd ervoor verloopt.

Omdat een animatie een Timelineis, vertegenwoordigt deze ook een tijdsegment. Een animatie berekent ook uitvoerwaarden tijdens het doorlopen van het opgegeven tijdssegment (of Duration). Wanneer de animatie vordert of 'wordt afgespeeld', wordt de eigenschap waaraan deze is gekoppeld, bijgewerkt.

Drie veelgebruikte tijdsinstellingen zijn Duration, AutoReverseen RepeatBehavior.

De eigenschap Duur

Zoals eerder vermeld, vertegenwoordigt een tijdlijn een tijdsegment. De lengte van dat segment wordt bepaald door de Duration van de tijdlijn, die meestal wordt opgegeven met behulp van een TimeSpan waarde. Wanneer een tijdlijn het einde van de duur bereikt, is er een iteratie voltooid.

Een animatie gebruikt de eigenschap Duration om de huidige waarde te bepalen. Als u geen Duration waarde voor een animatie opgeeft, wordt 1 seconde gebruikt. Dit is de standaardwaarde.

De volgende syntaxis toont een vereenvoudigde versie van de syntaxis van het XAML-kenmerk (Extensible Application Markup Language) voor de eigenschap Duration.

uur:minuten:seconden

In de volgende tabel ziet u verschillende Duration instellingen en de resulterende waarden.

Instelling Resulterende waarde
0:0:5.5 5,5 seconden.
0:30:5.5 30 minuten en 5,5 seconden.
1:30:5.5 1 uur, 30 minuten en 5,5 seconden.

Een manier om een Duration in code op te geven, is door de methode FromSeconds te gebruiken om een TimeSpante maken en vervolgens een nieuwe Duration structuur te declareren met behulp van die TimeSpan.

Zie de Duration structuur voor meer informatie over Duration waarden en de volledige XAML-syntaxis (Extensible Application Markup Language).

AutoReverse

De eigenschap AutoReverse geeft aan of een tijdlijn achterwaarts wordt afgespeeld nadat deze het einde van de Durationheeft bereikt. Als u deze animatie-eigenschap instelt op true, wordt een animatie omgekeerd nadat deze het einde van zijn Durationheeft bereikt, waarbij deze van de eindwaarde terug naar de beginwaarde wordt afgespeeld. Deze eigenschap is standaard false.

Herhaalgedrag

De eigenschap RepeatBehavior geeft aan hoe vaak een tijdlijn wordt afgespeeld. Tijdlijnen hebben standaard een iteratieaantal van 1.0, wat betekent dat ze slechts één keer worden afgespeeld en helemaal niet herhalen.

Zie voor meer informatie over deze en andere eigenschappen het Overzicht van timinggedrag.

Een animatie toepassen op een eigenschap

In de vorige secties worden de verschillende typen animaties en de bijbehorende timingeigenschappen beschreven. In deze sectie ziet u hoe u de animatie toepast op de eigenschap die u wilt animeren. Storyboard objecten bieden één manier om animaties toe te passen op eigenschappen. Een Storyboard is een containertijdlijn die gerichte gegevens biedt voor de animaties die het bevat.

Objecten en eigenschappen targeten

De klasse Storyboard biedt de gekoppelde eigenschappen TargetName en TargetProperty. Door deze eigenschappen in te stellen voor een animatie, vertelt u de animatie wat u moet animeren. Voordat een animatie echter op een object kan worden gericht, moet het object meestal een naam krijgen.

Het toewijzen van een naam aan een FrameworkElement verschilt van het toewijzen van een naam aan een Freezable-object. De meeste besturingselementen en panelen zijn frameworkelementen; de meeste puur grafische objecten, zoals penselen, transformaties en geometrieën, zijn echter bevriesbare objecten. Als u niet zeker weet of een type een FrameworkElement of een Freezableis, raadpleegt u de sectie Overnamehiërarchie van de referentiedocumentatie.

  • Als u een FrameworkElement een animatiedoel wilt maken, geeft u deze een naam door de eigenschap Name in te stellen. In code moet u ook de methode RegisterName gebruiken om de elementnaam te registreren bij de pagina waartoe deze behoort.

  • Als u een Freezable object een animatiedoel in XAML wilt maken, gebruikt u de x:Name Directive om deze een naam toe te wijzen. In code gebruikt u alleen de methode RegisterName om het object te registreren bij de pagina waartoe het behoort.

De volgende secties bevatten een voorbeeld van het benoemen van een element in XAML en code. Zie de Storyboards Overviewvoor meer gedetailleerde informatie over naamgeving en targeting.

Storyboards Toepassen en Starten

Als u een storyboard in XAML wilt starten, koppelt u het aan een EventTrigger. Een EventTrigger is een object dat beschrijft welke acties moeten worden uitgevoerd wanneer een opgegeven gebeurtenis plaatsvindt. Een van deze acties kan een BeginStoryboard actie zijn, die u gebruikt om uw storyboard te starten. Gebeurtenistriggers zijn vergelijkbaar met gebeurtenis-handlers, omdat u hiermee kunt opgeven hoe uw toepassing op een bepaalde gebeurtenis reageert. In tegenstelling tot gebeurtenis-handlers kunnen gebeurtenistriggers volledig worden beschreven in XAML; er is geen andere code vereist.

Als u een Storyboard in code wilt starten, kunt u een EventTrigger gebruiken of de Begin methode van de Storyboard-klasse gebruiken.

Interactief een Storyboard beheren

In het vorige voorbeeld ziet u hoe u een Storyboard kunt starten wanneer een gebeurtenis plaatsvindt. U kunt ook interactief een Storyboard beheren nadat deze is gestart: u kunt onderbreken, hervatten, stoppen, naar de vulperiode gaan, zoeken en de Storyboardverwijderen. Voor meer informatie en een voorbeeld dat laat zien hoe u interactief een Storyboardbeheert, zie het overzicht van storyboards.

Wat gebeurt er nadat een animatie is beëindigd?

De eigenschap FillBehavior geeft aan hoe een tijdlijn zich gedraagt wanneer deze eindigt. Standaard begint een tijdlijn opnieuw bij Filling zodra deze eindigt. Een animatie die Filling is, behoudt zijn uiteindelijke uitvoerwaarde.

De DoubleAnimation in het vorige voorbeeld eindigt niet omdat de eigenschap RepeatBehavior is ingesteld op Forever. In het volgende voorbeeld wordt een rechthoek geanimeerd met behulp van een vergelijkbare animatie. In tegenstelling tot het vorige voorbeeld blijven de eigenschappen RepeatBehavior en AutoReverse van deze animatie op de standaardwaarden staan. Daarom loopt de animatie van 1 tot 0 over vijf seconden en stopt de animatie.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

Omdat de FillBehavior niet is gewijzigd van de standaardwaarde, die HoldEndis, bevat de animatie de uiteindelijke waarde, 0, wanneer deze eindigt. Daarom blijft de Opacity van de rechthoek 0 na het einde van de animatie. Als u de Opacity van de rechthoek instelt op een andere waarde, lijkt de code geen effect te hebben, omdat de animatie nog steeds van invloed is op de eigenschap Opacity.

Een manier om de controle over een eigenschap met animatie in code te herstellen, is door de methode BeginAnimation te gebruiken en null op te geven voor de parameter AnimationTimeline. Zie voor meer informatie en een voorbeeld Een eigenschap instellen nadat u de animatie hebt aangepast met een Storyboard-.

Hoewel het instellen van een eigenschapswaarde met een Active of Filling animatie geen effect heeft, verandert de eigenschapswaarde wel. Zie het overzicht van het Animatie- en tijdsinstellingensysteem voor meer informatie.

Gegevensbinding en het animeren van animaties

De meeste animatie-eigenschappen kunnen gegevensgebonden of geanimeerde animaties zijn; U kunt bijvoorbeeld de eigenschap Duration van een DoubleAnimationanimeren. Vanwege de manier waarop het timingsysteem werkt, gedragen gegevensgebonden of geanimeerde animaties zich echter niet als andere gegevensgebonden of geanimeerde objecten. Om hun gedrag te begrijpen, helpt het om te begrijpen wat het betekent om een animatie toe te passen op een eigenschap.

Raadpleeg het voorbeeld in de vorige sectie waarin u kunt zien hoe u de Opacity van een rechthoek kunt animeren. Wanneer de rechthoek in het vorige voorbeeld wordt geladen, past de gebeurtenistrigger de Storyboardtoe. Het timingsysteem maakt een kopie van de Storyboard en de bijbehorende animatie. Deze kopieën zijn bevroren (alleen-lezen gemaakt) en Clock-objecten worden hiervan gemaakt. Deze klokken verrichten het eigenlijke werk van het animeren van specifieke eigenschappen.

Het timingsysteem maakt een klok voor de DoubleAnimation en past deze toe op het object en de eigenschap die is opgegeven door de TargetName en TargetProperty van de DoubleAnimation. In dit geval past het timingsysteem de klok toe op de eigenschap Opacity van het object met de naam 'MyRectangle'.

Hoewel er een klok is gemaakt voor de Storyboard, wordt de klok op geen enkele eigenschap toegepast. Het doel is om de kinderklok te regelen, de klok die wordt gecreëerd voor de DoubleAnimation.

Als een animatie gegevensbinding of animatiewijzigingen weergeeft, moet de klok opnieuw worden gegenereerd. Klokken worden niet automatisch hersteld voor u. Om een animatie wijzigingen te laten weergeven, past u het storyboard opnieuw toe met behulp van de BeginStoryboard- of Begin-methode. Wanneer u een van deze methoden gebruikt, wordt de animatie opnieuw gestart. In code kunt u de methode Seek gebruiken om het storyboard terug te zetten naar de vorige positie.

Zie Key Spline Animation Samplevoor een voorbeeld van een gegevensgebonden animatie. Zie Overzicht van animatie- en tijdsinstellingensysteemvoor meer informatie over de werking van het animatie- en tijdsinstellingensysteem.

Andere manieren om van animatie te voorzien

In de voorbeelden in dit overzicht ziet u hoe u animaties kunt toepassen met behulp van storyboards. Wanneer u code gebruikt, kunt u op verschillende andere manieren animaties toepassen. Zie het overzicht van de eigenschapsanimatietechniekenvoor meer informatie.

Animatievoorbeelden

De volgende voorbeelden kunnen u helpen bij het toevoegen van animaties aan uw toepassingen.

Titel Beschrijving
Overzicht van Animatie- en tijdsinstellingensysteem Beschrijft hoe het timingsysteem gebruikmaakt van de Timeline- en Clock-klassen, waarmee u animaties kunt maken.
tips en trucs voor animaties Hier vindt u handige tips voor het oplossen van problemen met animaties, zoals prestaties.
Overzicht van aangepaste animaties Hierin wordt beschreven hoe u het animatiesysteem kunt uitbreiden met sleutelframes, animatieklassen of callbacks per frame.
overzicht van van/naar/op animaties Hierin wordt beschreven hoe u een animatie maakt die tussen twee waarden overgaat.
Overzicht van Key-Frame animaties Hierin wordt beschreven hoe u een animatie maakt met meerdere doelwaarden, inclusief de mogelijkheid om de interpolatiemethode te beheren.
Easing functies Hierin wordt uitgelegd hoe u wiskundige formules toepast op uw animaties om realistisch gedrag te krijgen, zoals bouncing.
Overzicht van padanimaties Beschrijft hoe u een object langs een complex pad verplaatst of roteert.
Overzicht van eigenschapsanimatietechnieken Beschrijft eigenschapsanimaties met behulp van storyboards, lokale animaties, klokken en animaties per frame.
Overzicht van Storyboards Beschrijft hoe u storyboards met meerdere tijdlijnen gebruikt om complexe animaties te maken.
Overzicht van timinggedrag Beschrijft de Timeline typen en eigenschappen die worden gebruikt in animaties.
Overzicht van Tijdgebeurtenissen Beschrijft de gebeurtenissen die beschikbaar zijn op de Timeline- en Clock-objecten voor het uitvoeren van code op punten in de tijdlijn, zoals beginnen, onderbreken, hervatten, overslaan of stoppen.
How-to onderwerpen Bevat codevoorbeelden voor het gebruik van animaties en tijdlijnen in uw toepassing.
Klokken Instructieonderwerpen Bevat codevoorbeelden voor het gebruik van het Clock-object in uw toepassing.
Key-Frame How-to onderwerpen Bevat codevoorbeelden voor het gebruik van keyframe-animaties in uw toepassing.
Hoe-voor-onderwerpen voor padenanimatie Bevat codevoorbeelden voor het gebruik van padanimaties in uw toepassing.

Referentie