Skia VS Lottie for Android, iOS, and React Native

There’s also Skia by Google. Used by Android and Google Chrome.

Not specially something that you cannot do without WASM but at $WORK we are using a WASM build of Skia [0] to render canvas from nodejs.

Why use WASM ? Because we wanted to stay close to our stack (ie. calling wasm from nodejs). Do it work ? Yes, memory consumption is quite heavy though (each WASM module have its own heap that can quickly grow).

However we are looking to directly use Skia now and avoid the overhead of WASM so i think its a nice solution in the beginning but you might want to ditch it later on.

[0]: https://github.com/google/skia/tree/main/modules/canvaskit

I use SkVx from Skia. It uses compilers' vector extensions and few platform-specific intrinsics. If no vector extension available (e.g. msvc), a scalar implementation is provided in the hope that compiler can vectorize it.

Regarding compiling to JS, you can compile dart to JS however when running Flutter on mobile platforms such as iOS or Android, you're not compiling to JS but instead you're using Dart to draw widgets on the screen via Flutter engine which uses a cross-platform graphics engine under the hood called Skia. If you're running on web on the other hand, your dart code would compile to vector graphics rendered within a canvas element in pure HTML.

It built on a render framework named skia, JetBrains create a kotlin mapping which named skiko for it.

Flutter applications are written in the Dart programming language, and can connect to platform languages such as Java, Kotlin, Swift, and Objective-C. Also, thanks to ffi support, it is possible to interact with the C code directly . Flutter itself is built with C, C++, Dart, and Skia (a 2D rendering engine).

Fleet does not use Compose, but it does use Skiko[1], which also provides binding for Skia[2] (the native graphics library also used by Chrome & Flutter).

The main difference between the libraries is that Skija provides Java/JVM bindings for Skia, whereas Skiko provides Kotlin bindings for Kotlin/JVM, Kotlin/JS, and Kotlin/Native targets. Of course Skiko's Kotlin/JVM bindings can be used with other JVM languages, not just with Kotlin.

[1] https://github.com/JetBrains/skiko

[2] https://skia.org/

RN Skia: https://github.com/Shopify/react-native-skia Skia itself: https://skia.org/

Lottie[1], an Adobe After Effects plugin, fills a gap in vector animation authoring and is quite widely used (primarily in mobile applications but also works on the web, Discord for example supports them for stickers).

It's a pity SVG animation authoring tools never eventuated since it's an underutilized native format.

[1] (ignore the GIF-converted examples, the originals are lightweight and vector-based) https://airbnb.io/lottie/

Unity can export to WebGL/WASM, so that's one option if you're making some kind of heavy interactive experience and you don't mind waiting for it to load. For just animations there are tools like Lottie that can help. I think things are generally a lot more fragmented than they were in the Flash/Shockwave days though.

Uno Platform contributed support for the Skottie component in SkiaSharp (a .NET binding for Skia). This addition now allows for any application using SkiaSharp to render Lottie animations and provide engaging user experiences on all the platforms already supported by Uno Platform. This new SkiaSharp preview update also provides support for Uno Platform WinUI targets as well as .NET 6 for Mobile

GitHub: https://github.com/airbnb/lottie-android

We use Lottie to render our animations! I believe the animators use After Effects to create them. Thanks for the love! I'll pass them to our animators :)

Lottie/RLottie for animated assets (or AnimatedVectorDrawable)

Lottie – Use after effects animations in web and native apps\ (68 comments)

They should add the Flutter package for it on the "third party platform" page! :) (https://airbnb.io/lottie/#/other-platforms)

https://pub.dev/packages/lottie

airbnb / lottie-web Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/