AnimowanaIkona

Kontrolka AnimatedIcon odtwarza animowane obrazy w odpowiedzi na zmiany interakcji użytkownika i stanu wizualizacji.

Animowane ikony mogą zwracać uwagę na składnik interfejsu użytkownika, taki jak następny przycisk w samouczku, lub po prostu odzwierciedlać akcję skojarzoną z ikoną w zabawny i interesujący sposób.

Niestandardowe animacje można tworzyć za pomocą programu Adobe AfterEffects i renderować z biblioteką Lottie-Windows do użycia jako animowana ikona w aplikacji WinUI. Aby uzyskać więcej szczegółów, zobacz Użycie Lottie do tworzenia animowanej treści dla AnimatedIcon w dalszej części tego artykułu.

W poniższym przykładzie przedstawiono podstawową animowaną ikonę wyszukiwania utworzoną w rozwiązaniu Adobe AfterEffects i renderowaną za pośrednictwem aplikacji Lottie.

Czy jest to właściwa kontrola?

Użyj kontrolki AnimatedIcon, gdy ikona kontrolki musi animować w odpowiedzi na interakcję użytkownika z kontrolką, na przykład gdy użytkownik najecha kursorem na przycisk lub klika go.

Nie używaj ikony animowanej, jeśli animacja nie jest wyzwalana przez wizualne przejście stanu i jest odtwarzana w pętli, odtwarza się tylko raz lub może zostać wstrzymana. Zamiast tego użyj animowanegoVisualPlayera.

Nie używaj AnimatedIcon do niczego innego niż jako ikony lub jeśli kontrolka nie obsługuje właściwości IconElement ani IconElementSource. Zamiast tego użyj animowanegoVisualPlayera.

Jeśli ikona animowana nie jest wymagana, zamiast tego użyj polecenia FontIcon, SymbolIcon lub BitmapIcon.

Różnice między Animowanym Ikoną a Animowanym Odtwarzaczem Wizualizacji

AnimatedIcon to IconElement, który może być używany wszędzie tam, gdzie wymagany jest element lub IconElement (na przykład NavigationViewItem.Icon), i jest kontrolowany za pomocą właściwości State.

AnimowanyVisualPlayer jest bardziej ogólnym odtwarzaczem animacji, który jest kontrolowany za pomocą metod, takich jak Odtwarzanie i wstrzymywanie, i może być używany w dowolnym miejscu w aplikacji.

Użyj Lottie do tworzenia animacji dla AnimatedIcona.

Definiowanie animacji dla animowanegokonu rozpoczyna się tak samo jak proces definiowania animacji dla animowanegoVisualPlayera. Musisz utworzyć lub uzyskać plik Lottie dla ikony, którą chcesz dodać i uruchomić za pośrednictwem aplikacji LottieGen. LottieGen generuje kod dla klasy C++/WinRT, którą można zainicjować i używać z Animowaną Ikoną.

Możesz również zdefiniować znaczniki w definicji animacji, aby wskazać pozycje czasu odtwarzania. Następnie możesz ustawić stan AnimatedIcon na te znaczniki. Jeśli na przykład masz pozycję odtwarzania w pliku Lottie oznaczonym jako "PointerOver", możesz ustawić stan AnimatedIcon na wartość "PointerOver" i przenieść animację do tej pozycji odtwarzania.

Definiowanie właściwości koloru w animacji Lottie o nazwie "Foreground" umożliwia ustawienie koloru przy użyciu właściwości AnimatedIcon.Foreground.

Rekomendacje

• Zapoznaj się ze wskazówkami dotyczącymi środowiska użytkownika ikon dla aplikacji systemu Windows , aby upewnić się, że ikony są zgodne z zasadami projektowania.
• Ogranicz liczbę animowanych ikon na jednym ekranie lub widoku. Animuj tylko ikony, aby zwrócić uwagę użytkownika na to, gdzie muszą podjąć działania lub kiedy wykonują akcję.

Tworzenie animowanej ikony

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Dodaj animowaną ikonę do przycisku

W poniższym przykładzie zaprezentowano przycisk Wstecz, który wyświetla animowaną ikonę powrotu, gdy następuje zdarzenie PointerEntered.

• To jest klasa utworzona za pomocą narzędzia wiersza polecenia AnimatedBackVisualSource .
• Element FallbackIconSource jest używany, gdy nie można odtwarzać animacji, takich jak w starszych wersjach systemu Windows, które nie obsługują animacji Lottie.
• Jeśli użytkownik wyłączy animacje w ustawieniach systemowych, Animowana ikona wyświetla ostatnią klatkę przejścia stanu, w którym znajdowała się kontrolka.

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

Dodaj AnimatedIcon do NavigationViewItem

Kontrolka NavigationViewItem automatycznie ustawia typowe stany na animowanej ikonie w oparciu o stan kontrolki, jeśli te znaczniki są zdefiniowane w animacji Lottie.

Na przykład w poniższym przykładzie pokazano, jak ustawić niestandardową animację (GameSettingsIcon) wygenerowaną przez narzędzie 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>

Element NavigationViewItem automatycznie ustawia następujące stany w animowanymIconie:

• Normal
• WskaźnikNad
• Wciśnięty
• Wybrano
• NaciśniętyZaznaczony
• WskaźnikNadWybranym

Jeśli GameSettingsIcon ma znacznik zdefiniowany dla "NormalToPointerOver", ikona będzie animowana, dopóki wskaźnik nie zostanie przesunięty nad element NavigationViewItem. Więcej informacji na temat tworzenia znaczników można znaleźć w poniższej sekcji.

Definiowanie znaczników AnimowanychIkon

Aby utworzyć niestandardowy GameSettingsIcon w poprzednim przykładzie, uruchom plik JSON Lottie (ze znacznikami) za pomocą narzędzia Windows LottieGen, aby wygenerować kod animacji jako klasę w języku C#.

Po uruchomieniu pliku Lottie za pomocą rozwiązania LottieGen możesz dodać klasę danych wyjściowych CodeGen do projektu. Aby uzyskać więcej informacji, zobacz samouczek lottieGen .

Ustawienie stanu AnimatedIcon na nową wartość powoduje również ustawienie pozycji odtwarzania w animacji Lottie dla przejścia ze starego stanu na nowy stan. Te pozycje odtwarzania są również oznaczane znacznikami w pliku Lottie. Można również zdefiniować określone znaczniki rozpoczęcia przejścia lub zakończenia przejścia.

Na przykład kontrolka AutoSuggestBox używa ikony animowanej, która animuje się w następujących stanach:

• Normal
• WskaźnikNad
• Wciśnięty

Znaczniki w pliku Lottie można zdefiniować przy użyciu tych nazw stanów. Możesz również zdefiniować znaczniki w następujący sposób:

• Wstaw "Do" między nazwami stanów. Jeśli na przykład zdefiniujesz znacznik "NormalToPointerOver", zmiana stanu AnimowanejIkony z "Normal" na "PointerOver" spowoduje przejście do pozycji odtwarzania tego znacznika.
• Dołącz ciąg "_Start" lub "_End" do nazwy znacznika. Na przykład zdefiniowanie znaczników "NormalToPointerOver_Start" i "NormalToPointerOver_End" oraz zmiana stanu AnimatedIcon z "Normal" na "PointerOver" spowoduje przejście do pozycji odtwarzania od znacznika _Start, a następnie animowanie do pozycji odtwarzania od znacznika _End.

Dokładny algorytm używany do mapowania zmian stanu AnimatedIcon na pozycje odtwarzania znaczników:

• Sprawdź znaczniki podanego pliku pod kątem znaczników "[PreviousState]To[NewState]_Start" i "[PreviousState]To[NewState]_End". Jeśli oba elementy zostaną znalezione, odtwórz animację od "[PreviousState]To[NewState]_Start" do "[PreviousState]To[NewState]_End".
• Jeśli polecenie "[PreviousState]To[NewState]_Start" nie zostanie znalezione, ale element "[PreviousState]To[NewState]_End" zostanie znaleziony, należy szybko przełączyć na pozycję odtwarzania "[PreviousState]To[NewState]_End".
• Jeśli parametr "[PreviousState]To[NewState]_End" nie zostanie znaleziony, ale parametr "[PreviousState]To[NewState]_Start" zostanie znaleziony, to należy dokonać twardego cięcia do pozycji odtwarzania "[PreviousState]To[NewState]_Start".
• Sprawdź, czy znaczniki dostarczone przez IAnimatedVisualSource2 odpowiadają znacznikowi "[PreviousState]To[NewState]". Jeśli zostanie to znalezione, przełączyć się gwałtownie do pozycji odtwarzania "[PreviousState]To[NewState]".
• Sprawdź, czy znaczniki udostępnione przez IAnimatedVisualSource2 są odpowiednie do znacznika "[NewState]". Jeśli zostanie znaleziona, następuje szybkie przejście do pozycji odtwarzania "[NewState]".
• Sprawdź, czy znaczniki podane w IAnimatedVisualSource2 zawierają jakikolwiek znacznik kończący się na "To[NewState]_End". Jeśli zostanie znaleziony jakikolwiek znacznik, który ma to zakończenie, przełącz na pierwszy znacznik z odpowiednią pozycją zakończenia odtwarzania.
• Sprawdź, czy "[NewState]" można przekształcić na liczbę zmiennoprzecinkową. Jeśli tak, animowane z bieżącej pozycji do przeanalizowanego zmiennoprzecinka.
• Twarde cięcie na pozycję odtwarzania 0.0.

W poniższym przykładzie pokazano format znacznika w pliku JSON Lottie. Zobacz przewodnik dotyczący AnimatedIcon, aby uzyskać więcej szczegółów.

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

Dodawanie samodzielnej animowanej ikony

Poniższy przykład to przycisk, który użytkownik klika w celu zaakceptowania monitu.

Klasa MyAcceptAnimation jest tworzona za pomocą narzędzia LottieGen .

Element FallbackIconSource będzie używany zamiast animacji, gdy nie można odtwarzać animacji, takich jak w starszych wersjach systemu Windows, które nie obsługują animacji Lottie.

Jeśli użytkownik końcowy wyłączy animacje w ustawieniach systemowych, AnimatedIcon wyświetli ostatnią klatkę przejścia między stanami, w jakim znajdowała się kontrolka.

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

UwP i WinUI 2

Aplikacja AnimatedIcon dla platformy UWP wymaga interfejsu WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tej kontrolki istnieją w przestrzeni nazw Microsoft.UI.Xaml.Controls .

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

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

<muxc:AnimatedIcon />

Powiązane artykuły

• Ikony w aplikacjach systemu Windows
• Ruch dla aplikacji systemu Windows