Översikt över tidsbeteenden

I det här avsnittet beskrivs timingbeteenden för animeringar och andra Timeline objekt.

Förutsättningar

För att förstå det här avsnittet bör du känna till grundläggande animeringsfunktioner. Mer information finns i Översikt över animering.

Tidslinjetyper

A Timeline representerar ett tidssegment. Den innehåller egenskaper som gör att du kan ange längden på segmentet, när det ska starta, hur många gånger det upprepas, hur snabbt tiden går i segmentet med mera.

Klasser som ärver från tidslinjeklassen ger ytterligare funktioner, till exempel animering och medieuppspelning. WPF tillhandahåller följande Timeline typer.

Egenskaper som styr längden på en tidslinje

A Timeline representerar ett tidssegment och längden på en tidslinje kan beskrivas på olika sätt. I följande tabell definieras flera termer för att beskriva längden på en tidslinje.

Egenskapen Varaktighet

Som tidigare nämnts representerar en tidslinje ett tidssegment. Längden på segmentet bestäms av tidslinjens Duration. När en tidslinje når slutet av sin varaktighet slutar den att spela. Om tidslinjen har underordnade tidslinjer slutar de också att spela. När det gäller en animering anger Duration hur lång tid animeringen tar att övergå från startvärdet till dess slutvärde. En tidslinjes varaktighet kallas ibland för dess enkla varaktighet, för att skilja mellan varaktigheten för en enskild iteration och den totala tid som animeringen spelas upp, inklusive upprepningar. Du kan ange en varaktighet med hjälp av ett tidsvärde eller specialvärdena Automatic eller Forever. En animerings varaktighet bör resultera i ett TimeSpan värde, så att den kan övergå mellan värden.

Följande exempel visar en DoubleAnimation med en Duration på fem sekunder.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

Tidslinjer för containrar, till exempel Storyboard och ParallelTimeline, har en standardvaraktighet på Automatic, vilket innebär att de slutar automatiskt när deras sista barn slutar spela. I följande exempel visas en Storyboard vars Duration löser sig till fem sekunder, den tid det tar för alla dess underordnade DoubleAnimation objekt att slutföras.

<Storyboard >

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

Genom att ställa in Duration på en containertidslinje till ett TimeSpan värde kan du tvinga den att spelas längre eller kortare än dess underordnade Timeline objekt skulle spelas. Om du anger Duration till ett värde som är mindre än längden på containertidslinjens underordnade Timeline objekt slutar de underordnade Timeline objekten att spelas upp när containerns tidslinje gör det. I följande exempel ställs Duration för Storyboard från de föregående exemplen till tre sekunder. Därför upphör den första DoubleAnimation att gå framåt efter tre sekunder, när den har animerat den angivna rektangelns bredd till 60.

<Storyboard Duration="0:0:3">

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

Egenskapen Upprepningsbeteende

Egenskapen RepeatBehavior för en Timeline styr hur många gånger den upprepar sin enkla varaktighet. Med hjälp RepeatBehavior av egenskapen kan du ange hur många gånger tidslinjen spelas upp (en iteration Count) eller hur lång tid den ska spelas upp (en upprepning Duration). I båda fallen går animeringen igenom så många start-till-slut-körningar som behövs för att fylla det begärda antalet eller varaktigheten. Som standard har tidslinjer ett iterationsantal på 1.0, vilket innebär att de spelas upp en gång och inte upprepas alls.

I följande exempel används RepeatBehavior egenskapen för att göra en DoubleAnimation uppspelning för två gånger dess enkla varaktighet genom att ange ett iterationsantal.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

I nästa exempel används egenskapen RepeatBehavior för att få DoubleAnimation att spela i halva tiden av dess normala varaktighet.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

Om du anger RepeatBehavior-egenskapen för en Timeline till Forever, upprepas Timeline tills den stoppas interaktivt eller av tidssystemet. I följande exempel används egenskapen RepeatBehavior för att spela DoubleAnimation på obestämd tid.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

Ett annat exempel finns i Upprepa en animering.

Egenskapen AutoReverse

Egenskapen AutoReverse anger om en Timeline ska spela bakåt i slutet av varje vidarebefordrad iteration. I följande exempel anges AutoReverse egenskapen för en DoubleAnimation till true; som ett resultat animerar det från noll till 100 och sedan från 100 till noll. Den spelas upp i totalt 10 sekunder.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

När du använder ett Count värde för att ange RepeatBehavior för en Timeline och AutoReverse egenskapen av det Timeline är true består en enskild upprepning av en framåt iteration följt av en bakåt iteration. I följande exempel sätts RepeatBehavior på DoubleAnimation från föregående exempel till värdet två. Som resultat spelas DoubleAnimation i 20 sekunder: framåt i fem sekunder, bakåt i fem sekunder, framåt i fem sekunder igen och sedan bakåt i fem sekunder.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

Om en containertidslinje har underordnade Timeline objekt omvänts de när containerns tidslinje gör det. Ytterligare exempel finns i Ange om en tidslinje automatiskt vänds.

Egenskapen BeginTime

Med BeginTime egenskapen kan du ange när en tidslinje startar. En tidslinjes starttid är relativ till den överordnade tidslinjen. En starttid på noll sekunder innebär att tidslinjen startar så snart den överordnade börjar. andra värden skapar en förskjutning mellan när den överordnade tidslinjen börjar spelas upp och när den underordnade tidslinjen spelas upp. En starttid på två sekunder innebär till exempel, att tidslinjen startar när dess överordnade har nått en tid på två sekunder. Som standard har alla tidslinjer en starttid på noll sekunder. Du kan också ange en tidslinjes starttid till null, vilket hindrar tidslinjen från att starta. I WPF anger du null med hjälp av x:Null-markeringstillägget.

Observera att starttiden inte tillämpas varje gång en tidslinje upprepas på grund av dess RepeatBehavior inställning. Om du skulle skapa en animation med en längd på BeginTime 10 sekunder och en RepeatBehavior av Forever, skulle det finnas en 10-sekunders fördröjning innan animationen spelades upp för första gången, men inte för varje efterföljande upprepning. Men om animeringens överordnade tidslinje skulle startas om eller upprepas skulle fördröjningen på 10 sekunder inträffa.

Egenskapen BeginTime är användbar för att förskjuta tidslinjer. I följande exempel skapas en Storyboard som har två underordnade DoubleAnimation objekt. Den första animeringen har fem Duration sekunder och den andra har Duration 3 sekunder. Exemplet sätter BeginTime hos den andra DoubleAnimation till 5 sekunder, så att den börjar spelas upp efter att den första DoubleAnimation har slutat.

<Storyboard>

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5" 
    BeginTime="0:0:0" />


  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  
    BeginTime="0:0:5" />

</Storyboard>

Egenskapen FillBehavior

När en Timeline når slutet av sin totala aktiva varaktighet, anger egenskapen FillBehavior om den stoppar eller behåller sitt sista värde. En animation med en FillBehavior av HoldEnd "håller" sitt output-värde: egenskapen som animeras behåller det sista värdet från animeringen. Ett värde för Stop gör att animeringen slutar påverka mål egenskapen efter att den avslutats.

I följande exempel skapas en Storyboard som har två underordnade DoubleAnimation objekt. Båda DoubleAnimation objekten Width animerar en Rectangle från 0 till 100. Elementen Rectangle har icke-animerade Width värden på 500 [enhetsoberoende bildpunkter].

• Egenskapen FillBehavior för den första DoubleAnimation är inställd på HoldEnd, standardvärdet. Därför ligger rektangelns bredd kvar på 100 efter DoubleAnimation ändarna.

• Egenskapen FillBehavior för den andra DoubleAnimation är inställd på Stop. Därför återgår den andra Width till 500 efter att Rectangle är avslutat.

<Rectangle Name="MyRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Red">
</Rectangle>

<Rectangle Name="MyOtherRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Orange">
</Rectangle>

<Button Content="Start FillBehavior Example">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5" 
            FillBehavior="HoldEnd" />
          <DoubleAnimation 
            Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5"  
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Egenskaper som styr hastigheten på en tidslinje

Klassen Timeline innehåller tre egenskaper för att ange dess hastighet:

• SpeedRatio – Anger den hastighet, i förhållande till dess överordnade, vid vilken tiden fortskrider för en Timeline. Värden som är större än en ökar hastigheten Timeline för och dess underordnade Timeline objekt. Värden mellan noll och ett saktar ned det. Ett värde av ett anger att Timeline förlopp med samma hastighet som dess överordnade. Inställningen SpeedRatio för en containertidslinje påverkar även alla underordnade Timeline objekt.

• AccelerationRatio – Anger procentandelen Duration av en tidslinje som används för att accelerera. Ett exempel finns i How to: Accelerate or Decelerate an Animation (Så här gör du: Accelerera eller decelerera en animering).

• DecelerationRatio – Anger procentandelen Duration av en tidslinje som har använts för inbromsning. Ett exempel finns i How to: Accelerate or Decelerate an Animation (Så här gör du: Accelerera eller decelerera en animering).

Se även

• Översikt över animering
• Översikt över animerings- och tidsschemasystem
• Översikt över tidshändelser
• Ämnen om hur man gör
• Exempel på animeringens tidsbeteende