Sdílet prostřednictvím

Animovaná ikona

Ovládací prvek AnimatedIcon přehrává animované obrázky v reakci na interakci uživatele a změny vizuálního stavu.

Animované ikony můžou upoutat pozornost na součást uživatelského rozhraní, jako je například další tlačítko v kurzu, nebo jednoduše odrážejí akci přidruženou k ikoně zábavným a zajímavým způsobem.

Vlastní animace je možné vytvořit pomocí Adobe AfterEffects a vykreslit pomocí knihovny Lottie-Windows pro použití jako animované ikony v aplikaci WinUI. Další podrobnosti najdete v části o použití Lottie k vytvoření animovaného obsahu pro animovanou ikonu dále v tomto článku.

Následující příklad ukazuje základní ikonu animovaného vyhledávání, která byla vytvořena v aplikaci Adobe AfterEffects a vykreslena prostřednictvím Lottie.

ikona animovaného hledání

Je to správná kontrola?

Použijte ovládací prvek AnimatedIcon, když ikona ovládacího prvku musí animovat v reakci na interakci uživatele s ovládacím prvek, například když uživatel najede myší na tlačítko nebo na něj klikne.

Nepoužívejte AnimatedIcon, pokud animaci nespouští přechod vizuálního stavu a pokud se přehrává ve smyčce, přehraje se pouze jednou, nebo pokud ji lze pozastavit. Místo toho použijte AnimatedVisualPlayer.

Nepoužívejte AnimatedIcon pro nic jiného než ikonu nebo kde ovládací prvek nepodporuje IconElement nebo IconElementSource vlastnost. Místo toho použijte AnimatedVisualPlayer.

Pokud není nutná animovaná ikona, použijte FontIcon , SymbolIconnebo BitmapIcon.

Rozdíly mezi AnimatedIcon a AnimatedVisualPlayer

AnimatedIcon je IconElement, který lze použít kdekoli je vyžadován prvek nebo IconElement (například NavigationViewItem.Icon), a je řízen vlastností State.

AnimatedVisualPlayer je obecnější animační přehrávač, který je řízen metodami, jako je Play a Pause, a lze jej použít kdekoli v aplikaci.

Použití Lottie k vytvoření animovaného obsahu pro AnimatedIcon

Definování animace pro AnimationIcon začíná stejně jako proces definovat animaci pro AnimatedVisualPlayer. Musíte vytvořit nebo získat soubor Lottie pro ikonu, kterou chcete přidat a spustit tento soubor prostřednictvím LottieGen. LottieGen generuje kód pro třídu C++/WinRT, kterou pak můžete instancovat a použít s AnimatedIcon.

Poznámka:

Ovládací prvek AutoSuggestBox používá třídu AnimatedVisuals.AnimatedFindVisualSource, která byla vygenerována pomocí nástroje LottieGen.

Můžete také definovat značky v definici animace, které označují pozice doby přehrávání. Na tyto značky pak můžete nastavit stav AnimatedIcon. Pokud máte například v souboru Lottie pozici přehrávání označenou jako PointerOver, můžete nastavit stav AnimatedIcon na "PointerOver" a přesunout animaci na tuto pozici přehrávání.

Nastavení vlastnosti barvy v animaci Lottie s názvem "Popředí" vám umožňuje nastavit barvu pomocí vlastnosti AnimatedIcon.Foreground.

Recommendations

  • Aby vaše ikony odpovídaly principům návrhu, projděte si pokyny k uživatelskému prostředí pro ikony pro aplikace pro Windows.
  • Omezte počet animovaných ikon na jedné obrazovce nebo zobrazení. Ikony animujte pouze tehdy, abyste upoutali pozornost uživatele na místo, kde potřebuje provést akci, nebo když sám nějakou akci provádí.

Vytvoření animované ikony

Otevření aplikace Galerie WinUI 3 a zobrazení animovaného Iconu v akci

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Přidání animovaného Iconu na tlačítko

Následující příklad ukazuje tlačítko zpět, které zobrazuje animovanou ikonu zpět při události PointerEntered.

  • AnimatedBackVisualSource je třída vytvořená pomocí nástroje příkazového řádku LottieGen.
  • FallbackIconSource se používá, když se animace nedají přehrát, například ve starších verzích Windows, které nepodporují animace Lottie.
  • Pokud uživatel vypne animace v nastavení systému, AnimationIcon zobrazí konečný rámec přechodu stavu, ve které byly ovládací prvky.
<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");
}

Přidání animovaného objektu Icon do NavigationViewItem

Ovládací prvek NavigationViewItem automaticky nastaví běžné stavy na AnimationIcon na základě stavu ovládacího prvku, pokud jsou tyto značky definovány v animaci Lottie.

Následující příklad například ukazuje, jak nastavit vlastní animaci (GameSettingsIcon), kterou vygeneroval nástroj LottieGen:

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

animované ozubené kolo nastavení

NavigationViewItem automaticky nastaví následující stavy na AnimatedIcon:

  • Normální
  • Ukazatel myši
  • Stlačený
  • Vybráno
  • StisknutoVybráno
  • UkazatelNadVybraným

Pokud GameSettingsIcon má definovanou značku pro NormalToPointerOver, ikona se bude animovat, dokud se ukazatel nepřesune přes NavigationViewItem. Další informace o vytváření značek najdete v následující části.

Definice značek AnimatedIcon

Pokud chcete vytvořit vlastní GameSettingsIcon v předchozím příkladu, spusťte soubor JSON Lottie (se značkami) prostřednictvím nástroje Windows LottieGen a vygenerujte animační kód jako třídu C#.

Jakmile spustíte soubor Lottie prostřednictvím LottieGen, můžete do projektu přidat výstupní třídu CodeGen. Další informace najdete v kurzu LottieGen.

Nastavení stavu AnimatedIcon na novou hodnotu také nastaví pozici přehrávání v animaci Lottie pro přechod ze starého stavu do nového stavu. Tyto pozice přehrávání jsou také identifikovány značkami v souboru Lottie. Je také možné definovat konkrétní značky pro začátek přechodu nebo konec přechodu.

Například ovládací prvek AutoSuggestBox používá animovaný prvek AnimatedIcon, který se animuje v následujících stavech:

  • Normální
  • Ukazatel myši
  • Stlačený

Značky můžete definovat v souboru Lottie s těmito názvy států. Značky můžete definovat také takto:

  • Vložte "Do" mezi názvy států. Pokud například definujete značku NormalToPointerOver, změna stavu AnimatedIcon z "Normální" na "PointerOver" způsobí, že se přesune na pozici přehrávání této značky.
  • K názvu značky připojte "_Start" nebo "_End". Například definování značek "NormalToPointerOver_Start" a "NormalToPointerOver_End" a změna stavu AnimatedIcon z "Normální" na "PointerOver" způsobí, že přejde na bod přehrávání _Start a pak se animuje na bod přehrávání _End.

Přesný algoritmus použitý k mapování změn stavů animované ikony na pozice přehrávání značek:

  • Zkontrolujte značky zadaného souboru s ohledem na značky "[PreviousState]To[NewState]_Start" a "[PreviousState]To[NewState]_End". Pokud se najde obojí, přehraje se animace z "[PreviousState]To[NewState]_Start" do "[PreviousState]To[NewState]_End".
  • Pokud "[PreviousState]To[NewState]_Start" nebyla nalezena, ale "[PreviousState]To[NewState]_End" byla nalezena, pak tvrdě přesuňte na pozici přehrávání "[PreviousState]To[NewState]_End".
  • Pokud "[PreviousState]To[NewState]_End" není nalezen, ale "[PreviousState]To[NewState]_Start" je nalezena, pak proveďte pevný výřez na pozici přehrávání "[PreviousState]To[NewState]_Start".
  • Zkontrolujte, zda značky IAnimatedVisualSource2 odpovídají značce "[PreviousState]To[NewState]". Pokud se najde, proveďte ostrý střih na pozici přehrávání "[PreviousState]To[NewState]".
  • Zkontrolujte, zda značky poskytnuté IAnimatedVisualSource2 obsahují značku "[NewState]". Pokud se najde, pak přímo přejít na místo přehrávání "[NewState]".
  • Zkontrolujte, zda některá ze zadaných značek IAnimatedVisualSource2 končí na "To[NewState]_End". Pokud je nalezena nějaká značka s tímto koncem, rychle přerušte přehrávání na první nalezenou značku s odpovídající koncovou polohou přehrávání.
  • Zkontrolujte, jestli se funkce [NewState] parsuje na plovoucí hodnotu. Pokud ano, přesune se z aktuální pozice na parsovanou hodnotu s pohyblivou desetinnou čárkou.
  • Přímý střih na pozici přehrávání 0,0.

Následující příklad ukazuje formát značky v souboru Lottie JSON. Další podrobnosti najdete v doprovodných materiálech AnimatedIcon.

"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}]

Přidání samostatného animovaného Iconu

Následující příklad je tlačítko, které uživatel kliknutím přijme výzvu.

Třída MyAcceptAnimation je vytvořena pomocí nástroje LottieGen.

FallbackIconSource se použije místo animace, když se animace nedají přehrát, například ve starších verzích Windows, které nepodporují animace Lottie.

Pokud koncový uživatel vypne animace v nastavení systému, Funkce AnimatedIcon zobrazí konečný rámec přechodu stavu, ve kterém byly ovládací prvky.

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

Univerzální platforma Windows a WinUI 2

Důležité

Informace a příklady v tomto článku jsou optimalizované pro aplikace, které používají Windows App SDK a WinUI 3, ale obecně platí pro aplikace pro UPW, které používají WinUI 2. Informace o konkrétních platformách a příklady najdete v referenčních informacích k rozhraní API pro UPW.

Tato část obsahuje informace potřebné pro použití ovládacího prvku v aplikacích UWP nebo WinUI 2.

Aplikace AnimatedIcon pro UPW vyžadují WinUI 2. Další informace, včetně pokynů k instalaci, najdete v tématu WinUI 2. Rozhraní API pro tento ovládací prvek se nacházejí v oboru názvů Microsoft.UI.Xaml.Controls.

Pokud chcete použít kód v tomto článku s WinUI 2, použijte alias v JAZYCE XAML (používáme muxc) k reprezentaci rozhraní API knihovny uživatelského rozhraní Systému Windows, která jsou součástí vašeho projektu. Další informace najdete v tématu Začínáme s WinUI 2 .

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:AnimatedIcon />
  • Last updated on