在 WPF 中使用 Lottie 动画的可行性尝试笔记.

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

Lottie 的官方提供了web,android,iOS 的实现, 微软提供了 UWP 的实现 Lottie-Windows. WPF 则没有找到可用的实现.

想要在 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%,达到可用程度,虽然有少量内存泄漏,但问题不大.

初步实测效果:

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

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

Lottie-Windows 没有实现 PolyStar 的数据解析,所以缺少黄色的星星,只能等待 Lottie-Windows 继续实现

路径动画,吐槽一下这么简单的功能, Lottie-Windows 竟然强制要求 UAP11 才能支持.