Animace založené na čase pro

Když se změní komponenta v rámci systémů nebo celý uživatelský zážitek, koncoví uživatelé tyto změny často sledují dvěma způsoby: v průběhu času nebo okamžitě. Na platformě Windows je první možnost upřednostňována před druhou – uživatelské prostředí, které se okamžitě mění, často mate a překvapuje koncové uživatele, protože nemohou sledovat, co se děje. Koncový uživatel pak vnímá zážitek jako rušivý a nepřirozený.

Místo toho můžete časem měnit uživatelské rozhraní, aby usnadnilo postup koncovému uživateli, nebo ho upozornilo na změny v zážitku. Na platformě Windows se to provádí pomocí časových animací, označovaných také jako KeyFrameAnimations. KeyFrameAnimations umožňují měnit uživatelské rozhraní v průběhu času a řídit jednotlivé aspekty animace, včetně toho, jak a kdy se spustí, a jak dosáhne koncového stavu. Například animace objektu na novou pozici nad 300 milisekund je příjemnější než okamžité "teleportování" tam. Při použití animací místo okamžitých změn je čistý výsledek příjemnější a působivější.

Typy časových animací

Existují dvě kategorie časových animací, které můžete použít k vytváření krásných uživatelských prostředí ve Windows:

Explicitní animace – jak název označuje, explicitně spustíte animaci, která provede aktualizace. Implicitní animace – tyto animace spustí systém vaším jménem, když je splněna podmínka.

V tomto článku probereme, jak vytvářet a používat explicitní animace založené na čase pomocí KeyFrameAnimations.

U explicitních i implicitních animací založených na čase existují různé typy odpovídající různým typům vlastností CompositionObject, které můžete animovat.

• ColorKeyFrameAnimation
• QuaternionKeyFrameAnimation
• ScalarKeyFrameAnimation
• Vector2KeyFrameAnimation
• Vector3KeyFrameAnimation
• Vector4KeyFrameAnimation

Vytváření časových animací pomocí KeyFrameAnimations

Než popíšeme, jak pomocí KeyFrameAnimations vytvořit explicitní animace založené na čase, pojďme si projít několik konceptů.

• Klíčové rámce – jedná se o jednotlivé "snímky", kterými animace animuje.
  • Definováno jako páry klíč a hodnota. Klíč představuje průběh mezi 0 a 1, tedy v jaké části životnosti animace se daný "snímek" nachází. Druhý parametr představuje hodnotu vlastnosti v tuto chvíli.
• Vlastnosti KeyFrameAnimation – možnosti přizpůsobení, které můžete použít pro splnění potřeb uživatelského rozhraní.
  • DelayTime – doba před spuštěním animace po zavolání StartAnimation.
  • Doba trvání – doba trvání animace.
  • IterationBehavior – počet nebo nekonečné opakování chování animace.
  • IterationCount – počet konečných časů opakování animace klíčového rámce.
  • Počet klíčových snímků – informace o tom, kolik klíčových snímků je v rámci určité animace klíčových snímků.
  • StopBehavior – určuje, jak se hodnota vlastnosti animace chová při zavolání StopAnimation.
  • Směr – určuje směr animace pro přehrávání.
• Skupina animací – spuštění několika animací najednou
  • Často se používá, když chcete animovat více vlastností najednou.

Další informace naleznete v tématu CompositionAnimationGroup.

S ohledem na tyto koncepty si probereme obecný vzorec pro vytvoření KeyFrameAnimation:

1. Identifikujte Objekt CompositionObject a jeho odpovídající vlastnost, kterou potřebujete animovat.
2. Vytvořte šablonu typu KeyFrameAnimation compositoru, která odpovídá typu vlastnosti, kterou chcete animovat.
3. Pomocí šablony animace začněte přidávat klíčové rámce a definovat vlastnosti animace.
   • Vyžaduje se aspoň jeden klíčový rámec (100% nebo 1f keyframe).
   • Doporučuje se také definovat dobu trvání.
4. Jakmile budete připraveni spustit tuto animaci, zavolejte StartAnimation(...) na Objekt CompositionObject, který cílí na vlastnost, kterou chcete animovat. Konkrétně:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Pokud máte spuštěnou animaci a chcete zastavit animaci nebo skupinu animací, můžete použít tato rozhraní API:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Podívejme se na příklad, abychom viděli, jak tento vzorec funguje v praxi.

Příklad

V tomto příkladu chcete animovat posun vizuálu od <0 0 0 0> do <200 0 0,0> po 1 sekundu. Kromě toho chcete vizuál animovat mezi těmito pozicemi 10krát.

Nejprve začnete identifikací objektu CompositionObject a vlastnosti, kterou chcete animovat. V tomto případě je červený čtverec reprezentován vizuálem Composition s názvem redVisual. Spustíte animaci z tohoto objektu.

Dále, protože chcete animovat Offset vlastnost, musíte vytvořit Vector3KeyFrameAnimation (Offset je typu Vector3). Také definujete odpovídající klíčové rámce pro KeyFrameAnimation.

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

Poté definujete vlastnosti KeyFrameAnimation, které popisují dobu trvání spolu s chováním animace mezi dvěma pozicemi (aktuální a <200,0,0>) 10 krát.

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

Nakonec, pokud chcete spustit animaci, musíte ji spustit na vlastnosti CompositionObject.

redVisual.StartAnimation("Offset", animation);

Tady je celý kód.

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);
}