WPF|C# Lottie アニメーション再生【すごいと感じる】

Lottie アニメーションは、json ファイルとして保存されるアニメーションファイルです。gif と比較してファイルサイズとアニメーションの滑らかさにおいて大きな利点があり、さらにグラフィックはベクターなので拡大してもぼやけません。

Lottie アニメーションは、JSON ファイルとして保存されるアニメーションファイルです。GIF と比較してファイルサイズとアニメーションの滑らかさに大きな利点があり、さらにグラフィックはベクターであるため拡大してもぼやけません。

Lottie は公式に Web、Android、iOS 向けの実装を提供しており、Microsoft は UWP 向けの実装 Lottie-Windows を提供しています。WPF については~~利用可能な実装が見つかりませんでした~~。以下に https://github.com/ascora/LottieSharp がありますが、数回テストしたところ、依存している SharpDX が頻繁にエラーを起こし、SharpDX にまったく詳しくないため解決方法がわかりませんでした。

そこで、WPF 開発者として Lottie アニメーションを使いたい場合は、やはり自分で実装する必要があるようです。

WPF で Lottie アニメーションを使用するには、主に以下の問題を解決する必要があります。

Lottie の JSON ファイルを解析し、すべてのデータの意味を理解する。つまり、描画する必要のあるグラフィックオブジェクト（各種円、矩形、色、ぼかし効果、マスク、イージング、軌跡、キーフレームなど）を取得する。
上記で得たデータを具体的な描画パラメータに変換する。
WPF で高フレームレートの描画を行う。

2022-02-10 時点で、実現可能と思われる方法は以下の通りです。

Microsoft が提供する UWP 実装には既存の解析モジュールがあり、JSON ファイルを直接データクラスとして読み取ることができ、そのモジュールは UWP に依存していないため、そのまま利用できます。いくつかのバグはありますが（数十のアニメーションファイルをテストしたところ、3つは正常に再生できませんでした）、現在このライブラリはまだ活発に開発されているため、改善が期待できます。
SkiaSharp は非常に多機能で、Lottie アニメーションに必要な機能をカバーできるはずであり、クロスプラットフォームでもあるため、データ要件に従って SkiaSharp を使用して描画すればよい。
SkiaSharp 公式が提供する WPF キャンバスは、GPU 描画モードを有効にしても、1080p 60fps には達しません。しかし、以前別のプロジェクトで GLWpfControl を改良し、実測で 2K 144fps 時に RTX 2070 の 23% 使用率で実用的なレベルに達しました。少量のメモリリークはありますが、大きな問題ではありません。

実装に成功すれば、WinForm、WPF、UnoPlatform(GTK)、Avalonia、Blazor(Wasm) および SkiaSharp と .NET Core 3.0+ が動作するすべてのプラットフォームで同時にサポートできるはずです。

~~現在はまだ調査・検証段階であり、実用的な価値はありません。~~

現在はプレビュー状態です。サンプル: https://github.com/xiejiang2014/Xiejiang.SKLottie.Samples

この記事は https://www.cnblogs.com/8u7tgyjire7890/p/15881159.html に掲載されています。

以下では、実装に成功したアニメーションを随時更新していきます。更新のたびに、より多くの Lottie 機能をサポートしたことを示します。

2022-02-10 いくつかのシンプルなアニメーションをテストしました。

https://lottiefiles.com/93494-step-loader