Animált Ikon

Az AnimatedIcon vezérlő animált képeket játszik le a felhasználói interakciókra és a vizualizáció állapotának változásaira válaszul.

Az animált ikonok felhívhatják a figyelmet egy felhasználói felületi összetevőre, például egy oktatóanyag következő gombjára, vagy egyszerűen szórakoztató és érdekes módon tükrözhetik az ikonhoz társított műveletet.

Az egyéni animációk a Adobe AfterEffects használatával hozhatók létre, és a Lottie-Windows kódtár segítségével animált ikonként használhatók a WinUI 3 alkalmazásban. További információért lásd a cikk későbbi részében a - A Lottie használata animált tartalom létrehozásához egy AnimatedIcon számára.

Az alábbi példa egy alapszintű animált keresési ikont mutat be, amelyet az Adobe AfterEffectsben hoztak létre és a Lottie-on keresztül rendereltek.

Ez a megfelelő vezérlő?

Akkor használja az AnimatedIcon vezérlőt, ha egy vezérlő ikonjának animálnia kell a vezérlővel való felhasználói interakcióra válaszul, például amikor egy felhasználó rámutat egy gombra, vagy rákattint rá.

Ne használjon AnimatedIcont, ha az animációt nem egy vizualizációs állapotváltás aktiválja, és egy loop játszik le, csak egyszer játszik le, vagy szüneteltethető. Használja helyette az AnimatedVisualPlayert.

Ne használja az AnimatedIcont ikonon kívül máshoz, vagy ha a vezérlő nem támogatja az IconElement vagy IconElementSource tulajdonságot. Használja helyette az AnimatedVisualPlayert.

Ha nincs szükség animált ikonra, használja helyette a FontIcon, a SymbolIcon vagy a BitmapIcon ikont.

Az AnimatedIcon és az AnimatedVisualPlayer közötti különbségek

Az AnimatedIcon egy IconElement, amely bárhol használható, ahol egy elem vagy iconElement szükséges (például NavigationViewItem.Icon), és egy Állapot tulajdonságon keresztül vezérelhető.

Az AnimatedVisualPlayer egy általánosabb animációs lejátszó, amely olyan módszerekkel vezérelhető, mint a Lejátszás és a Szünet, és bárhol használható egy alkalmazásban.

Animált tartalom létrehozása egy AnimatedIcon számára Lottie használatával

Az AnimatedIcon animációjának definiálása ugyanúgy kezdődik, mint egy AnimatedVisualPlayer animációjának definiálása. Létre kell hoznia vagy be kell szereznie a Lottie-fájlt, amelyet hozzá szeretne adni, és futtatnia kell a fájlt LottieGen. A LottieGen létrehoz egy C++/WinRT-osztályhoz tartozó kódot, amelyet aztán létrehozhat és használhat egy AnimatedIconnal.

Megjegyzés:

Az AutoSuggestBox vezérlő az AnimatedVisuals.AnimatedFindVisualSource osztályt használja, amelyet a LottieGen eszközzel hoztak létre.

Az animáció definíciójában jelölőket is definiálhat a lejátszási idő pozícióinak jelzéséhez. Ezután beállíthatja az AnimatedIcon állapotot ezekre a jelölőkre. Ha például a Lottie-fájlban "PointerOver" jelöléssel rendelkezik, beállíthatja az AnimatedIcon állapotot "PointerOver" értékre, és áthelyezheti az animációt erre a lejátszási pozícióra.

Az "Előtér" nevű Lottie-animáció színtulajdonságainak definiálása lehetővé teszi a szín beállítását az AnimatedIcon.Foreground tulajdonság használatával.

Recommendations

Tekintse meg az Icons for Windows Apps UX-útmutatóját, hogy az ikonok megfeleljenek a tervezési alapelveknek.
Az animált ikonok számának korlátozása egyetlen képernyőn vagy nézetben. Csak animált ikonok, amelyek felhívják a felhasználó figyelmét arra, hogy hol kell műveletet végeznie, vagy amikor műveletet hajt végre.

Animált ikon létrehozása

Fontos API-k:AnimatedIcon osztály

Nyissa meg a WinUI 3 Katalógus alkalmazást az AnimatedIcon működés közbeni megtekintéséhez

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Egy AnimatedIcon hozzáadása egy gombhoz

Az alábbi példa egy vissza gombot mutat be, amely egy animált vissza ikont jelenít meg egy PointerEntered eseményen.

A AnimatedBackVisualSource a LottieGen parancssori eszközzel létrehozott osztály.
A FallbackIconSource akkor használatos, ha az animációk nem játszhatók le, például a Windows régebbi verzióiban, amelyek nem támogatják a Lottie-animációkat.
Ha a felhasználó kikapcsolja az animációkat a rendszerbeállításaiban, az AnimatedIcon megjeleníti annak az állapotváltásnak az utolsó keretét, amelyben a vezérlők szerepeltek.

<Button PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited">
    <AnimatedIcon x:Name='BackAnimatedIcon'>
        <AnimatedIcon.Source>
            <animatedvisuals:AnimatedBackVisualSource/>
        </AnimatedIcon.Source>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Back'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "Normal");
}

Egy AnimáltIkon hozzáadása a NavigációsNézetElemhez

A NavigationViewItem vezérlő automatikusan beállítja a közös állapotokat egy Animált iconon a vezérlő állapota alapján, ha ezek a jelölők a Lottie animációban vannak definiálva.

Az alábbi példa például bemutatja, hogyan állíthat be egyéni animációt (GameSettingsIcon) a LottieGen eszköz által létrehozott:

<NavigationView.MenuItems>
    <NavigationViewItem Content = "Game Settings">
        <NavigationViewItem.Icon>
            <AnimatedIcon x:Name='GameSettingsIcon'>
                <AnimatedIcon.Source>
                    <animatedvisuals:AnimatedSettingsVisualSource/>
                </AnimatedIcon.Source>
                <AnimatedIcon.FallbackIconSource>
                    <FontIconSource FontFamily="Segoe MDL2 Assets" Glyph="&#xE713;"/>
                </AnimatedIcon.FallbackIconSource>
            </AnimatedIcon>
        </NavigationViewItem.Icon>
    </NavigationViewItem>
</NavigationView.MenuItems>

Animált beállítások ikon fogaskerék

A NavigationViewItem automatikusan beállítja a következő állapotokat az AnimatedIconon:

Normal
Rámutatás
Préselt
Kiválasztott
Nyomott/Kiválasztott
Kijelölt elem fölötti mutató

Ha GameSettingsIcon a "NormalToPointerOver" elemhez van definiálva egy jelölő, az ikon addig lesz animálva, amíg az egérmutató át nem lép a NavigationViewItem fölé. A jelölők létrehozásával kapcsolatos további információkért tekintse meg a következő szakaszt.

Animált jelölők definiálása

Az előző példában az egyéni GameSettingsIcon létrehozásához futtasson egy Lottie JSON-fájlt (jelölőkkel) a Windows LottieGen eszközzel az animációs kód C#-osztályként való létrehozásához.

Miután a Lottie-fájlt a LottieGenen keresztül futtatta, hozzáadhatja a CodeGen kimeneti osztályt a projektjéhez. További információért tekintse meg a LottieGen oktatóanyagot .

Az AnimatedIcon állapot új értékre állítása a Lottie animációban is beállít egy lejátszási pozíciót a régi állapotról az új állapotra való áttéréshez. Ezeket a lejátszási pozíciókat a Lottie-fájl jelölői is azonosítják. Az áttűnés kezdetének vagy végének konkrét jelölői is definiálhatók.

A AutoSuggestBox vezérlő például egy AnimatedIcon ikont használ, amely a következő állapotokkal animál:

Normal
Rámutatás
Préselt

A Lottie-fájlban jelölőket határozhat meg ezekkel az állapotnevekkel. A jelölőket az alábbiak szerint is definiálhatja:

Szúrja be a "To" szót az államnevek közé. Ha például egy "NormalToPointerOver" jelölőt határoz meg, az Animálticon állapot "Normál" értékről "PointerOver" értékre való módosítása esetén az a jelölő lejátszási helyére kerül.
Fűzze hozzá a "_Start" vagy "_End" utótagot egy jelölőnévhez. Ha például a "NormalToPointerOver_Start" és a "NormalToPointerOver_End" jelölőket definiálja, és az AnimatedIcon állapotot "Normál" értékről "PointerOver" értékre módosítja, az a _Start jelölő lejátszási helyzetére ugrik, majd animál a _End lejátszási pozícióba.

Az AnimatedIcon állapotváltozásainak leképezéséhez használt pontos algoritmus a jelölő lejátszási pozíciókra.

Ellenőrizze a fájlban található jelölőket a "[PreviousState]To[NewState]_Start" és "[PreviousState]To[NewState]_End" marker esetében. Ha mindkettő megtalálható, játssza le az "[PreviousState]To[NewState]_Start" és "[PreviousState]To[NewState]_End" közötti animációt.
Ha a(z) "[PreviousState]To[NewState]_Start" nem található, de a(z) "[PreviousState]To[NewState]_End" igen, akkor az "[PreviousState]To[NewState]_End" lejátszási pozícióhoz egy éles vágást hajtson végre.
Ha a(z) "[PreviousState]To[NewState]_End" nem található, de "[PreviousState]To[NewState]_Start" igen, akkor ugorjunk a(z) "[PreviousState]To[NewState]_Start" lejátszási pozícióra.
Ellenőrizze, hogy a megadott IAnimatedVisualSource2 jelölői megfelelőek-e a(z) "[PreviousState]To[NewState]" jelölőhöz. Ha megtaláljuk, akkor vágjunk azonnal a "[PreviousState]To[NewState]" lejátszási pozícióhoz.
Ellenőrizze, hogy az IAnimatedVisualSource2-hez megadott jelölők tartalmazzák-e a "[NewState]" jelölőt. Ha megtalálható, akkor élesen vágjon a "[NewState]" lejátszási pozícióra.
Ellenőrizze, hogy a megadott IAnimatedVisualSource2 jelölői rendelkeznek-e "To[NewState]_End" végződésű jelölőkkel. Ha bármilyen jelölőt talál, amelynek ilyen végződése van, az első, megfelelő végződéssel rendelkező jelölő lejátszási pozíciójára vágjon azonnal.
Ellenőrizze, hogy a(z) "[NewState]" elem egy lebegőpontosra van-e elemezve. Ha igen, az aktuális pozícióból az elemzett értékre animálódik.
Éles vágás a lejátszási pozíciónál 0.0.

Az alábbi példa egy Lottie JSON-fájl jelölőformátumát mutatja be. További részletekért tekintse meg az AnimatedIcon útmutatóját.

"markers":[{"tm":0,"cm":"NormalToPointerOver_Start","dr":0},{"tm":9,"cm":"NormalToPointerOver_End","dr":0},

{"tm":10,"cm":"NormalToPressed_Start","dr":0},{"tm":19,"cm":"NormalToPressed_End","dr":0},

{"tm":20,"cm":"PointerOverToNormal_Start","dr":0},{"tm":29,"cm":"PointerOverToNormal_End","dr":0},

{"tm":30,"cm":"PointerOverToPressed_Start","dr":0},{"tm":39,"cm":"PointerOverToPressed_End","dr":0},

{"tm":40,"cm":"PressedToNormal_Start","dr":0},{"tm":49,"cm":"PressedToNormal_End","dr":0},

{"tm":50,"cm":"PressedToPointerOver_Start","dr":0},{"tm":69,"cm":"PressedToPointerOver_End","dr":0},

{"tm":90,"cm":"PressedToNormal_Start","dr":0},{"tm":99,"cm":"PressedToNormal_End","dr":0},

{"tm":100,"cm":"PressedToPointerOver_Start","dr":0},{"tm":101,"cm":"PressedToPointerOver_End","dr":0}]

Önálló AnimatedIcon hozzáadása

Az alábbi példa egy gomb, amelyre kattintva a felhasználó elfogad egy üzenetet.

Az MyAcceptAnimation osztály a LottieGen eszközzel jön létre.

A FallbackIconSource animáció helyett az animációt fogja használni, ha az animációk nem játszhatók le, például a Windows olyan régebbi verzióiban, amelyek nem támogatják a Lottie-animációkat.

Ha a végfelhasználó kikapcsolja az animációkat a rendszerbeállításokban, az AnimatedIcon megjeleníti annak az állapotváltásnak az utolsó keretét, amelyben a vezérlők szerepeltek.

<Button PointerEntered="HandlePointerEntered" PointerExited="HandlePointerExited">
    <AnimatedIcon x:Name='AnimatedIcon1'>
        <local:MyAcceptAnimation/>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Accept'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.AnimatedIcon1, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.StackPaAnimatedIcon1nel1, "Normal");
}

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-02-25