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í knihovny Adobe AfterEffects a vykreslit pomocí knihovny Lottie-Windows, která se použije jako animovaná ikona v aplikaci WinUI 3. 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 animovanou ikonu, pokud se animace neaktivuje přechodem vizuálního stavu a přehrává se ve smyčce, přehrává se pouze jednou nebo 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

  • Projděte si pokyny k uživatelskému prostředí pro Cons pro Windows Apps a ujistěte se, že vaše ikony odpovídají principům návrhu.
  • 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

Ikona galerie WinUI 3 Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

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 jazyka C#.

Jakmile spustíte soubor Lottie prostřednictvím LottieGen, můžete do svého project 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");
}
  • Last updated on