Lottie prototyping
Aim is use Lottie by Airbnb to get a plugin powered After Effects animation to run on both iOS and Android.
Plugins are Joysticks and Sliders by Mike Overbeck and Rubberhose 2 by Adam Plouff - both facilitate character rigging
I use Bodymovin by Hernan Torrisi to export After Effects projects as json files to be used in browsers (and more)
You can test your bodymovin exports for browser use on lottiefiles.com
I use Lottie Preview iOS to test json files on iOS.
This app also exist for Android: Lottie Preview Android
You can find some Bodymovin insight on Bodymovin wiki
Lottie release notes and filed issues on Github are two sources for further understanding of Lottie's feature support
@lottiefiles on Twitter offer great support
Batch 1
There are four exports tested initially.
Vanilla - No plugins used. Best chance of working with Lottie.
Joystick - Utilising Joysticks and Sliders plugin.
Hose - Utilising Rubberhose 2 plugin
Joystick + Hose - Utilising both plugins. This is what we want!
Bodymovin in browser
Lottie on iOS
Batch 2
This batch only test two variations.
Joysticks and Sliders
Joysticks and Sliders + Rubberhose 2
Expressions used by both plugins were converted to keyframes using the technique found on youtube (above).
Bodymovin in browser
Lottie on iOS
Converting the expressions used by the plugins to keyframes made significant progress. Joysticks and Sliders works seemingly perfect and Rubberhose is close.
Problem
Hose > Contents > Style > BaseHose > Arc > Line Halfer is set to {start 0%, end 25%} (pic below), but Lottie seem to render the equivalent to {start 0%, end 100%}.
Solution
Updates follow...
All plugins perform as desired in browser. Lottie player renders well when no plugins are used, but can't render animations that use either of the plugins.
Problem
Lottie doesn't support expressions yet. [Release 2.1.3] - Hernan Torrisi on Twitter
Solution
Try to convert expressions to keyframes. (Youtube guide)