rLottie Wrapper

Hi everybody,

I’ve just written a wrapper for the rLottie library which offers a convenient way of displaying animations in JUCE. In a nutshell, it’s a C++ version of the Lottie library from AirBnb and allows to natively render animations that can be exported from Adobe After Effects with the bodymovin plugin.

I think it might be useful for other people so here’s the link to the source folder:

(Don’t be put off by the GPL license, I was just too lazy to pick another license, so if you need to use it in a more permissive way, let me know, then I’ll change it). (EDIT: changed to MIT).

Since rLottie is licensed under the LGPL license, it must be linked dynamically. I’ve compiled dynamic libraries for Windows and macOS which are ready to use here

There’s also a demo app which shows the usage:

The current feature set involves:

  • RLottieManager: Loading and initialising the dynamic rLottie library on runtime with a customizable folder location.
  • RLottieAnimation: A low-level class that loads an animation from a JSON String and various methods to render / control the animation.
  • RLottieComponent: A high-level JUCE component which displays an animation

It comes with no additional dependencies (apart from JUCE, obviously).

13 Likes

Would you consider putting this under MIT or BSD-3 license?

Yeah, sure, I’ll just clean it up a bit more.

1 Like

Alright, I’ve changed the wrapper code to MIT and added a few more convenient functions (scale factor for oversampling, better error reporting if the dll can’t be loaded, etc.)

Now I just need to find a better way of creating these files since I am never going to buy an Adobe subscription :slight_smile:

2 Likes

Here’s a great Lottie add-on for Blender I just discovered :wink:

Is there any way to use this library with Juce while targeting iOS and Android? I’m not very familiar with dynamic linking.

Possibly but not sure that version of the library supports iOS and Android. You might be better off using the official AirBnB library for those platforms.

Would be nice to have a wrapper that could use either Lotte or rLottie depending on the platform…

Yeah. That would be ideal. I also saw that description of rLottie states that it’s platform independent library. But cannot find anywhere any mentions of either iOS or Android.

Hey! I needed to play a bunch of animations in a small app i have and took your classes and improved them, added support for .lottie files and much more, so i’ve published the juce module as standalone module separated from Hise (GitHub - kunitoki/jottie: jottie is a juce port of rLottie).

Did you still have your files as MIT ? Looking at the recent code, the headers mention the license of Hise which is not MIT.

1 Like

Yeah go for it. I didn’t intentionally change back the license, might just have been a bad copy and paste job :slight_smile:

Make sure you get the most recent update (a few months back), there were some issues with layer transparency causing sever CPU performance issues.

Just out of curiousity: what changes did you make? I see a bunch of setProperty functions but if there are any critical issues, I’d love to back port them back to HISE.

Thanks.

Where the fixes were applied ? Was that the rLottie library to update or was in your library ?

Some notable changes:

  • Support for dotLottie files https://dotlottie.io/ and playing multiple animations from the same file.
  • Added listeners support, to get notified of playback events (i needed to know when a looping animation reached a specific number of repetitions, or the playback was stopped)
  • Allowed to manually set the framerate, to speedup or slowdown animations
  • Allows to play animations in reverse, and together with listeners, is easy to make things like ping-pong animations
  • Allow to override properties in animations, like overriding fill background colours, and other supported properties
  • Convenience support mthods for loading from files/streams
  • Removed the manager, now you just need a jottie::LottieComponent and that’s it
  • Fixed rendering glitches when resizing the component
  • Fixed a bunch of issues with frame clamping (you seems to have forgotten a numFrames - 1 in some parts)
  • Juceified the library a bit more (juce::Result and other utilities were used).

I’m curious to see the results of this. Any video clips you can share?

Is the animation smooth?

I’m curious too.

Bump.

jottie

Of course being rendered on the cpu is around 18-22% for a 600x600 kind of image on my laptop, but i won’t be using these big animations.

1 Like