Animacje oparte na czasie

Gdy składnik w systemie lub całe środowisko użytkownika ulegnie zmianie, użytkownicy końcowi często obserwują go na dwa sposoby: w czasie lub natychmiast. Na platformie Windows pierwsze rozwiązanie jest preferowane nad drugim — doświadczenia użytkownika, które zmieniają się natychmiast, często mylą i zaskakują użytkowników końcowych, ponieważ nie są w stanie śledzić tego, co się stało. Następnie użytkownik końcowy postrzega doświadczenie jako nieprzyjemne i nienaturalne.

Zamiast tego możesz zmieniać interfejs użytkownika z czasem, aby poprowadzić użytkownika końcowego przez, lub powiadomić ich o zmianach w doświadczeniu. Na platformie Windows odbywa się to przy użyciu animacji opartych na czasie, znanych również jako KeyFrameAnimations. KeyFrameAnimations umożliwiają zmianę interfejsu użytkownika w czasie i kontrolowanie każdego aspektu animacji, w tym sposobu i czasu jej uruchamiania oraz sposobu osiągnięcia stanu końcowego. Na przykład animowanie obiektu na nową pozycję w ciągu 300 milisekund jest przyjemniejsze niż natychmiastowe "teleportowanie" go tam. Korzystanie z animacji zamiast nagłych zmian sprawia, że efekt końcowy jest bardziej przyjemny i atrakcyjny.

Typy animacji opartych na czasie

Istnieją dwie kategorie animacji opartych na czasie, których można użyć do tworzenia pięknych środowisk użytkownika w systemie Windows:

Jawne animacje – jak nazwa wskazuje, jawnie rozpoczynasz animację, aby wprowadzić aktualizacje. animacji implicitnych — te animacje są uruchamiane przez system za ciebie po spełnieniu warunku.

W tym artykule omówimy sposób tworzenia i używania jawnych animacji opartych na czasie za pomocą funkcji KeyFrameAnimations.

W przypadku animacji opartych zarówno na czasie jawnym, jak i niejawnych istnieją różne typy odpowiadające różnym typom właściwości obiektów CompositionObject, które można animować.

• Animacja z klatkami kluczowymi koloru
• Animacja Kluczowych Klatek Kwaternionowych
• Animacja kluczowych klatek skalara
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

Tworzenie animacji opartych na czasie za pomocą elementu KeyFrameAnimations

Zanim opiszemy sposób tworzenia jawnych animacji opartych na czasie za pomocą funkcji KeyFrameAnimations, omówimy kilka pojęć.

• Ramki kluczowe — są to pojedyncze "migawki", przez które animacja będzie przechodzić.
  • Zdefiniowano jako pary klucz-wartość. Klucz reprezentuje postęp między 0 a 1, czyli w którym momencie cyklu życia animacji to ujęcie ma miejsce. Drugi parametr reprezentuje wartość właściwości w tej chwili.
• KeyFrameAnimation Properties — opcje dostosowywania, które można zastosować, aby spełnić potrzeby interfejsu użytkownika.
  • DelayTime — czas przed rozpoczęciem animacji po wywołaniu funkcji StartAnimation.
  • Czas trwania — czas trwania animacji.
  • IteracjaBehavior — liczba lub nieskończone zachowanie powtarzania dla animacji.
  • IterationCount — liczba powtórzeń animacji z klatkami kluczowymi.
  • Liczba klatek kluczowych — odczyt liczby klatek kluczowych w określonej animacji klatek kluczowych.
  • StopBehavior — określa zachowanie wartości właściwości animowania, gdy jest wywoływana funkcja StopAnimation.
  • Direction — określa kierunek animacji do odtwarzania.
• Grupa animacji — uruchamianie wielu animacji jednocześnie.
  • Często używane podczas animowania wielu właściwości w tym samym czasie.

Aby uzyskać więcej informacji, zobacz CompositionAnimationGroup.

Mając na uwadze te pojęcia, omówimy ogólną formułę tworzenia elementu KeyFrameAnimation:

1. Zidentyfikuj obiekt CompositionObject i jego odpowiednią właściwość, którą chcesz animować.
2. Utwórz szablon typu KeyFrameAnimation komponatora pasujący do typu właściwości, którą chcesz animować.
3. Korzystając z szablonu animacji, zacznij dodawać ramki kluczowe i definiować właściwości animacji.
   • Wymagany jest co najmniej jeden KeyFrame (100% lub 1f).
   • Zaleca się również zdefiniowanie czasu trwania.
4. Gdy wszystko będzie gotowe do uruchomienia tej animacji, wywołaj metodę StartAnimation(...) w obiekcie CompositionObject, kierując ją do właściwości, którą chcesz animować. Specyficznie:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Jeśli masz uruchomioną animację i chcesz zatrzymać animację lub grupę animacji, możesz użyć następujących interfejsów API:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Przyjrzyjmy się przykładowi, aby zobaczyć, jak działa ta formuła.

Przykład

W tym przykładzie chcesz animować przesunięcie wizualizacji z <0,0,0> do <200,0,0> w ciągu 1 sekundy. Ponadto chcesz zobaczyć animację wizualną między tymi pozycjami 10 razy.

Najpierw należy zidentyfikować obiekt CompositionObject i właściwość, którą chcesz animować. W tym przypadku czerwony kwadrat jest reprezentowany przez kompozycję wizualną o nazwie redVisual. Animacja rozpoczyna się od tego obiektu.

Następnie, ponieważ chcesz animować właściwość Offset, musisz utworzyć element Vector3KeyFrameAnimation (przesunięcie ma typ Vector3). Zdefiniuj również odpowiednie ramki kluczowe dla elementu KeyFrameAnimation.

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

Następnie zdefiniuj właściwości elementu KeyFrameAnimation, aby określić czas trwania wraz z zachowaniem animacji między dwoma pozycjami (bieżące i <200,0,0>) 10 razy.

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

Na koniec, aby uruchomić animację, należy uruchomić ją we właściwości CompositionObject.

redVisual.StartAnimation("Offset", animation);

Oto pełny kod.

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}