Dotnet9

联系请关注微信公众号:Dotnet9

文章

WPF|C# Lottie 动画播放【感觉好牛】

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

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, 所以可以直接拿来用。虽然还有一些 Bug(测试了几十个动画文件, 有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

以下会持续更新成功实现的动画,每次更新都说明支持了更多的 lottie 特性

2022-02-10 选了几个简单的动画进行测试.

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

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

混合模式

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

2022-02-12 稍微复杂一点的例子:

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

Lottie-Windows 没有实现 PolyStar 的数据解析,所以缺少黄色的星星,只能等待 Lottie-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

更复杂的路径动画. 对比 Lottie Viewer 提示需要 UAP11,我已经升级到 Windows10 21H2了 依然无法播放,不清楚具体原因.

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

蒙版 (+模式)

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

蒙版(-模式)

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

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

遮罩(+模式)

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

留言

回复