Időalapú animációk a következőhöz:

Amikor egy összetevő vagy egy teljes felhasználói élmény megváltozik, a végfelhasználók gyakran kétféleképpen észlelik: az idő múlásával vagy azonnal. A Windows platformon az előbbit részesítik előnyben az utóbbival szemben – a azonnal változó felhasználói élmények gyakran összezavarják és meglepik a végfelhasználókat, mert nem tudják követni a történteket. A végfelhasználó ezután zavarónak és természetellenesnek érzékeli az élményt.

Ehelyett idővel módosíthatja a felhasználói felületet, hogy végigvezesse a végfelhasználót, vagy értesítse őket a felhasználói élmény változásairól. A Windows platformon ez időalapú animációk, más néven KeyFrameAnimations használatával történik. A KeyFrameAnimations segítségével idővel módosíthatja a felhasználói felületet, és szabályozhatja az animáció minden aspektusát, beleértve az indítási és a befejezési állapotot is. Ha például egy objektumot több mint 300 ezredmásodpercnyi új helyre animálunk, az sokkal kellemesebb, mint azonnal "teleportálni" ott. Ha a pillanatnyi változások helyett animációkat használ, a nettó eredmény kellemesebb és vonzóbb élmény.

Időalapú animációk típusai

Az időalapú animációknak két kategóriája van, amelyek segítségével gyönyörű felhasználói élményeket hozhat létre Windows rendszeren:

Explicit animációk – ahogy a név is jelzi, ön explicit módon indítja el az animációt a frissítések elvégzéséhez. Implicit animációk – ezeket az animációkat a rendszer elindítja az Ön nevében egy feltétel teljesülése esetén.

Ebben a cikkben szó lesz arról, hogyan hozhat létre és használhat explicit időalapú animációkat a KeyFrameAnimations használatával.

Az explicit és implicit időalapú animációkhoz különböző típusok tartoznak, amelyek megfelelnek az animálható CompositionObjects különböző tulajdonságainak.

• ColorKeyFrameAnimation
• Kvaterniókulcs képkocka-animáció
• ScalarKeyFrameAnimation
• Vector2KeyFrameAnimation (2D vektor kulcskocka animáció)
• Vector3KeyFrameAnimation (Háromdimenziós kulcskocka animáció)
• Vector4KeyFrameAnimation

Időalapú animációk létrehozása a KeyFrameAnimations használatával

Mielőtt bemutatjuk, hogyan hozhat létre explicit időalapú animációkat a KeyFrameAnimations használatával, tekintsünk át néhány fogalmat.

• KeyFrames – Ezek azok az egyéni "pillanatképek", amelyeken az animáció átmegy.
  • Kulcs > értékpárként definiálva. A kulcs a 0 és 1 közötti előrehaladást jelöli, vagyis azt, hogy az animációs életben ez a "pillanatkép" hol tart. A másik paraméter jelenleg a tulajdonság értékét jelöli.
• KeyFrameAnimation Properties – testreszabási lehetőségek, amelyeket a felhasználói felület igényeinek megfelelően alkalmazhat.
  • DelayTime – az animáció indítása előtti idő a StartAnimation meghívása után.
  • Időtartam – az animáció időtartama.
  • IterationBehavior – az animációk száma vagy végtelen ismétlési viselkedése.
  • IterationCount – a KeyFrame-animációk véges száma.
  • KeyFrame Count ( Kulcskeretek száma) – megtudhatja, hogy egy adott KeyFrame-animáció hány KeyFrame-elemét tartalmazza.
  • StopBehavior – egy animáló tulajdonságérték viselkedését adja meg a StopAnimation meghívásakor.
  • Irány – az animáció lejátszási irányát határozza meg.
• Animációs csoport – egyszerre több animáció indítása.
  • Gyakran használják, ha egyszerre több tulajdonságot szeretne animálni.

További információ: CompositionAnimationGroup.

Ezeket a fogalmakat szem előtt tartva tekintsük át a KeyFrameAnimation létrehozásának általános képletét:

1. Azonosítsa a CompositionObject és annak megfelelő tulajdonságát, amelyet animálnia kell.
2. Hozzon létre egy KeyFrameAnimation Type sablont a compositorból, amely megfelel az animálni kívánt tulajdonság típusának.
3. Az animációs sablon használatával kezdje el hozzáadni a KeyFrame-eket, és definiálja az animáció tulajdonságait.
   • Legalább egy KeyFrame szükséges (a 100% vagy az 1f kulcskeret).
   • Javasoljuk, hogy az időtartamot is definiálja.
4. Ha készen áll az animáció futtatására, hívja meg a StartAnimation(...) parancsot a CompositionObjecten, és az animálni kívánt tulajdonságot célozza meg. Kifejezetten:
   • visual.StartAnimation("targetProperty", CompositionAnimation animation);
   • visual.StartAnimationGroup(AnimationGroup animationGroup);
5. Ha futó animációval rendelkezik, és le szeretné állítani az animációs vagy animációs csoportot, az alábbi API-kat használhatja:
   • visual.StopAnimation("targetProperty");
   • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Tekintsünk meg egy példát a képlet működés közbeni megtekintéséhez.

Example

Ebben a példában egy vizualizáció <eltolását szeretné animálni 0,0-ról><200,0,0-ra> 1 másodperc alatt. Emellett a vizualizációt 10-szer szeretné animálni ezek között a pozíciók között.

Először az animálni kívánt CompositionObject és tulajdonság azonosításával kell kezdenie. Ebben az esetben a piros négyzetet egy névvel ellátott redVisualkompozíciós vizualizáció jelöli. Ebből az objektumból indíthatja el az animációt.

Ezután, mivel animálni szeretné az Eltolás tulajdonságot, létre kell hoznia egy Vector3KeyFrameAnimationt (az eltolás Vektor3 típusú). A KeyFrameAnimation megfelelő kulcskereteit is meg kell határoznia.

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

Ezután definiálja a KeyFrameAnimation tulajdonságait annak időtartamának leírásához, valamint a két pozíció közötti animálási viselkedést (jelenlegi és <200,0,0>) 10-szer.

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

Végül egy animáció futtatásához el kell indítania egy CompositionObject tulajdonságon.

redVisual.StartAnimation("Offset", animation);

Itt a teljes 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);
}