WPF| C#Lottie animation plays [Feels Good]

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

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

So as a WPF developer, it seems that you still have to do it yourself if you want to use Lottie animation.

To use Lottie animation on WPF, you need to overcome the following issues:

Parse Lottie's json file to understand the meaning of all the data in it, that is, get the graphical objects to be drawn, including various circles, rectangles, colors, blur effects, masks, slowdowns, trajectories, keyframes, etc.
Convert the data obtained above into specific drawing parameters.
Draw at high frame rate in WPF.

As of 2022-02-10, the options that are considered feasible are:

In the implementation of UWP provided by Microsoft, there is a ready-made parsing module that can directly read Json files into a data class. Moreover, this module does not rely on UWP, so it can be used directly. Although there are still some bugs (dozens of animation files have been tested, and 3 of them cannot play properly), the library is still relatively active at present, and you can look forward to its improvement.
SkiaSharp has very comprehensive functions, and it should not be a problem to cover the functions required for Lottie animation. Moreover, it is cross-platform, so you can use SkiaSharp to draw according to the data requirements.
SkiaSharp 官方提供的 WPF 画布即使开启 GPU 绘图模式, 其速度依然无法达到 1080p 60 帧, 不过之前进行其他项目时对 GLWpfControl 进行了改进, 实测 2k 144 帧占会用 RTX 2070 23%, 达到可用程度, 虽然有少量内存泄漏, 但问题不大。

If implemented successfully, it should be possible to support WinForm, WPF, UnoPlatform(GTK), Avalonia, Blazor(Wasm), and all platforms on which SkiaSharp and. NET Core 3.0+ can run.

~~ It is still in the exploration and verification stage and has no practical value.~~

当前处于预览状态, 示例: https://github.com/xiejiang2014/Xiejiang.SKLottie.Samples

本文发布于https://www.cnblogs.com/8u7tgyjire7890/p/15881159.html

Successfully implemented animations will continue to be updated below, and each update indicates that more lottie features are supported

2022-02-10 Selected several simple animations for testing.

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

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

mixed mode

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

2022-02-12 A slightly more complicated example:

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

Lottie-Windows did not implement PolyStar's data analysis, so it lacked yellow stars and had to wait for Lottie-Windows to continue to implement it

Path animation.

https://lottiefiles.com/88348-blob

path offset

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

2022-02-16:

hierarchical relationship, rotation

https://lottiefiles.com/85410-wifi

2022-02-18

Processing PreCompLayer,LayerCollectionAsset

https://lottiefiles.com/88964-snowman

More complex path animations. Compared with Lottie Viewer's prompt that UAP11 is needed, I have upgraded to Windows 10 21H2 and still can't play it. I don't know the specific reason.

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