AnimatedIcon

發行項
07/29/2024

AnimatedIcon 是一個播放動畫影像，回應使用者互動和視覺狀態變化的控制項。

動畫圖示能吸引人們注意 UI 元件，像是教學中的下一個按鈕，或者以有趣的方式反映與圖示相關的操作。

您可以使用 Adobe AfterEffects 建立自訂動畫，並使用 Lottie-Windows 連結資料庫轉譯，作為 WinUI 應用程式中的動畫圖示。如需詳細資訊，請參閱中的稍後使用 Lottie 建立 AnimatedIcon 的動畫內容。

以下範例顯示了在 Adobe AfterEffects 中建立並透過 Lottie 渲染的基本動畫搜尋圖示。

這是正確的控制項嗎？

當控制項的圖示需要以動畫形式回應使用者與控制項的互動時 (例如，當使用者將滑鼠懸停在按鈕上或按一下按鈕時)，請使用 AnimatedIcon 控制項。

如果動畫不是由視覺狀態轉換觸發、循環播放、僅播放一次或可以暫停，請勿使用 AnimatedIcon。請改用 AnimatedVisualPlayer。

不要將 AnimatedIcon 用於圖示以外的任何內容，或在控制項不支援 IconElement 或 IconElementSource 屬性的情況下使用。請改用 AnimatedVisualPlayer。

當不需要動畫圖示時，請改用 FontIcon、 SymbolIcon 或 BitmapIcon。

AnimatedIcon 與 AnimatedVisualPlayer 之間的差異

AnimatedIcon 是一種 IconElement，可在需要元素或 IconElement 的任何位置使用 (例如 NavigationViewItem.Icon)，並透過 State 屬性控制。

AnimatedVisualPlayer 是較通用的動畫播放程式，可透過播放和暫停等方法來控制，而且可以在應用程式中的任何位置使用。

使用 Lottie 建立 AnimatedIcon 的動畫內容

為 AnimatedIcon 定義動畫的開始過程與為 AnimatedVisualPlayer 定義動畫的過程相同。您必須建立或取得要透過 LottieGen，新增和執行該檔案之圖示的 Lottie 檔案。 LottieGen 會為 C++/WinRT 類別產生程式碼，然後您可以具現化並搭配 AnimatedIcon 使用。

注意

AutoSuggestBox 控制項會使用以 LottieGen 工具產生的 AnimatedVisuals.AnimatedFindVisualSource 類別。

您也可以在動畫定義中定義標記來指示播放時間位置。然後，您可以將 AnimatedIcon 狀態設定為這些標記。例如，如果您的 Lottie 檔案中有標示為「PointerOver」的播放位置，您可以將 AnimatedIcon 狀態設定為「PointerOver」，並將動畫移至該播放位置。

在 Lottie 動畫中定義一個名為「Foreground」的顏色屬性，可以使用 AnimatedIcon.Foreground 屬性來設定顏色。

建議

請檢視適用於 Windows 應用程式圖示的 UX 指引，以確保您的圖示符合設計原則。
限制單一畫面或檢視上動畫圖示的數量。僅對圖示進行動畫處理，以吸引使用者注意他們需要在何處採取操作或何時執行操作。

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。如需平台特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

UWP 應用程式的 AnimatedIcon 需要 WinUI 2。如需詳細資訊 (包括安裝指示)，請參閱 WinUI 2。此控制項的 API 位在 Microsoft.UI.Xaml.Controls 命名空間中。

WinUI 2 Apis：AnimatedIcon 類別
開啟 WinUI 2 資源庫應用程式，並查看 AnimatedIcon 運作情形。 WinUI 2 程式庫應用程式包含大部分 WinUI 2 控制項、特性和功能的互動式範例。從 Microsoft Store 取得應用程式，或在 Github 上取得原始程式碼。

若要在 WinUI 2 中使用本文中的程式碼，請在 XAML 中使用別名 (我們使用 muxc) 來表示專案中包含的 Windows UI 程式庫 API。如需詳細資訊，請參閱開始使用 WinUI 2。

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

<muxc:AnimatedIcon />

建立動畫圖示

重要 API：AnimatedIcon 類別

開啟 WinUI 3 資源庫應用程式以查看 AnimatedIcon 運作情形

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

將 AnimatedIcon 新增至按鈕

下列範例示範在 PointerEntered 事件上顯示動畫返回圖示的上一個返回按鈕。

AnimatedBackVisualSource 是使用 LottieGen 命令行工具建立的類別。
當動畫無法播放時，例如在不支援 Lottie 動畫的舊版 Windows 上，將使用 FallbackIconSource。
如果使用者在系統設定中關閉動畫，AnimatedIcon 將顯示控制項所處狀態轉換的最終影格。

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

將 AnimatedIcon 新增至 NavigationViewItem

如果 Lottie 動畫中定義了這些標記，則 NavigationViewItem 控制項會根據控制項的狀態自動在 AnimatedIcon 上設定常見狀態。

例如，下列範例示範如何設定由 LottieGen 工具產生的自訂動畫 (GameSettingsIcon)：

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

動畫設定齒輪

NavigationViewItem 會自動在 AnimatedIcon 上設定以下狀態：

Normal
PointerOver
按下
Selected
PressedSelected
PointerOverSelected

如果 GameSettingsIcon 已定義「NormalToPointerOver」的標記，則圖示會以動畫顯示，直到指標移至 NavigationViewItem 為止。關於建立標記的更多資訊，請參閱以下部分。

定義 AnimatedIcon 標記

若要在上一個範例中建立自訂 GameSettingsIcon，請透過 Windows LottieGen 工具執行 Lottie JSON 檔案 (具有標記)，以產生動畫程式代碼作為 C# 類別。

透過 LottieGen 運行 Lottie 檔案後，您可以將 CodeGen 輸出類別新增到您的專案中。關於更多資訊，請參閱 LottieGen 教學課程。

將 AnimatedIcon 狀態設為新值，也會將 Lottie 動畫從舊狀態轉換到新狀態的播放位置。這些播放位置也用 Lottie 檔案中的標記來標示。也可以定義轉換開始或轉換結束的特定標記。

例如，AutoSuggestBox 控制項會使用 AnimatedIcon，以下列狀態產生動畫效果：

Normal
PointerOver
按下

您可以使用這些狀態名稱，在 Lottie 檔案中定義標記。您也可以定義標記，如下所示：

在狀態名稱之間插入「To」。例如，如果您定義「NormalToPointerOver」標記，則將 AnimatedIcon 狀態從「Normal」變更為「PointerOver」將使其移至該標記的播放位置。
將「_Start」或「_End」附加至標記名稱。例如，定義標記「NormalToPointerOver_Start」和「NormalToPointerOver_End」並將 AnimatedIcon 狀態從「Normal」變更為「PointerOver」將導致其跳到 _Start 標記的播放位置，然後動畫到 _End 播放位置。

用於將 AnimatedIcon 狀態變更對應到標記播放位置的確切演算法：

檢查提供的檔案的標記中是否有標記「[PreviousState]To[NewState]_Start」和「[PreviousState]To[NewState]_End」。如果兩者都找到，則播放從「[PreviousState]To[NewState]_Start」到「[PreviousState]To[NewState]_End」的動畫。
如果沒有找到「[PreviousState]To[NewState]_Start」但找到「PreviousState]To[NewState]_End」，則硬切到「[PreviousState]To[NewState]_End」播放位置。
如果沒有找到「[PreviousState]To[NewState]_End」但找到「PreviousState]To[NewState]_Start」，則硬切到「[PreviousState]To[NewState]_Start」播放位置。
檢查提供的 IAnimatedVisualSource2 標記是否為標記「[PreviousState]To[NewState]」。如果找到則硬切到「[PreviousState]To[NewState]」播放位置。
檢查提供的 IAnimatedVisualSource2 的標記是否為標記「[NewState]」。如果找到則硬切到「[NewState]」播放位置。
檢查提供的 IAnimatedVisualSource2 標記是否有任何以「To[NewState]_End」結尾的標記。如果找到具有該結尾的任何標記，則硬切到找到的具有適當結尾播放位置的第一個標記。
檢查「[NewState]」是否解析為浮點數。如果是，請從目前位置到剖析的浮點數產生動畫效果。
硬剪以播放位置 0.0。

下列範例顯示 Lottie JSON 檔案中的標記格式。如需詳細資訊，請參閱 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}]

新增獨立 AnimatedIcon

以下範例是使用者點擊以接受提示的按鈕。

MyAcceptAnimation 類別是使用 LottieGen 工具所建立。

當動畫無法播放時，例如在不支援 Lottie 動畫的舊版 Windows 上，將使用 FallbackIconSource 而不是動畫。

如果最終使用者在系統設定中關閉動畫，AnimatedIcon 將顯示控制項所處狀態轉換的最終影格。

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

共用方式為

AnimatedIcon

這是正確的控制項嗎？

AnimatedIcon 與 AnimatedVisualPlayer 之間的差異

使用 Lottie 建立 AnimatedIcon 的動畫內容

建議

UWP 和 WinUI 2

建立動畫圖示

將 AnimatedIcon 新增至按鈕

將 AnimatedIcon 新增至 NavigationViewItem

定義 AnimatedIcon 標記

新增獨立 AnimatedIcon

其他資源

共用方式為

AnimatedIcon

這是正確的控制項嗎？

AnimatedIcon 與 AnimatedVisualPlayer 之間的差異

使用 Lottie 建立 AnimatedIcon 的動畫內容

建議

UWP 和 WinUI 2

建立動畫圖示

將 AnimatedIcon 新增至按鈕

將 AnimatedIcon 新增至 NavigationViewItem

定義 AnimatedIcon 標記

新增獨立 AnimatedIcon

相關文章

其他資源