アニメーションビジュアルプレーヤー

AnimatedVisualPlayer コントロールは、WinUI 3 アプリでベクターベースのアニメーションを再生します。 これは、Adobe After Effects またはその他のアプリケーションで作成され、JSON 形式にエクスポートされた高品質でスケーラブルなアニメーションである Lottie アニメーション用に設計されています。

再生の完全なプログラムによる制御 (再生、一時停止、停止、反転、ループ、特定のフレームへのシーク) が必要な場合は、 AnimatedVisualPlayer を使用します。 表示状態の変更に関連付けられたアニメーション (ボタンのホバー効果など) には、代わりに AnimatedIcon を使用します。

前提条件

AnimatedVisualPlayerで Lottie アニメーションを使用するには、次のものが必要です。

  • Windows Community Toolkit の Lottie-Windows NuGet パッケージ
  • Adobe After Effects (または互換性のあるツール) からエクスポートされた Lottie JSON ファイル
  • JSON ファイルを C# または C++/WinRT クラスに変換する LottieGen ツール

LottieGen ツールは、.json Lottie ファイルを入力として受け取り、IAnimatedVisualSourceを実装するクラスを生成します。 その後、XAML でそのクラスをアニメーション ソースとして参照します。

アニメーション化されたビジュアル プレーヤーを追加する

XAML に AnimatedVisualPlayer を配置し、そのソースを生成された Lottie クラスに設定します。

<AnimatedVisualPlayer x:Name="Player" AutoPlay="False">
    <animatedvisuals:LottieLogo1/>
</AnimatedVisualPlayer>

ここで animatedvisuals は、生成された Lottie クラスを含む名前空間の XML 名前空間です。

コントロールの読み込み時にアニメーションをすぐに開始する場合は、 AutoPlay="True" を設定します。

再生を制御する

アニメーションを制御するには、 PlayAsync、 Pause、 Resume、 Stop のメソッドを使用します。

// Play the animation forward
Player.PlaybackRate = 1;
await Player.PlayAsync(fromProgress: 0, toProgress: 1, looped: false);

// Pause and resume
Player.Pause();
Player.Resume();

// Stop and reset to the first frame
Player.Stop();

// Play in reverse
Player.PlaybackRate = -1;
await Player.PlayAsync(fromProgress: 1, toProgress: 0, looped: false);

PlaybackRateプロパティはライブです。アニメーションの再生中に変更できます。 1の値は通常の速度で前方に再生され、-1は逆に再生されます。

Note

Pauseを呼び出しても、PlayAsync タスクは完了しません。 Stopを呼び出して完了し、初期フレームにリセットします。

アニメーションをループする

連続ループでアニメーションを再生するには、loopedのPlayAsync パラメーターをtrueに設定します。

await Player.PlayAsync(fromProgress: 0, toProgress: 1, looped: true);

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

必要な場合は、 AnimatedVisualPlayer を使用します。

  • アニメーション再生を完全に制御 (再生、一時停止、停止、反転、シーク)
  • 制御状態とは無関係に実行されるループ アニメーション
  • 1 回限りのイベントに応答して 1 回再生されるアニメーション

次の場合は、代わりに AnimatedIcon を使用します。

  • アニメーションは、表示状態の遷移 (ホバー、押された、フォーカス) に応答します
  • IconElement または IconElementSource を受け付けるコントロールにアイコンを追加しています

WinUI 3 ギャラリー アプリを開き、AnimatedVisualPlayer の動作を確認する

WinUI 3 ギャラリー アイコン WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを参照します。
  • Last updated on