WPFは|C#Lottieは“気持ちいい牛”です。

WPFは|C#Lottieは“気持ちいい牛”です。

Lottieアニメーションは、jsonファイルとして保存されるアニメーションファイルです。GIFと比較して、ファイルサイズとアニメーションの流暢さに大きな利点があり、グラフィックスはベクトルであり、ズームインはペーストされません。

最后更新 2022/05/19 6:58
xiejiang
预计阅读 4 分钟
分类
WPF
专题
WPF UIデザイン
标签
.NET C# WPF アニメーションアニメーション

Lottie 动画是一种以 json 文件保存的动画文件。 相比 gif 在文件体积和动画流畅度上有很大的优势,而且是图形是矢量的,放大不会糊。

Lottie 的官方提供了 web,android,iOS 的实现, 微软提供了 UWP 的实现 Lottie-Windows。 WPF 则没有找到可用的实现。下有 https://github.com/ascora/LottieSharp 不过我测试了几轮,发现其依赖的 sharpDx 经常报错,而且我完全不熟悉 sharpDx,不知道如何解决。

WPF開発者として、Lottieアニメーションを使うのは自分でやるべきことのようです。

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

  1. Lottieのjsonファイルを解析して、その中のすべてのデータの意味を理解し、すなわち、様々な円、長方形、色、ぼかし効果、マスク、イージング、トラック、キーフレームなどを含む、描画する必要のあるグラフィックオブジェクトを得る。
  2. 上記のデータを具体的な描画パラメータに変換します。
  3. WPFでは高フレームレートのレンダリングを行う。

2022-02-10、実行可能と思う案は

  1. マイクロソフトが提供するUWPの実現には、既製の解析モジュールがあり、Jsonファイルを直接にデータクラスとして読み取ることができ、かつこのモジュールはUWPに依存していないので、直接に利用することができる。まだいくつかのバグ数十のアニメーションファイルをテストしたが、3つは正常に再生できなかったが、現在、このライブラリは比較的活発であり、改善が期待できる。
  2. SkiaSharpの機能は非常に包括的であり、Lottieアニメーションに必要な機能をカバーすることは問題にならないはずであり、また、そのクロスプラットフォームであるので、データ要求に応じてSkiaSharpを使用して描画すればよい。
  3. SkiaSharp 官方提供的 WPF 画布即使开启 GPU 绘图模式, 其速度依然无法达到 1080p 60 帧, 不过之前进行其他项目时对 GLWpfControl 进行了改进, 实测 2k 144 帧占会用 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

成功したアニメーションは継続的に更新されます。更新ごとに、より多くのロッティ機能がサポートされていることが示されます。

2022- 0 2 -10いくつかの簡単なアニメーションを選んでテストしました。

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

https://lottiefiles.com/87474-duo-cubes-loader-2

ブレンドモード#ブレンドモード#

https://lottiefiles.com/89023-loading-circles

2022- 0 2 -12少し複雑な例ですか?

https://lottiefiles.com/84848-polar-bear

Lote-WindowsはStarのデータ解析を実现していないので、黄色い星が欠けており、Lote-Windowsの継続実现を待っている

経路のアニメーション。

https://lottiefiles.com/88348-blob

パスオフセットパスオフセット

https://lottiefiles.com/86095-frequencies-fork

2022-02-16:

レベルリレーション、回転レベルリレーションシップ、回転[れべるかんしょん、かいてん]

https://lottiefiles.com/85410-wifi

2022-02-18

PreCompLayer、LayerCollectionAssetの処理

https://lottiefiles.com/88964-snowman

より复雑なパスアニメーション. Lot

https://lottiefiles.com/87491-liquid-blobby-loader-green

2022-02-19

https://lottiefiles.com/93748-camera-roll

ImageAssetおよびImageLayer

https://lottiefiles.com/93795-dog-car-ride

Opacity

https://lottiefiles.com/94910-greenish-arrow-down

2022-02-26

https://lottiefiles.com/87670-satisfied-bear

https://lottiefiles.com/96051-tta-certificate

より複雑な例

https://lottiefiles.com/96388-tiger

2022-02-27

パスのFillType

https://lottiefiles.com/96511-listening-animation

2022-03-02

https://lottiefiles.com/97409-404-page-animation

マスク+モード[Mask + Mode]

https://lottiefiles.com/88967-food-delivery-service

マスク-モード#マスクモード#

https://lottiefiles.com/83667-arty-chat

https://lottiefiles.com/99804-backend-blue

マスク+モードMask + Mode

https://lottiefiles.com/96957-lock

https://lottiefiles.com/89881-smiling-star

2020-04-01

https://lottiefiles.com/83395-addland-heatfav-v2

https://lottiefiles.com/96939-files

2022-04-17

https://lottiefiles.com/96245-success

https://lottiefiles.com/88282-rocket

https://github.com/CommunityToolkit/Lottie-Windows/files/8182417/Lottie.Animation.zip

https://lottiefiles.com/102516-growth

Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 2025/01/26

WPFはカスタムXMLファイルで国際化を実現

この記事では、必要なNuGetパッケージのインストール、言語リストの動的取得、言語の動的切り替え、コードとxamlインターフェイスでの翻訳文字列の使用、開発者がWPFアプリケーションを簡単に国際化できるようにするソースコードへのリンクなど、WPFプログラムでカスタムXMLファイルを使用した国際化の方法について詳しく説明します。

继续阅读
同分类 / 同标签 2024/01/25

C#WPFにおけるFluentValidationの使用

この記事では、C#WPFプロジェクトでFluentValidationをプロパティ検証に使用する方法を詳しく見て、MVVMパターンでこれを実装する方法を示します。

继续阅读