Przegląd Zachowania chronometrażu

Artykuł
10/18/2023

W tym temacie opisano zachowania chronometrażu animacji i innych Timeline obiektów.

Wymagania wstępne

Aby zrozumieć ten temat, należy zapoznać się z podstawowymi funkcjami animacji. Aby uzyskać więcej informacji, zobacz Omówienie animacji.

Typy osi czasu

Element Timeline reprezentuje segment czasu. Udostępnia właściwości, które umożliwiają określenie długości tego segmentu, kiedy ma się rozpocząć, ile razy będzie powtarzać, jak szybko postępuje w tym segmencie i nie tylko.

Klasy dziedziczone z klasy osi czasu zapewniają dodatkowe funkcje, takie jak animacja i odtwarzanie multimediów. WPF udostępnia następujące Timeline typy.

Typ osi czasu	opis
AnimationTimeline	Abstrakcyjna klasa bazowa dla Timeline obiektów, które generują wartości wyjściowe dla właściwości animowania.
MediaTimeline	Generuje dane wyjściowe z pliku multimedialnego.
ParallelTimeline	Typ tej TimelineGroup grupy i kontroluje obiekty podrzędne Timeline .
Storyboard	Typ, który zawiera informacje o określaniu ParallelTimeline wartości docelowej dla obiektów osi czasu, które zawiera.
Timeline	Abstrakcyjna klasa bazowa, która definiuje zachowania chronometrażu.
TimelineGroup	Klasa abstrakcyjna dla Timeline obiektów, które mogą zawierać inne Timeline obiekty.

Właściwości kontrolujące długość osi czasu

Element Timeline reprezentuje segment czasu, a długość osi czasu można opisać na różne sposoby. W poniższej tabeli zdefiniowano kilka terminów opisujących długość osi czasu.

Okres	opis	Właściwości
Prosty czas trwania	Czas potrzebny na wykonanie pojedynczej iteracji do przodu.	Duration
Jedno powtórzenie	Czas potrzebny do gry na osi czasu raz i, jeśli AutoReverse właściwość jest prawdziwa, grać do tyłu raz.	Duration, AutoReverse
Aktywny okres	Czas potrzebny na ukończenie wszystkich powtórzeń określonych przez jego RepeatBehavior właściwość na osi czasu.	Duration, AutoReverse, RepeatBehavior

Właściwość Duration

Jak wspomniano wcześniej, oś czasu reprezentuje segment czasu. Długość tego segmentu zależy od osi czasu Duration. Gdy oś czasu osiągnie koniec jego trwania, przestanie być odtwarzana. Jeśli oś czasu zawiera osie czasu podrzędne, również przestają grać. W przypadku animacji parametr określa czas Duration przejścia animacji z wartości początkowej na wartość końcową. Czas trwania osi czasu jest czasami nazywany jego prostym czasem trwania, aby odróżnić czas trwania pojedynczej iteracji i łączny czas odtwarzania animacji, w tym powtórzeń. Możesz określić czas trwania przy użyciu wartości czasu skończonego lub wartości Automatic specjalnych lub Forever. Czas trwania animacji powinien być rozpoznawany TimeSpan jako wartość, aby można było przechodzić między wartościami.

W poniższym przykładzie pokazano wartość z DoubleAnimation wartością z Duration 5 sekundami.

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

Osie czasu kontenera, takie jak Storyboard i ParallelTimeline, mają domyślny czas trwania Automatic, co oznacza, że automatycznie kończą się, gdy ostatnie dziecko przestanie grać. W poniższym przykładzie pokazano Storyboard , którego Duration rozpoznawanie wynosi pięć sekund, czas potrzebny na ukończenie wszystkich obiektów podrzędnych DoubleAnimation .

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

Duration Ustawiając oś czasu kontenera na TimeSpan wartość, można wymusić odtwarzanie dłużej lub krótsze niż jego obiekty podrzędneTimeline. Jeśli ustawisz Duration wartość na mniejszą niż długość obiektów podrzędnych Timeline osi czasu kontenera, obiekty podrzędne Timeline przestaną być odtwarzane, gdy oś czasu kontenera będzie działać. Poniższy przykład ustawia element Duration Storyboard z poprzednich przykładów na trzy sekundy. W rezultacie pierwszy DoubleAnimation zatrzymuje postęp po trzech sekundach, gdy animuje szerokość prostokąta docelowego do 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>

Właściwość RepeatBehavior

Właściwość RepeatBehavior kontrolki Timeline określa, ile razy powtarza swój prosty czas trwania. RepeatBehavior Za pomocą właściwości można określić liczbę powtórzeń osi czasu (iteracji Count) lub łączny czas odtwarzania (powtórzenieDuration). W obu przypadkach animacja przechodzi przez tyle przebiegów początkowych, ile jest niezbędnych do wypełnienia żądanej liczby lub czasu trwania. Domyślnie osie czasu mają liczbę 1.0iteracji , co oznacza, że grają raz i w ogóle nie powtarzają.

W poniższym przykładzie użyto RepeatBehavior właściwości , aby wykonać DoubleAnimation odtwarzanie przez dwa razy prosty czas trwania, określając liczbę iteracji.

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

W następnym przykładzie użyto RepeatBehavior właściwości , aby grać DoubleAnimation przez połowę jego prostego czasu trwania.

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

Jeśli ustawisz RepeatBehavior właściwość elementu Timeline na Foreverwartość , Timeline powtarza się do momentu zatrzymania interakcyjnego lub przez system chronometrażu. W poniższym przykładzie użyto RepeatBehavior właściwości , aby grać DoubleAnimation na czas nieokreślony.

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

Aby uzyskać dodatkowy przykład, zobacz Repeat an Animation (Powtarzanie animacji).

Właściwość AutoReverse

Właściwość AutoReverse określa, czy Timeline element będzie odtwarzany wstecz na końcu każdej iteracji do przodu. Poniższy przykład ustawia właściwość DoubleAnimationtruena AutoReverse , w wyniku czego animuje od zera do 100, a następnie od 100 do zera. Gra w sumie 10 sekund.

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

Gdy używasz Count wartości do określenia RepeatBehavior wartości i Timeline AutoReverse właściwości , Timelinetrueto jedno powtórzenie składa się z jednej iteracji do przodu, a następnie jednej iteracji wstecznej. Poniższy przykład ustawia element RepeatBehavior DoubleAnimation z poprzedniego przykładu na wartość z Count dwóch. W rezultacie gra przez 20 sekund: do przodu przez pięć sekund, do tyłu DoubleAnimation przez pięć sekund, do przodu przez 5 sekund ponownie, a następnie do tyłu przez pięć sekund.

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

Jeśli oś czasu kontenera zawiera obiekty podrzędne Timeline , zostaną one odwrócone, gdy oś czasu kontenera będzie. Aby uzyskać dodatkowe przykłady, zobacz Określanie, czy oś czasu automatycznie odwraca się.

Właściwość BeginTime

Właściwość BeginTime umożliwia określenie, kiedy rozpoczyna się oś czasu. Godzina rozpoczęcia osi czasu jest względna względem osi czasu nadrzędnej. Godzina rozpoczęcia 00 sekund oznacza, że oś czasu jest uruchamiana natychmiast po uruchomieniu elementu nadrzędnego; każda inna wartość tworzy przesunięcie między rozpoczęciem odtwarzania osi czasu nadrzędnego a momentem odtwarzania osi czasu podrzędnego. Na przykład godzina rozpoczęcia dwóch sekund oznacza, że oś czasu rozpoczyna odtwarzanie, gdy jego element nadrzędny osiągnął czas dwóch sekund. Domyślnie wszystkie osie czasu mają czas rozpoczęcia równy zero sekund. Możesz również ustawić czas rozpoczęcia osi czasu na nullwartość , co uniemożliwia rozpoczęcie osi czasu. W WPF należy określić wartość null przy użyciu rozszerzenia znaczników x:Null.

Należy pamiętać, że czas rozpoczęcia nie jest stosowany za każdym razem, gdy oś czasu powtarza się ze względu na jego RepeatBehavior ustawienie. Gdyby utworzyć animację z wartością BeginTime 10 sekund i RepeatBehavior Forever10 sekund, zanim animacja zostanie odtworzona po raz pierwszy, ale nie dla każdego kolejnego powtórzenia. Jeśli jednak oś czasu nadrzędnego animacji miała być uruchamiana lub powtarzana, wystąpi 10-sekundowe opóźnienie.

Właściwość jest przydatna BeginTime w przypadku oszałamiających osi czasu. Poniższy przykład tworzy obiekt Storyboard , który zawiera dwa obiekty podrzędne DoubleAnimation . Pierwsza animacja ma Duration pięć sekund, a druga ma Duration 3 sekundy. W przykładzie ustawia BeginTime wartość sekundy DoubleAnimation na 5 sekund, aby rozpoczynała odtwarzanie po pierwszym DoubleAnimation zakończeniu.

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

Właściwość FillBehavior

Gdy wartość Timeline osiągnie koniec całkowitego aktywnego czasu trwania, właściwość określa, FillBehavior czy zatrzymuje się, czy przechowuje ostatnią wartość. Animacja z wartością FillBehavior HoldEnd "przechowuje" jej wartość wyjściową: animowana właściwość zachowuje ostatnią wartość animacji. Wartość Stop powoduje, że animacja przestaje wpływać na jej właściwość docelową po zakończeniu.

Poniższy przykład tworzy obiekt Storyboard , który zawiera dwa obiekty podrzędne DoubleAnimation . Oba DoubleAnimation obiekty animują Width od Rectangle 0 do 100. Rectangle Elementy mają nie animowane Width wartości 500 [niezależnych pikseli urządzenia].

Właściwość FillBehavior pierwszego DoubleAnimation jest ustawiona na HoldEndwartość , wartość domyślna. W rezultacie szerokość prostokąta pozostaje na 100 po zakończeniu DoubleAnimation .
Właściwość FillBehavior drugiej DoubleAnimation jest ustawiona na Stopwartość . W rezultacie Width drugi Rectangle zostanie przywrócony do 500 po zakończeniu DoubleAnimation .

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

Właściwości kontrolujące szybkość osi czasu

Klasa Timeline udostępnia trzy właściwości określające jego szybkość:

SpeedRatio — Określa, że współczynnik względem jego elementu nadrzędnego, w którym czasie postępuje dla elementu Timeline. Wartości większe niż jeden zwiększają szybkość obiektów podrzędnych Timeline i i ich obiektów podrzędnych Timeline ; wartości między zerem a jednym spowalniają. Wartość jednej wskazuje, że Timeline postępuje w tej samej szybkości co jej element nadrzędny. Ustawienie SpeedRatio osi czasu kontenera wpływa również na wszystkie jego obiekty podrzędne Timeline .
AccelerationRatio — Określa wartość procentową Duration osi czasu spędzonej na przyspieszaniu. Przykład można znaleźć w temacie How to: Accelerate or Decelerate an Animation (Jak przyspieszyć lub zwolnić animację).
DecelerationRatio - Określa wartość procentową Duration osi czasu wydanej na decelerację. Przykład można znaleźć w temacie How to: Accelerate or Decelerate an Animation (Jak przyspieszyć lub zwolnić animację).