Animace založené na čase

Když se změní komponenta nebo celá uživatelská zkušenost, koncoví uživatelé to často pozorují dvěma způsoby: v průběhu času nebo okamžitě. Na platformě Windows se dává přednost prvnímu před druhým – uživatelské prostředí, které se okamžitě mění, často mate a překvapuje koncové uživatele, protože nemohou sledovat, co se stalo. Koncový uživatel pak vnímá zážitky jako rušivé a nepřirozené.

Místo toho můžete v průběhu času měnit uživatelské rozhraní, abyste koncového uživatele provázeli změnami, nebo ho upozornili na změny v prostředí. 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 animací založených na čase

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 napovídá, animaci explicitně spouštíte, aby došlo k aktualizaci. 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.

• AnimaceBarevnéhoKlíčovéhoRámce
• 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, což znamená, v jakém okamžiku životního cyklu animace se tento „snímek“ pořídí. 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ů – zjistěte, kolik klíčových snímků obsahuje určité animace klíčových snímků.
  • StopBehavior – určuje chování animované hodnoty vlastnosti, když je zavolána funkce 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 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 tento vzorec v akci.

Příklad

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

animace

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

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

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