Przegląd zachowań związanych z czasem

W tym temacie opisano zachowania czasowe animacji i innych obiektów Timeline.

Warunki 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

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 się powtarzać, jak szybko czas 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 typy Timeline.

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

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.

Właściwość Duration

Jak wspomniano wcześniej, oś czasu reprezentuje segment czasu. Długość tego segmentu jest określana przez oś czasu Duration. Gdy linia czasu osiągnie koniec swojego trwania, przestaje być odtwarzana. Jeśli oś czasu zawiera osie czasu podrzędne, również przestają grać. W przypadku animacji Duration określa czas 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 specjalnych Automatic lub Forever. Czas trwania animacji powinien być rozpoznawany jako wartość TimeSpan, aby można było przechodzić między wartościami.

W poniższym przykładzie przedstawiono DoubleAnimation z Duration, które wynosi pięć sekund.

<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 zostaną one automatycznie zakończone po zatrzymaniu odtwarzania ostatniego dziecka. W poniższym przykładzie pokazano Storyboard, którego Duration rozwiązuje się na pięć sekund, czyli czas potrzebny na ukończenie wszystkich jego 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>

Ustawiając Duration osi czasu kontenera na wartość TimeSpan, można wymusić odtwarzanie dłużej lub krócej niż obiekty podrzędne Timeline mogłyby być odtwarzane. Jeśli ustawisz Duration na wartość mniejszą niż długość podrzędnych względem osi czasu kontenera obiektów Timeline, obiekty podrzędne Timeline przestają być odtwarzane, gdy oś czasu kontenera przestaje działać. Poniższy przykład ustawia DurationStoryboard z poprzednich przykładów na trzy sekundy. W rezultacie pierwsza DoubleAnimation przestaje postępować po trzech sekundach, gdy zakończy animację zmieniając szerokość prostokąta docelowego na 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 elementu Timeline określa, ile razy powtarza się jego prosty czas trwania. Za pomocą właściwości RepeatBehavior można określić, ile razy oś czasu jest odtwarzana (iteracja Count) lub łączny czas odtwarzania (powtórzenie Duration). W obu przypadkach animacja przechodzi przez tyle pełnych cykli, ile jest niezbędnych do osiągnięcia żądanej liczby cykli lub czasu trwania. Domyślnie harmonogramy mają liczbę iteracji 1.0, co oznacza, że odtwarzają się raz i w ogóle się nie powtarzają.

W poniższym przykładzie użyto właściwości RepeatBehavior, aby odtworzyć DoubleAnimation na dwa razy dłuższy czas niż zwykle, 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 właściwości RepeatBehavior, aby DoubleAnimation grał przez połowę jego podstawowego czasu trwania.

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

Jeśli ustawisz właściwość RepeatBehaviorTimeline na Forever, Timeline powtarza się, dopóki nie zostanie zatrzymany interaktywnie lub przez system pomiaru czasu. W poniższym przykładzie użyto właściwości RepeatBehavior, aby DoubleAnimation odtwarzać w nieskończoność.

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

Właściwość AutoReverse

Właściwość AutoReverse określa, czy Timeline będzie się odtwarzać wstecz na końcu każdej iteracji w kierunku do przodu. Poniższy przykład ustawia właściwość AutoReverseDoubleAnimation na true; w rezultacie animuje od zera do 100, a następnie od 100 do zera. Trwa w sumie 10 sekund.

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

Jeśli używasz wartości Count, aby określić RepeatBehaviorTimeline, a właściwość AutoReverse tej Timeline jest true, pojedyncze powtórzenie składa się z jednej iteracji do przodu, a następnie jednej iteracji wstecznej. Poniższy przykład ustawia RepeatBehaviorDoubleAnimation z poprzedniego przykładu do wartości Count dwóch. W rezultacie DoubleAnimation gra przez 20 sekund: do przodu przez pięć sekund, do tyłu 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, odwracają się one, gdy odwraca się oś czasu kontenera. Aby uzyskać dodatkowe przykłady, zobacz Określanie, czy oś czasu automatycznie odwraca.

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 rozpoczęcie o dwóch sekundach oznacza, że oś czasu zacznie odtwarzać, gdy jej element nadrzędny osiągnie dwie sekundy. Domyślnie wszystkie osie czasu mają czas rozpoczęcia równy zero sekund. Możesz również ustawić czas rozpoczęcia osi czasu na null, co zapobiega uruchomieniu osi czasu. W WPF należy określić wartość null przy użyciu rozszerzenia x:Null Markup Extension.

Należy pamiętać, że godzina rozpoczęcia nie jest stosowana za każdym razem, gdy oś czasu powtarza się z powodu ustawienia RepeatBehavior. Jeśli utworzysz animację z BeginTime wynoszącym 10 sekund i RepeatBehavior o wartości Forever, wówczas będzie 10-sekundowe opóźnienie przed odtworzeniem animacji po raz pierwszy, ale nie dotyczy to każdego kolejnego powtórzenia. Jednakże, jeśli nadrzędna oś czasu animacji miałaby być restartowana lub powtarzana, wystąpiłoby 10-sekundowe opóźnienie.

Właściwość BeginTime jest przydatna do rozłożenia harmonogramu w czasie. Poniższy przykład tworzy Storyboard, który ma dwa podrzędne obiekty DoubleAnimation. Pierwsza animacja ma Duration o długości pięciu sekund, a druga ma Duration o długości trzech sekund. W przykładzie ustawiono BeginTime drugiego DoubleAnimation na 5 sekund, aby rozpoczynał odtwarzanie po zakończeniu pierwszego DoubleAnimation.

<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 Timeline osiągnie koniec całkowitego aktywnego czasu trwania, właściwość FillBehavior określa, czy zatrzymuje lub przechowuje ostatnią wartość. Animacja z parametrem FillBehavior wartości HoldEnd "przechowuje" swoją 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 Storyboard, który ma dwa obiekty podrzędne DoubleAnimation. Oba obiekty DoubleAnimation animują WidthRectangle w zakresie od 0 do 100. Elementy Rectangle mają nieanimowane wartości Width wynoszące 500 [niezależnych pikseli urządzenia].

• Właściwość FillBehavior pierwszego DoubleAnimation jest ustawiona na HoldEnd, wartość domyślną. W rezultacie szerokość prostokąta pozostaje na poziomie 100 po zakończeniu DoubleAnimation.

• Właściwość FillBehavior drugiej DoubleAnimation jest ustawiona na wartość Stop. W rezultacie Width drugiego Rectangle powróci 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 szybkość w relacji do elementu nadrzędnego, w jakim czasie postępuje dla elementu Timeline. Wartości większe niż jeden zwiększają szybkość Timeline i jego obiektów podrzędnych Timeline; wartości między zerem a jednym spowalniają. Wartość jednej wskazuje, że Timeline postępuje w tym samym tempie co jego element nadrzędny. Ustawienie SpeedRatio osi czasu kontenera wpływa również na wszystkie obiekty podrzędne Timeline.

• AccelerationRatio — określa wartość procentową Duration osi czasu poświęcanej na przyspieszenie. Aby zapoznać się z przykładem, zobacz Jak: przyspieszyć lub spowolnić animację.

• DecelerationRatio — określa wartość procentową Duration osi czasu wydanej na decelerację. Aby zapoznać się z przykładem, zobacz Jak: przyspieszyć lub zmniejszyć szybkość animacji.

Zobacz też

• Animacja — omówienie
• animacji i systemu chronometrażu — omówienie
• Przegląd zdarzeń czasowych
• tematy instruktażowe
• Przykładowe Zachowanie Czasowe Animacji