Översikt över Key-Frame animeringar

I det här avsnittet beskrivs animeringar med nyckelramar. Med animeringar med nyckelramar kan du animera med fler än två målvärden och styra en animerings interpoleringsmetod.

Förutsättningar

För att förstå den här översikten bör du känna till animeringar och tidslinjer för Windows Presentation Foundation (WPF). En introduktion till animeringar finns i Översikt över animering. Det hjälper också att vara bekant med från/till/med-animeringar. Mer information finns i översikten över från/till/genom animeringar.

Vad är en Key-Frame animering?

Precis som en från/till-efter-animering animerar en animering med nyckelram värdet för en målegenskap. Den skapar en övergång mellan sina målvärden med hjälp av Duration. Men även om en från/till-/av-animering skapar en övergång mellan två värden, kan en enda nyckelramsanimering skapa övergångar mellan valfritt antal målvärden. Till skillnad från en From/To/By-animering har en nyckelramsanimering inga från-, Till- eller By-egenskaper som målvärdena ska anges med. En nyckelramsanimerings målvärden beskrivs med hjälp av nyckelbildruteobjekt (därav termen "nyckelramsanimering"). Om du vill ange animeringens målvärden skapar du nyckelramsobjekt och lägger till dem i animeringens KeyFrames samling. När animeringen körs övergår den mellan de bildrutor som du har angett.

Förutom att stödja flera målvärden stöder vissa nyckelramsmetoder till och med flera interpoleringsmetoder. En animerings interpoleringsmetod definierar hur den övergår från ett värde till ett annat. Det finns tre typer av interpolering: de diskreta, de linjära och de splinade.

Om du vill animera med en nyckelramsanimering slutför du följande steg.

• Deklarera animeringen och ange dess Duration, precis som du skulle göra för en från/till/med-animering.

• För varje målvärde skapar du en nyckelram av lämplig typ, anger dess värde och KeyTimeoch lägger till det i animeringens KeyFrames samling.

• Associera animeringen med en egenskap, precis som du skulle göra med en från/till/by-animering. Mer information om hur du tillämpar en animering på en egenskap genom att använda en storyboard finns i Storyboards Overview.

I följande exempel används ett DoubleAnimationUsingKeyFrames för att animera ett Rectangle element till fyra olika platser.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
  WindowTitle="KeyFrame Animations">

  <Border Width="400" BorderBrush="Black">  
    
    <Rectangle Fill="Blue" 
      Width="50" Height="50"
      HorizontalAlignment="Left">
      <Rectangle.RenderTransform>
        <TranslateTransform 
          x:Name="MyAnimatedTranslateTransform" 
          X="0" Y="0" />
      </Rectangle.RenderTransform>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <BeginStoryboard>
            <Storyboard>
            
              <!-- Animate the TranslateTransform's X property
                   from 0 to 350, then 50,
                   then 200 over 10 seconds. -->

              <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="MyAnimatedTranslateTransform"
                Storyboard.TargetProperty="X"
                Duration="0:0:10">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
                <LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
                <LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
                <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />                          
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers> 
    </Rectangle>
  </Border> 
</Page>

Precis som en från/till/genom-animering kan en nyckelramsanimering tillämpas på en egenskap med hjälp av en Storyboard i kod eller genom att använda BeginAnimation metoden i koden. Du kan också använda en nyckelramsanimering 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.

Key-Frame 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 ett elements Width egenskap) 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 producerar värden av typen Point, och så vidare.

Nyckelramanimeringsklasserna ligger inom System.Windows.Media.Animation-namnområdet och följer denna namngivningskonvention:

<typ>AnimationUsingKeyFrames

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

WPF innehåller följande animeringsklasser för nyckelramar.

Målvärden (nyckelramar) och nyckeltider

Precis som det finns olika typer av nyckelramsanimeringar för att animera olika egenskapstyper finns det också olika typer av nyckelramsobjekt: en för varje typ av värde animerad och interpoleringsmetod som stöds. Nyckelramstyper följer följande namngivningskonvention:

<Interpolationsmetodtyp><>KeyFrame

Där <InterpolationMethod> är interpoleringsmetoden som nyckelramen använder och <Typ> är den typ av värde som klassen animerar. En animering med nyckelramar som stöder alla tre interpoleringsmetoderna har tre typer av nyckelramar som du kan använda. Du kan till exempel använda tre typer av nyckelramar med : DoubleAnimationUsingKeyFramesDiscreteDoubleKeyFrame, LinearDoubleKeyFrameoch SplineDoubleKeyFrame. (Interpoleringsmetoder beskrivs i detalj i ett senare avsnitt.)

Det primära syftet med en nyckelram är att ange en KeyTime och en Value. Varje nyckelramstyp innehåller dessa två egenskaper.

• Egenskapen Value anger målvärdet för nyckelramen.

• Egenskapen KeyTime anger när (inom animeringens Duration) en nyckelram nås Value .

När en nyckelramsanimering börjar itererar den igenom sina nyckelramar i den ordning som bestäms av deras KeyTime egenskaper.

• Om det inte finns någon nyckelram vid tid 0 skapar animeringen en övergång mellan målegenskapens aktuella värde och värdet Value av den första nyckelramen; annars blir animeringens resultatvärde värdet för den första nyckelramen.

• Animeringen skapar en övergång mellan Value på den första och den andra nyckelrutan med interpoleringsmetoden som anges av den andra nyckelrutan. Övergången börjar vid den första nyckelramen KeyTime och slutar när den andra nyckelramen KeyTime nås.

• Animeringen fortsätter och skapar övergångar mellan varje efterföljande nyckelram och dess föregående nyckelram.

• Slutligen övergår animeringen till värdet för nyckelramen med den största nyckeltiden som är lika med eller mindre än animeringens Duration.

Om animeringens Duration är Automatic eller är Duration lika med tiden för den sista nyckelramen slutar animeringen. Annars, om animeringens Duration är större än nyckeltiden för den sista nyckelramen, bibehåller animeringen nyckelramsvärdet tills den når slutet av sin Duration. Precis som alla animeringar använder en nyckelramsanimering dess FillBehavior egenskap för att avgöra om den innehåller det slutliga värdet när den når slutet av den aktiva perioden. Mer information finns i Översikt över tidsbeteenden.

I följande exempel används objektet DoubleAnimationUsingKeyFrames som definierats i föregående exempel för att visa hur Value egenskaperna och KeyTime fungerar.

• Den första nyckelramen anger omedelbart animeringens utdatavärde till 0.

• Den andra nyckelramen animeras från 0 till 350. Den börjar när den första nyckelramen slutar (vid tidpunkten = 0 sekunder) och spelas upp i 2 sekunder och slutar vid tidpunkten = 0:0:2.

• Den tredje nyckelramen animerar från 350 till 50. Den startar när den andra nyckelramen slutar (vid tidpunkt = 2 sekunder) och spelas upp i 5 sekunder och slutar vid tidpunkten = 0:0:7.

• Den fjärde nyckelramen animerar från 50 till 200. Den startar när den tredje nyckelramen slutar (vid tiden = 7 sekunder) och spelas upp i 1 sekund och slutar vid tiden = 0:00:8.

• Duration Eftersom egenskapen för animeringen har angetts till 10 sekunder, behåller animeringen sitt slutliga värde i två sekunder innan den slutar vid tidpunkten = 0:0:10.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
  WindowTitle="KeyFrame Animations">

  <Border Width="400" BorderBrush="Black">  
    
    <Rectangle Fill="Blue" 
      Width="50" Height="50"
      HorizontalAlignment="Left">
      <Rectangle.RenderTransform>
        <TranslateTransform 
          x:Name="MyAnimatedTranslateTransform" 
          X="0" Y="0" />
      </Rectangle.RenderTransform>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <BeginStoryboard>
            <Storyboard>
            
              <!-- Animate the TranslateTransform's X property
                   from 0 to 350, then 50,
                   then 200 over 10 seconds. -->

              <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="MyAnimatedTranslateTransform"
                Storyboard.TargetProperty="X"
                Duration="0:0:10">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
                <LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
                <LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
                <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />                          
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers> 
    </Rectangle>
  </Border> 
</Page>

Interpoleringsmetoder

I föregående avsnitt nämndes att vissa nyckelramsanimeringar stöder flera interpoleringsmetoder. En animerings interpolation beskriver hur en animering övergår mellan värden under dess varaktighet. Genom att välja vilken typ av nyckelram som du använder med animeringen kan du definiera interpoleringsmetoden för nyckelramssegmentet. Det finns tre olika typer av interpoleringsmetoder: linjära, diskreta och spline-interpolering.

Linjär interpolation

Med linjär interpolering fortsätter animeringen med en konstant hastighet av segmentvaraktigheten. Om ett nyckelramssegment till exempel övergår från 0 till 10 under en varaktighet på 5 sekunder, matar animeringen ut följande värden vid de angivna tiderna:

Diskret interpolering

Med diskret interpolering hoppar animeringsfunktionen från ett värde till ett annat utan interpolation. Om ett nyckelramssegment övergår från 0 till 10 under en varaktighet på 5 sekunder matar animeringen ut följande värden vid de angivna tiderna:

Observera hur animeringen inte ändrar utdatavärdet förrän i slutet av segmentvaraktigheten.

Splininterpolering är mer komplex. Det beskrivs i nästa avsnitt.

Splininterpolation

Splined interpolation kan användas för att uppnå mer realistiska tidseffekter. Eftersom animeringar så ofta används för att imitera effekter som förekommer i verkligheten kan utvecklare behöva fin kontroll över acceleration och inbromsning av objekt och nära manipulering av tidssegment. Med spline-nyckelbilder kan du animera med splineinterpolering. Med andra nyckelramar anger du en Value och KeyTime. Med en spline-nyckelram anger du även en KeySpline. I följande exempel visas en enda spline-nyckelram för en DoubleAnimationUsingKeyFrames. Observera egenskapen KeySpline . Det är det som gör att en spline-nyckelram skiljer sig från de andra typerna av nyckelramar.

<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />

En kubisk Bezier-kurva definieras av en startpunkt, en slutpunkt och två kontrollpunkter. Egenskapen KeySpline för en spline-nyckelram definierar de två kontrollpunkterna i en Bezier-kurva som sträcker sig från (0,0) till (1,1). Den första kontrollpunkten styr kurvfaktorn för den första halvan av Bezier-kurvan, och den andra kontrollpunkten styr kurvfaktorn för den andra halvan av Bezier-segmentet. Den resulterande kurvan beskriver ändringshastigheten för den spline-nyckelramen. Desto brantare kurva, desto snabbare ändrar nyckelramen sina värden. När kurvan blir plattare ändrar nyckelramen sina värden långsammare.

Du kan använda KeySpline för att simulera fysiska banor som fallande vatten eller studsande bollar, eller tillämpa andra "ease in" och "ease out"-effekter på rörelseanimationer. För användarinteraktionseffekter som bakgrundstonningar eller kontrollknappsåterhämtning kan du använda splined interpolation för att påskynda eller sakta ned ändringshastigheten för en animering på ett visst sätt.

I följande exempel anges KeySpline 0,1 1,0, vilket skapar följande Bezier-kurva.

En nyckelspip med kontrollpunkter (0,0, 1,0) och (1,0, 0,0)

<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />

Den här nyckelramen animeras snabbt när den börjar, saktar ner och ökar sedan hastigheten igen innan den slutar.

I följande exempel anges KeySpline 0,5,0,25 0,75,1,0, vilket skapar följande Bezier-kurva.

En nyckelspline med kontrollpunkter (0.25, 0.5) och (0.75, 1.0)

<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />

Eftersom kurvan i Bezier-kurvan ändras mycket lite, animeras den här nyckelramen med en nästan konstant hastighet; den saktar ned något mot slutet.

I följande exempel används en DoubleAnimationUsingKeyFrames för att animera rektangelns position. Eftersom DoubleAnimationUsingKeyFrames använder SplineDoubleKeyFrame-objekt, använder övergången mellan varje nyckelbildvärde splininterpolering.

<!-- This rectangle is animated using a key frame animation
     with splined interpolation. -->
<Rectangle 
  Width="50"
  Height="50"
  Fill="Purple">  
  <Rectangle.RenderTransform>
    <TranslateTransform 
      x:Name="SplineAnimatedTranslateTransform" 
      X="0" Y="0" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>

          <!-- Animate the TranslateTransform's X property
               from its base value (0) to 500, then 200,
               then 350 over 15 seconds. -->
          <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="SplineAnimatedTranslateTransform"
            Storyboard.TargetProperty="X"
            Duration="0:0:15"
            RepeatBehavior="Forever">                
            <SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
            
            <SplineDoubleKeyFrame Value="200" KeyTime="0:0:10"  KeySpline="0.0,0.0 1.0,0.0" />

            <SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />
          </DoubleAnimationUsingKeyFrames>           
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers> 
</Rectangle>

Splined interpolation kan vara svårt att förstå; att experimentera med olika inställningar kan vara till hjälp. Med exemplet Nyckel-spline-animering kan du ändra nyckel-spline-värden och se vilken effekt det har på en animering.

Kombinera interpoleringsmetoder

Du kan använda nyckelramar med olika interpoleringstyper i en animering med en enda nyckelram. När två nyckelbildruteanimeringar med olika interpoleringar följer varandra används interpoleringsmetoden för den andra nyckelramen för att skapa övergången från det första värdet till det andra.

I följande exempel skapas en DoubleAnimationUsingKeyFrames som använder linjär, spline-baserad och diskret interpolation.

<!-- This rectangle is animated using a key frame animation
     with a combination of interpolation methods. -->
<Rectangle 
  Width="50"
  Height="50"
  Fill="Orange">  
  <Rectangle.RenderTransform>
    <TranslateTransform 
      x:Name="ComboAnimatedTranslateTransform" 
      X="0" Y="0" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>

          <!-- Animate the TranslateTransform's X property
               from its base value (0) to 500, then 200,
               then 350 over 15 seconds. -->
          <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="ComboAnimatedTranslateTransform"
            Storyboard.TargetProperty="X"
            Duration="0:0:15"
            RepeatBehavior="Forever">
            <DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
            <LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
            <SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  
              KeySpline="0.25,0.5 0.75,1" />                      
          </DoubleAnimationUsingKeyFrames>           
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers> 
</Rectangle>

Mer om varaktighet och nyckeltider

Precis som andra animeringar har key-frame-animeringar ett Duration attribut. Förutom att ange animeringens Durationmåste du ange vilken del av varaktigheten som ges till varje nyckelram. Du gör det genom att beskriva en KeyTime för varje av animeringens nyckelramar. Varje nyckelram KeyTime anger när nyckelramen slutar.

Egenskapen KeyTime anger inte hur länge nyckeltiden ska spelas upp. Hur lång tid en nyckelbildruta spelas upp bestäms av när nyckelbildrutan slutar, när den föregående nyckelbildrutan avslutades och animeringens varaktighet. Nyckeltider kan anges som ett tidsvärde, en procentandel eller som specialvärden Uniform eller Paced.

I följande lista beskrivs de olika sätten att ange nyckeltider.

TimeSpan-värden

Du kan använda TimeSpan värden för att ange en KeyTime. Värdet ska vara större än eller lika med 0 och mindre än eller lika med animeringens varaktighet. I följande exempel visas en animering med en varaktighet på 10 sekunder och fyra nyckelramar vars nyckeltider anges som tidsvärden.

• Den första nyckelramen animeras från basvärdet till 100 under de första 3 sekunderna och avslutas vid tiden 0:0:03.

• Den andra nyckelramen animerar från 100 till 200. Den börjar när den första nyckelramen slutar (vid tidpunkten = 3 sekunder) och spelas upp i 5 sekunder och slutar vid tidpunkten = 0:0:8.

• Den tredje nyckelramen animerar från 200 till 500. Den startar när den andra nyckelramen slutar (vid tiden = 8 sekunder) och spelas upp i 1 sekund och slutar vid tiden = 0:00:09.

• Den fjärde nyckelramen animerar från 500 till 600. Den startar när den tredje nyckelramen slutar (vid tidpunkten = 9 sekunder) och spelas upp i 1 sekund och slutar vid tidpunkten = 0:0:10.

<!-- This rectangle is animated with KeyTimes using TimeSpan values. 
     Goes to 100 in the first 3 seconds, 100 to 200 in 
     the next 5 seconds, 300 to 500 in the next second,
     and 500 to 600 in the final second. -->
<Rectangle Width="50" Height="50" Fill="Blue">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform01" X="10" Y="30" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform01" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed as TimeSpan values 
                 which are in the form of "hours:minutes:seconds". -->
            <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
            <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
            <LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
            <LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Procentvärden

Ett procentvärde anger att nyckelramen slutar med någon procentandel av animeringens Duration. I XAML anger du procentandelen som ett tal följt av symbolen % . I kod använder du FromPercent metoden och skickar den en Double som anger procentandelen. Värdet måste vara större än eller lika med 0 och mindre än eller lika med 100 procent. I följande exempel visas en animering med en varaktighet på 10 sekunder och fyra nyckelramar vars nyckeltider anges som procentandelar.

• Den första nyckelramen animeras från basvärdet till 100 under de första 3 sekunderna och slutar vid tidpunkt 0:0:3.

• Den andra nyckelramen animerar från 100 till 200. Den börjar när den första nyckelramen slutar (vid tidpunkten = 3 sekunder) och spelas upp i 5 sekunder och slutar vid tidpunkten = 0:0:8 (0,8 * 10 = 8).

• Den tredje nyckelramen animerar från 200 till 500. Den startar när den andra nyckelramen slutar (vid tidpunkten = 8 sekunder) och spelas upp i 1 sekund och slutar vid tidpunkten = 0:0:9 (0,9 * 10 = 9).

• Den fjärde nyckelramen animerar från 500 till 600. Den startar när den tredje nyckelramen slutar (vid tidpunkten 9 sekunder) och spelas upp i 1 sekund, vilket gör att den slutar vid tidpunkten 00:00:10 (1 * 10 = 10).

<!-- Identical animation behavior to the previous rectangle 
     but using percentage values for KeyTimes rather then TimeSpan. -->
<Rectangle Height="50" Width="50" Fill="Purple">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform02" X="10" Y="110" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform02" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed as Percentages. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
            <LinearDoubleKeyFrame Value="200" KeyTime="80%" />
            <LinearDoubleKeyFrame Value="500" KeyTime="90%" />
            <LinearDoubleKeyFrame Value="600" KeyTime="100%" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Specialvärde, enhetligt

Använd Uniform tidsinställningen när du vill att varje nyckelram ska ta samma tid.

En Uniform nyckeltid delar den tillgängliga tiden lika med antalet nyckelramar för att fastställa sluttiden för varje nyckelram. I följande exempel visas en animering med en varaktighet på 10 sekunder och fyra nyckelrutor vars nyckeltider anges som Uniform.

• Den första nyckelramen animerar från basvärdet till 100 under de första 2,5 sekunderna och slutar då = 0:0:2.5.

• Den andra nyckelramen animerar från 100 till 200. Den börjar när den första nyckelramen slutar (vid tiden 2,5 sekunder) och spelas upp i cirka 2,5 sekunder och slutar vid tidpunkten = 0:00:05.

• Den tredje nyckelramen animerar från 200 till 500. Den startar när den andra nyckelramen slutar (vid tidpunkten = 5 sekunder) och spelas upp i 2,5 sekunder och slutar vid tidpunkten = 0:0:7.5.

• Den fjärde nyckelramen animerar från 500 till 600. Den startar när den andra nyckelramen slutar (vid tidpunkten = 7,5 sekunder) och spelas upp i 2,5 sekunder och slutar vid tidpunkten = 0:0:1.

<!-- This rectangle is animated with KeyTimes using Uniform values.  -->
<Rectangle Height="50" Width="50" Fill="Red">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform03" X="10" Y="190" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform03" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed with values of Uniform. 
                 When a key time is set to "Uniform" the total allotted 
                 time of the animation is divided evenly between key frames.  
                 In this example, the total duration of the animation is 
                 ten seconds and there are four key frames each of which 
                 are set to "Uniform", therefore, the duration of each key frame 
                 is 3.3 seconds (10/3). -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Specialvärde, i takt

Använd Paced tidsinställning när du vill animera med konstant hastighet.

En Paced nyckeltid allokerar den tillgängliga tiden beroende på längden på varje nyckelbildruta för att fastställa varaktigheten för varje bildruta. Detta ger beteendet att animeringens hastighet eller takt förblir konstant. I följande exempel visas en animering med en varaktighet på 10 sekunder och tre nyckelramar vars nyckeltider anges som Paced.

<!-- Using Paced Values. Rectangle moves between key frames at 
     uniform rate except for first key frame
     because using a Paced value on the first KeyFrame in a 
     collection of frames gives a time of zero. -->
<Rectangle Height="50" Width="50" Fill="Orange">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform04" X="10" Y="270" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform04" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed with values of Paced. 
                 Paced values are used when a constant rate is desired. 
                 The time allocated to a key frame with a KeyTime of "Paced" 
                 is determined by the time allocated to the other key 
                 frames of the animation. This time is calculated to 
                 attempt to give a "paced" or "constant velocity" 
                 for the animation. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Observera att om den sista nyckelramens nyckeltid är Paced eller Uniform, anges dess lösta nyckeltid till 100 procent. Om den första nyckelramen i en animering med flera bildrutor är i takt kommer den lösta nyckeltiden att vara 0. (Om nyckelramsamlingen endast innehåller en enda nyckelram och det är en taktad nyckelram, kommer den beräknade nyckeltiden att sättas till 100 procent.)

Olika nyckelramar i en enda animering av nyckelramar kan använda olika nyckeltidstyper.

Kombinera nyckeltider, out-Of-Order-nyckelramar

Du kan använda nyckelramar med olika KeyTime värdetyper i samma animering. Och även om det rekommenderas att du infogar nyckelramar i den ordning de ska visas, är det inte nödvändigt. Animerings- och tidssystemet kan lösa nyckelramar som är i fel ordning. Nyckelramar med ogiltiga nyckeltider ignoreras.

I följande lista beskrivs proceduren som används för att bestämma nyckeltiderna för nyckelbilderna i en nyckelbildsanimation.

1. Lös TimeSpanKeyTime värden.

2. Fastställ animeringens totala interpoleringstid, den totala tid det tar för nyckelramsanimeringen att slutföra en vidarebefordran iteration.

   1. Om animeringens Duration inte Automatic är eller Foreverär den totala interpoleringstiden värdet för animeringens Duration egenskap.

   2. Annars är den totala interpoleringstiden det största TimeSpanKeyTime värdet som anges bland dess nyckelramar, om det finns några.

   3. Annars är den totala interpoleringstiden 1 sekund.

3. Använd värdet för total interpoleringstid för att beräkna PercentKeyTime värden.

4. Lös den sista nyckelramen om den inte redan har lösts i föregående steg. Om den sista nyckelramen KeyTime är Uniform eller Paced, är dess lösta tid lika med den totala interpoleringstiden.

   Om den första nyckelramen KeyTime är Paced och den här animeringen har mer än en nyckelram, löser du dess värde KeyTime till noll; om det bara finns en nyckelram och dess KeyTime värde är Paced, matchas den till den totala interpolationstiden, enligt beskrivningen i föregående steg.

5. Lös återstående UniformKeyTime värden: var och en får en lika stor del av den tillgängliga tiden. Under den här processen behandlas olösta PacedKeyTime värden tillfälligt som UniformKeyTime värden och får en tillfällig lösningstid.

6. Lös värdena för KeyTime nyckelramar med ospecificerade nyckeltider genom att använda de nyckelramar som deklarerats närmast dem som har lösta KeyTime värden.

7. Lös återstående PacedKeyTime värden. Paced KeyTime använd de närliggande nyckelramarnas värden för att fastställa den fastställda tiden. Målet är att säkerställa att animeringens hastighet är konstant kring den här nyckelramens bestämda tid.

8. Sortera nyckelramar i ordning efter matchad tid (primärnyckel) och deklarationsordning (sekundär nyckel), d.v.s. använd en stabil sortering baserat på de lösta nyckelramvärdena KeyTime .

Se även

• KeyTime
• KeySpline
• Timeline
• Exempel på nyckel-spline-animering
• Exempel på keyframe-animering
• Översikt över animering
• Översikt över Storyboards
• Key-Frame Guideämnen
• Översikt över timingsbeteenden