Animacje oparte na czasie dla

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 preferowane jest pierwsze nad drugim — doświadczenia użytkownika, które natychmiast się zmieniają, często mylą i zaskakują użytkowników końcowych, ponieważ nie są w stanie śledzić, co się dzieje. Następnie użytkownik końcowy postrzega doświadczenie jako szokujące i nienaturalne.

Zamiast tego możesz zmieniać interfejs użytkownika w czasie, aby poprowadzić użytkownika końcowego przez zmiany 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ę przez 300 milisekund jest przyjemniejsze niż natychmiastowe "teleportowanie" go tam. Korzystanie z animacji zamiast natychmiastowych zmian sprawia, że rezultat końcowy jest bardziej przyjemnym i atrakcyjnym doświadczeniem.

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:

Animacje jawne — zgodnie z nazwą, animację rozpoczynasz jawnie, aby wprowadzać aktualizacje. Niejawne animacje — te animacje są uruchamiane przez system w Twoim imieniu, gdy warunek zostanie spełniony.

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

• ColorKeyFrameAnimation
• QuaternionKeyFrameAnimation
• Animacja kluczowej ramki skalarnej
• 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ęć.

• Klatki kluczowe — są to pojedyncze "migawki", przez które animacja przechodzi podczas odtwarzania.
  • Zdefiniowano jako pary kluczy i wartości. Klucz reprezentuje postęp między 0 a 1, czyli gdzie w czasie trwania animacji ma miejsce ta "migawka". 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.
  • Iteracja – liczba lub nieskończone zachowanie powtarzania dla animacji.
  • IterationCount — liczba skończonych iteracji animacji klatek kluczowych.
  • Liczba klatek kluczowych — odczyt liczby klatek kluczowych w konkretnej 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.
   • Wymagana jest co najmniej jedna klatka kluczowa (klatka kluczowa 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 obiektu wizualnego 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ć Vector3KeyFrameAnimation (Offset jest typu Vector3). Zdefiniuj również odpowiednie ramki kluczowe dla elementu KeyFrameAnimation.

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

Następnie zdefiniujesz właściwości elementu KeyFrameAnimation, aby opisać jego czas trwania wraz z zachowaniem animowania 10 razy między dwiema pozycjami (bieżącą i <200,0,0>).

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Microsoft.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 = Microsoft.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}