WPF|C# Lottie Animation Playback【Feels Awesome】

Lottie animations are animation files stored in JSON format. Compared to GIF, they offer significant advantages in file size and animation smoothness, and the graphics are vector-based, so they don't get blurry when enlarged.

Lottie's official website provides implementations for web, Android, and iOS. Microsoft offers a UWP implementation Lottie-Windows. For WPF, there ~~was no available implementation~~ until https://github.com/ascora/LottieSharp emerged. However, after testing it several times, I found that its dependency on SharpDX frequently throws errors, and I'm not familiar with SharpDX at all, so I don't know how to fix them.

So, as a WPF developer, it seems I'll have to do it myself if I want to use Lottie animations.

To use Lottie animations in WPF, the main challenges are:

Parsing the Lottie JSON file and understanding the meaning of all the data—i.e., obtaining the graphics objects to be drawn, including various circles, rectangles, colors, blur effects, masks, easing, paths, keyframes, etc.
Converting the data obtained above into specific drawing parameters.
Performing high-frame-rate rendering in WPF.

As of 2022-02-10, the feasible approach I've identified is:

The UWP implementation provided by Microsoft includes a ready-to-use parsing module that can directly read a JSON file into a data class, and this module doesn't depend on UWP, so it can be used directly. Although there are some bugs (out of dozens of animation files tested, 3 couldn't play properly), the library is still actively maintained, so improvements can be expected.
SkiaSharp is very comprehensive and should cover all the features required for Lottie animations. Since it's cross-platform, we can use SkiaSharp for drawing according to the data requirements.
The WPF canvas provided by SkiaSharp, even with GPU drawing mode enabled, still can't reach 1080p at 60fps. However, during a previous project, I improved GLWpfControl, and tests showed it can handle 2K at 144fps with only 23% usage on an RTX 2070, making it usable. There's a small memory leak, but it's not a major issue.

If successful, this should support WinForms, WPF, UnoPlatform (GTK), Avalonia, Blazor (Wasm), and any platform that runs SkiaSharp and .NET Core 3.0+.

~~Currently still in the exploration and validation phase, no practical use yet.~~

Currently in preview. Sample: https://github.com/xiejiang2014/Xiejiang.SKLottie.Samples

This article was originally posted at https://www.cnblogs.com/8u7tgyjire7890/p/15881159.html

Below, I will continuously update the successfully implemented animations. Each update describes which Lottie features are newly supported.

2022-02-10 Tested a few simple animations.

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

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

Blend mode

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

2022-02-12 Slightly more complex example:

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

Lottie-Windows hasn't implemented data parsing for PolyStar, so the yellow star is missing. We'll have to wait for Lottie-Windows to add support.

Path animation.

https://lottiefiles.com/88348-blob

Path offset

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

2022-02-16:

Layer hierarchy, rotation

https://lottiefiles.com/85410-wifi

2022-02-18

Handling PreCompLayer, LayerCollectionAsset

https://lottiefiles.com/88964-snowman

More complex path animation. Comparing with Lottie Viewer, it prompted that UAP11 is required. I've upgraded to Windows 10 21H2 but it still can't play. Not sure why.

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