Översikt över animering

Windows Presentation Foundation (WPF) har en kraftfull uppsättning grafik- och layoutfunktioner som gör att du kan skapa attraktiva användargränssnitt och tilltalande dokument. Animering kan göra ett attraktivt användargränssnitt ännu mer spektakulärt och användbart. Genom att bara animera en bakgrundsfärg eller använda en animerad Transformkan du skapa dramatiska skärmövergångar eller ge användbara visuella tips.

Den här översikten ger en introduktion till WPF-animeringen och tidsschemat. Den fokuserar på animeringen av WPF-objekt med hjälp av storyboards.

Introduktion till animeringar

Animering är en illusion som skapas genom att snabbt cykla genom en serie bilder, var och en något annorlunda än den förra. Hjärnan uppfattar gruppen av bilder som en enda föränderlig scen. I film skapas denna illusion genom att använda kameror som spelar in många fotografier, eller ramar, varje sekund. När bildrutorna spelas upp av en projektor ser publiken en rörlig bild.

Animeringen på en dator liknar den. Till exempel kan ett program som gör att en ritning av en rektangel tonas ut ur vyn fungera på följande sätt.

• Programmet skapar en timer.

• Programmet kontrollerar timern med angivna intervall för att se hur lång tid som har förflutit.

• Varje gång programmet kontrollerar timern beräknas det aktuella ogenomskinlighetsvärdet för rektangeln baserat på hur lång tid som har förflutit.

• Programmet uppdaterar sedan rektangeln med det nya värdet och ritar om den.

Före WPF var Microsoft Windows-utvecklare tvungna att skapa och hantera sina egna tidsscheman eller använda särskilda anpassade bibliotek. WPF innehåller ett effektivt tidsschema som exponeras via hanterad kod och XAML och som är djupt integrerat i WPF-ramverket. WPF-animering gör det enkelt att animera kontroller och andra grafiska objekt.

WPF hanterar allt bakom kulisserna arbete med att hantera ett tidsschema och rita om skärmen effektivt. Det ger tidsklasser som gör att du kan fokusera på de effekter du vill skapa, i stället för mekaniken för att uppnå dessa effekter. WPF gör det också enkelt att skapa egna animeringar genom att exponera animeringsbasklasser som dina klasser kan ärva från för att skapa anpassade animeringar. Dessa anpassade animeringar får många av prestandafördelarna med standardanimeringsklasserna.

Egenskapsanimeringssystem för WPF

Om du förstår några viktiga begrepp om tidsschemat kan WPF-animeringar vara enklare att använda. Det viktigaste är att du i WPF animerar objekt genom att använda animering för deras enskilda egenskaper. Om du till exempel vill att ett ramverkselement ska växa animerar du dess Width och Height egenskaper. Om du vill att ett objekt ska tonas ut från vyn animerar du dess Opacity egenskap.

För att en egenskap ska ha animeringsfunktioner måste den uppfylla följande tre krav:

• Det måste vara en beroendeegenskap.

• Den måste tillhöra en klass som ärver från DependencyObject och implementerar IAnimatable-gränssnittet.

• Det måste finnas en kompatibel animeringstyp. (Om WPF inte tillhandahåller en kan du skapa en egen. Se översikten över anpassade animeringar.)

WPF innehåller många objekt som har IAnimatable egenskaper. Kontroller som Button och TabControlsamt Panel och Shape objekt ärver från DependencyObject. De flesta av deras egenskaper är beroendeegenskaper.

Du kan använda animeringar nästan var som helst, vilket inkluderar formatmallar och kontrollmallar. Animeringar behöver inte vara visuella. du kan animera objekt som inte ingår i användargränssnittet om de uppfyller de kriterier som beskrivs i det här avsnittet.

Exempel: Gör så att ett element tonas in och ut ur vyn

Det här exemplet visar hur du använder en WPF-animering för att animera värdet för en beroendeegenskap. Den använder en DoubleAnimation, som är en typ av animering som genererar värden för Double, för att animera Opacity-egenskapen hos en Rectangle. Därför tonas Rectangle in och ut ur vyn.

Den första delen av exemplet skapar ett Rectangle element. Stegen som följer visar hur du skapar en animering och tillämpar den på rektangelns egenskap Opacity.

Följande visar hur du skapar ett Rectangle-element i en StackPanel i XAML.

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

Följande visar hur du skapar ett Rectangle-element i en StackPanel i kod.

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

Del 1: Skapa en DoubleAnimation

Ett sätt att få ett element att tona in och ut från vyn är att animera egenskapen Opacity. Eftersom egenskapen Opacity är av typen Doublebehöver du en animering som ger dubbla värden. En DoubleAnimation är en sådan animering. En DoubleAnimation skapar en övergång mellan två dubbla värden. Om du vill ange dess startvärde anger du dess egenskap From. Om du vill ange dess slutvärde anger du dess egenskap To.

1. Ett ogenomskinlighetsvärde för 1.0 gör objektet helt ogenomskinliga och ett ogenomskinlighetsvärde för 0.0 gör det helt osynligt. Om du vill att animeringen ska övergå från 1.0 till 0.0 anger du dess egenskap From till 1.0 och dess egenskap To till 0.0. Följande visar hur du skapar en DoubleAnimation i XAML.

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

   Följande visar hur du skapar en DoubleAnimation i kod.

   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. Därefter måste du ange en Duration. Duration för en animering anger hur lång tid det tar att gå från startvärdet till målvärdet. Följande visar hur du anger Duration till fem sekunder i XAML.

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

   Följande visar hur du anger Duration till fem sekunder i kod.

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

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

3. Föregående kod visade en animering som övergår från 1.0 till 0.0, vilket gör att målelementet tonas från helt ogenomskinlig till helt osynlig. Om du vill att elementet ska tonas tillbaka till vyn när det har försvunnit anger du AutoReverse-egenskapen för animeringen till true. Om du vill att animeringen ska upprepas på obestämd tid anger du dess egenskap RepeatBehavior till Forever. Följande visar hur du anger egenskaperna AutoReverse och RepeatBehavior i XAML.

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

   Följande visar hur du anger egenskaperna AutoReverse och RepeatBehavior i kod.

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

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

Del 2: Skapa en storyboard

Om du vill använda en animering på ett objekt skapar du en Storyboard och använder egenskaperna TargetName och TargetProperty bifogade för att ange objektet och egenskapen som animera.

1. Skapa Storyboard och lägg till animeringen som underordnad. Följande visar hur du skapar Storyboard i XAML.

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

   Om du vill skapa Storyboard i kod deklarerar du en Storyboard variabel på klassnivå.

   public partial class MainWindow : Window
   {
       private Storyboard myStoryboard;
   

   Class MainWindow
   
       Private myStoryboard As Storyboard
   

   Initiera sedan Storyboard och lägg till animeringen som underordnad.

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

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

2. Storyboard måste veta var animeringen ska tillämpas. Använd den bifogade egenskapen Storyboard.TargetName för att specificera objektet som ska animeras. Följande visar hur du anger målnamnet för DoubleAnimation till MyRectangle i XAML.

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

   Följande visar hur du anger målnamnet för DoubleAnimation till MyRectangle i kod.

   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
   

   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
   

3. Använd TargetProperty bifogade egenskapen för att ange egenskapen att animera. Följande visar hur animeringen har konfigurerats för att rikta in sig på egenskapen Opacity för Rectangle i XAML.

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

   Följande visar hur animeringen har konfigurerats för att rikta in sig på egenskapen Opacity för Rectangle i koden.

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

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

Mer information om TargetProperty syntax och ytterligare exempel finns i översikten över Storyboards.

Del 3 (XAML): Associera Storyboard med en utlösare

Det enklaste sättet att tillämpa och starta en Storyboard i XAML är att använda en händelseutlösare. Det här avsnittet visar hur du associerar Storyboard med en utlösare i XAML.

1. Skapa ett BeginStoryboard objekt och associera din storyboard med det. En BeginStoryboard är en typ av TriggerAction som använder och startar en Storyboard.

   <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. Skapa en EventTrigger och lägg till BeginStoryboard i sin Actions-samling. Ange RoutedEvent-egenskapen för EventTrigger till den dirigerade händelse som du vill ska starta Storyboard. (Mer information om routade händelser finns i översikten över routade händelser.)

   <!-- 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. Lägg till EventTrigger i Triggers-samlingen av rektangeln.

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

Del 3 (kod): Associera Storyboard med en händelsehanterare

Det enklaste sättet att tillämpa och starta en Storyboard i kod är att använda en händelsehanterare. Det här avsnittet visar hur du associerar Storyboard med en händelsehanterare i kod.

1. Registrera dig för Loaded-eventet för rektangel.

   myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
   

   AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
   

2. Deklarera händelsehanteraren. I händelsehanteraren använder du metoden Begin för att tillämpa storyboarden.

   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
   

Fullständigt exempel

Följande visar hur du skapar en rektangel som tonas in och ut ur vyn i 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>

Följande visar hur du skapar en rektangel som tonas in och ut ur vyn i kod.

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

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. På grund av antalet olika egenskapstyper finns det flera animeringsklasser i System.Windows.Media.Animation namnrymd. Lyckligtvis följer de en strikt namngivningskonvention som gör det enkelt att skilja mellan dem:

• < typ>animering

  Dessa kallas för en "Från/Till/Av" eller "grundläggande" animering, de animeras mellan ett start- och målvärde eller genom att lägga till ett förskjutningsvärde till startvärdet.

  • Om du vill ange ett startvärde anger du egenskapen Från för animeringen.

  • Om du vill ange ett slutvärde anger du egenskapen Till för animeringen.

  • Om du vill ange ett förskjutningsvärde anger du egenskapen By för animeringen.

  Exemplen i den här översikten använder dessa animeringar eftersom de är de enklaste att använda. Animeringar från/till/med beskrivs i detalj i översikten över animeringar från/till/med.

• < Typ>AnimationMedNyckelrutor

  Animeringar av nyckelramar är kraftfullare än animeringar från/till/efter eftersom du kan ange valfritt antal målvärden och till och med kontrollera interpoleringsmetoden. Vissa typer kan bara animeeras med animeringar av nyckelramar. Nyckelramsanimationer beskrivs i detalj i Key-Frame Översikt över animeringar.

• < Typ>AnimationUsingPath

  Med sökvägsanimeringar kan du använda en geometrisk sökväg för att skapa animerade värden.

• < Typ>AnimationBase

  Abstrakt klass som, när du implementerar den, animerar ett <värde av typen>. Den här klassen fungerar som basklass för <type>Animation och <Type>AnimationUsingKeyFrames-klasser. Du behöver bara hantera dessa klasser direkt om du vill skapa egna anpassade animeringar. Annars kan du använda en <typ>animering eller KeyFrame<typ>animering.

I de flesta fall vill du använda klasserna <Type>Animation, till exempel DoubleAnimation och ColorAnimation.

I följande tabell visas flera vanliga animeringstyper och några egenskaper som de används med.

Animeringar är tidslinjer

Alla animeringstyper ärver från klassen Timeline; Därför är alla animeringar specialiserade typer av tidslinjer. En Timeline definierar ett tidssegment. Du kan ange tidsbeteenden för en tidslinje: dess Duration, hur många gånger det upprepas och till och med hur snabbt tiden går för den.

Eftersom en animering är en Timelinerepresenterar den också ett tidssegment. En animering beräknar också utdatavärden när den fortskrider genom det angivna tidssegmentet (eller Duration). När animeringen fortskrider eller "spelas upp" uppdateras egenskapen som den är associerad med.

Tre vanliga tidsegenskaper är Duration, AutoReverseoch RepeatBehavior.

Egenskapen Varaktighet

Som tidigare nämnts representerar en tidslinje ett tidssegment. Längden på segmentet bestäms av tidslinjens Duration, som vanligtvis anges med hjälp av ett TimeSpan värde. När en tidslinje når slutet av sin varaktighet har den slutfört en iteration.

En animering använder egenskapen Duration för att fastställa dess aktuella värde. Om du inte anger ett Duration värde för en animering används 1 sekund, vilket är standardvärdet.

Följande syntax visar en förenklad version av XAML-attributsyntaxen (Extensible Application Markup Language) för egenskapen Duration.

timmar:minuter:sekunder

I följande tabell visas flera Duration inställningar och deras resulterande värden.

Ett sätt att ange en Duration i kod är att använda metoden FromSeconds för att skapa en TimeSpanoch sedan deklarera en ny Duration struktur med hjälp av den TimeSpan.

För mer information om Duration-värden och den fullständiga syntaxen för Extensible Application Markup Language (XAML), se Duration-strukturen.

Automatisk omvändning

Egenskapen AutoReverse anger huruvida en tidslinje spelas bakåt när den når slutet av sin Duration. Om du ställer in den här animeringsegenskapen på trueåterställs en animering när den når slutet av sin Durationoch spelas upp från dess slutvärde tillbaka till dess startvärde. Som standard är den här egenskapen false.

Återupprepningsbeteende

Egenskapen RepeatBehavior anger hur många gånger en tidslinje spelas upp. Som standard har tidslinjer ett iterationsantal på 1.0, vilket innebär att de spelar en gång och inte upprepar alls.

Mer information om dessa egenskaper och andra finns i översikt över tidsbeteenden.

Att tillämpa en animering på en egenskap

I föregående avsnitt beskrivs de olika typerna av animeringar och deras tidsegenskaper. Det här avsnittet visar hur du tillämpar animeringen på den egenskap som du vill animera. Storyboard-objekt är ett sätt att tillämpa animeringar på egenskaper. En Storyboard är en containertidslinje som innehåller målinformation för de animeringar som den innehåller.

Målobjekt och egenskaper

Klassen Storyboard tillhandahåller de bifogade egenskaperna TargetName och TargetProperty. Genom att ange de här egenskaperna för en animering kan du tala om för animeringen vad som ska animeras. Men innan en animering kan rikta in sig på ett objekt måste objektet vanligtvis få ett namn.

Att tilldela ett namn till en FrameworkElement skiljer sig från att tilldela ett namn till ett Freezable objekt. De flesta kontroller och paneler är ramverkselement. Dock är de flesta enbart grafiska objekt, till exempel penslar, transformeringar och geometrier, frysbara objekt. Om du inte är säker på om en typ är en FrameworkElement eller en Freezableläser du avsnittet Arvshierarki i referensdokumentationen.

• Om du vill göra ett FrameworkElement ett animeringsmål ger du det ett namn genom att ange dess egenskap Name. I kod måste du också använda metoden RegisterName för att registrera elementnamnet med den sida som den tillhör.

• Om du vill göra ett Freezable objekt till ett animeringsmål i XAML använder du x:Name Directive för att tilldela det ett namn. I kod använder du bara metoden RegisterName för att registrera objektet med den sida som det tillhör.

Avsnitten som följer innehåller ett exempel på namngivning av ett element i XAML och kod. För mer detaljerad information om namngivning och mål, se Storyboards-översikten.

Tillämpa och starta storyboards

Om du vill starta en storyboard i XAML associerar du den med en EventTrigger. En EventTrigger är ett objekt som beskriver vilka åtgärder som ska utföras när en angiven händelse inträffar. En av dessa åtgärder kan vara en BeginStoryboard åtgärd som du använder för att starta din storyboard. Händelseutlösare liknar händelsehanterare eftersom de gör att du kan ange hur programmet svarar på en viss händelse. Till skillnad från händelsehanterare kan händelseutlösare beskrivas fullständigt i XAML. ingen annan kod krävs.

Om du vill starta en Storyboard i kod kan du använda en EventTrigger eller använda metoden Begin i klassen Storyboard.

Interaktiv kontroll av en storyboard

I föregående exempel visades hur du startar en Storyboard när en händelse inträffar. Du kan också interaktivt styra en Storyboard när den har startat: du kan pausa, återuppta, stoppa, gå vidare till dess fyllningsperiod, söka efter och ta bort Storyboard. Mer information och ett exempel som visar hur du interaktivt styr en Storyboardfinns i Översikt över Storyboards.

Vad händer när en animering har upphört?

Egenskapen FillBehavior anger hur en tidslinje fungerar när den slutar. Som standard startar en tidslinje Filling när den slutar. En animering som är Filling behåller sitt slutliga utdatavärde.

DoubleAnimation i föregående exempel slutar inte eftersom dess RepeatBehavior-egenskap är inställd på Forever. I det följande exemplet animerar man rektangeln genom en liknande animation. Till skillnad från föregående exempel finns egenskaperna RepeatBehavior och AutoReverse för den här animeringen kvar som standardvärden. Därför fortsätter animeringen från 1 till 0 över fem sekunder och stoppas sedan.

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

Eftersom dess FillBehavior inte har ändrats från dess standardvärde, vilket är HoldEnd, innehåller animeringen sitt slutliga värde, 0, när det slutar. Därför förblir rektangelns Opacity 0 efter animeringens slut. Om du anger rektangelns Opacity till ett annat värde verkar koden inte ha någon effekt eftersom animeringen fortfarande påverkar egenskapen Opacity.

Ett sätt att återfå kontrollen över en animerad egenskap i kod är att använda metoden BeginAnimation och ange null för parametern AnimationTimeline. För mer information och ett exempel, se Ange en egenskap efter att ha animerat den med en Storyboard.

Observera att även om det inte verkar ha någon effekt att ange ett egenskapsvärde som har en Active- eller Filling animering, ändras egenskapsvärdet. Mer information finns i Översikt över animerings- och tidsschemasystem.

Databindning och animera animeringar

De flesta animeringsegenskaper kan vara databundna eller animerade. Du kan till exempel animera egenskapen Duration för en DoubleAnimation. Men på grund av hur tidsschemat fungerar fungerar inte databundna eller animerade animeringar som andra databundna eller animerade objekt. För att förstå deras beteende hjälper det till att förstå vad det innebär att tillämpa en animering på en egenskap.

Se exemplet i föregående avsnitt som visade hur du animerar Opacity för en rektangel. När rektangeln i föregående exempel laddas tillämpar dess händelseutlösare Storyboard. Tidsschemat skapar en kopia av Storyboard och dess animering. Dessa kopior är låsta (skrivskyddade) och Clock objekt skapas från dem. Dessa klockor utför det faktiska arbetet med att animera målegenskaperna.

Tidsschemat skapar en klocka för DoubleAnimation och tillämpar den på objektet och egenskapen som anges av TargetName och TargetProperty för DoubleAnimation. I det här fallet tillämpar tidssystemet klockan på egenskapen Opacity för objektet med namnet "MyRectangle".

Även om en klocka skapas för Storyboard, tillämpas den inte på några egenskaper. Syftet är att styra dess underordnade klocka, klockan som skapas för DoubleAnimation.

För att en animering ska återspegla databindning eller animeringsändringar måste dess klocka återskapas. Klockor återskapas inte automatiskt. Om du vill att en animering ska återspegla ändringar använder du dess storyboard på nytt med hjälp av en BeginStoryboard eller metoden Begin. När du använder någon av dessa metoder startas animeringen om. I kod kan du använda metoden Seek för att flytta tillbaka storyboarden till dess tidigare position.

Ett exempel på en databunden animering finns i Key Spline Animation Sample. Mer information om hur animerings- och tidsschemat fungerar finns i Översikt över animerings- och tidsschemasystem.

Andra sätt att animera

Exemplen i den här översikten visar hur du animerar med hjälp av storyboards. När du använder kod kan du animera på flera andra sätt. Mer information finns i översikten över -egenskapsanimeringstekniker.

Animeringsexempel

Följande exempel kan hjälpa dig att börja lägga till animering i dina program.

• exempel på målvärden för från, till och efter animering

  Visar olika Från/Till/Efter-inställningar.

• Exempel på animeringens tidsbeteende

  Visar olika sätt att styra tidsbeteendet för en animering. Det här exemplet visar också hur data binder målvärdet för en animering.

Relaterade ämnen

Hänvisning

• Timeline

• Storyboard

• BeginStoryboard

• Clock