AnimatedIcon

[アーティクル]
06/02/2023

AnimatedIcon コントロールは、ユーザーの操作と視覚的な状態の変化に応じて、アニメーション化された画像を再生します。

アイコンをアニメーション化して、チュートリアルの [次へ] ボタンなどの UI コンポーネントに注目させたり、アイコンに関連付けられているアクションを興味を引く楽しい方法で反映させたりすることができます。

カスタムアニメーションを Adobe AfterEffects で作成し、Lottie-Windows ライブラリを使用してレンダリングして、WinUI アプリケーション内でアニメーション化されたアイコンとして使用することができます。詳細については、この記事の後半の「Lottie を使用して AnimatedIcon のアニメーション化されたコンテンツを作成する」を参照してください。

次の例は、Adobe AfterEffects で作成され、Lottie を使用してレンダリングされた基本的なアニメーション化された検索アイコンを示しています。

これは適切なコントロールですか?

ユーザーがボタンの上にマウスポインターを置いたときや、それをクリックしたときなど、ユーザーによるコントロールの操作に応じてコントロールのアイコンをアニメーション化する必要がある場合は、AnimatedIcon コントロールを使用します。

アニメーションが視覚的な状態切り替えによってトリガーされず、ループで再生されるか、1 回だけ再生されるか、または一時停止できる場合は、AnimatedIcon を使用しないでください。代わりに AnimatedVisualPlayer を使用してください。

アイコン以外に対して AnimatedIcon を使用しないでください。使用すると、コントロールで IconElement または IconElementSource プロパティがサポートされません。代わりに AnimatedVisualPlayer を使用してください。

アニメーション化されたアイコンが不要な場合は、代わりに FontIcon、SymbolIcon、または BitmapIcon を使用します。

AnimatedIcon と AnimatedVisualPlayer の違い

AnimatedIcon は IconElement であり、要素または IconElement が必要な場所 (NavigationViewItem.Icon など) のどこでも使用でき、State プロパティを通じて制御されます。

AnimatedVisualPlayer は、Play や Pause などのメソッドによって制御される一般的なアニメーションプレーヤーであり、アプリケーション内の任意の場所で使用できます。

Lottie を使用して AnimatedIcon のアニメーション化されたコンテンツを作成する

AnimatedIcon のアニメーションの定義は、AnimatedVisualPlayer のアニメーションを定義するプロセスと同じように開始します。追加するアイコンの Lottie ファイルを作成するか取得し、LottieGen を通じてそのファイルを実行する必要があります。 LottieGen により、インスタンス化して AnimatedIcon で使用できる C++/WinRT クラスのコードが生成されます。

注意

AutoSuggestBox コントロールでは、LottieGen ツールを使用して生成されたAnimatedVisuals.AnimatedFindVisualSource クラスを使用します。

アニメーション定義にマーカーを定義して、再生時間の位置を示すこともできます。その後、AnimatedIcon の状態をこれらのマーカーに設定できます。たとえば、Lottie ファイル内に "PointerOver" とマークされた再生位置がある場合、AnimatedIcon の状態を "PointerOver" に設定して、アニメーションをその再生位置に移動することができます。

"Foreground" という名前の Lottie アニメーションで color プロパティを定義すると、AnimatedIcon.Foreground プロパティを使用して色を設定できます。

Recommendations

Windows アプリのアイコンに関する UX ガイダンスを参照して、アイコンがデザインの原則と一致していることを確認してください。
1 つの画面またはビュー上のアニメーション化されたアイコンの数を制限します。アイコンのみをアニメーション化して、アクションを実行する必要がある場所に、またはアクションを実行しているときに、ユーザーの注意を促します。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

UWP アプリの AnimatedIcon には、Windows UI ライブラリ 2 が必要です。インストール手順などについて詳しくは、「Windows UI Library (Windows UI ライブラリ)」をご覧ください。このコントロールの 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 に追加する

NavigationViewItem コントロールでは、コントロールの状態に基づいて AnimatedIcon に共通の状態が自動的に設定されます (これらのマーカーが Lottie アニメーションで定義されている場合)。

たとえば、次の例は、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
押されている
オン
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]" が float に解析されているかどうかを確認します。そうである場合は、現在位置から解析された float までアニメーション化されます。
再生位置 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 の追加

次の例は、ユーザーがプロンプトを受け入れるためにクリックするボタンです。

LottieGen ツールを使用して、MyAcceptAnimation クラスが作成されます。

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 のアニメーション化されたコンテンツを作成する

Recommendations

UWP と WinUI 2

アニメーションアイコンを作成する

AnimatedIcon をボタンに追加する

AnimatedIcon を NavigationViewItem に追加する

AnimatedIcon マーカーを定義する

スタンドアロン AnimatedIcon の追加

フィードバック

その他のリソース

AnimatedIcon

これは適切なコントロールですか?

AnimatedIcon と AnimatedVisualPlayer の違い

Lottie を使用して AnimatedIcon のアニメーション化されたコンテンツを作成する

Recommendations

UWP と WinUI 2

アニメーションアイコンを作成する

AnimatedIcon をボタンに追加する

AnimatedIcon を NavigationViewItem に追加する

AnimatedIcon マーカーを定義する

スタンドアロン AnimatedIcon の追加

関連記事

フィードバック

その他のリソース