A Lottie to Like
Anyone who follows my work knows that I’m a huge fan of using animation and motion design to make digital products more…
While Lottie offers a ton of power, it misses out on a lot of the performance benefits of Android’s native vector animation format
AnimatedVectorDrawable. I came away wanting the best of both worlds… Lottie’s tight integration with Adobe AfterEffects and
AnimatedVectorDrawable's performance characteristics. Well it seems that my dreams have come true:
Bodymovin (the AfterEffect’s plugin Lottie also uses) version 4.10 brings direct support for exporting AE compositions as Android
AnimatedVectorDrawables! 🙌 🎉 🥂🍾🎈 A huge thanks to Hernan Torrisi for adding this!
Here’s how it works:
- In AfterEffects, select
- Select the composition to export and open its
- Select the
- Choose a destination folder and hit
- In the output folder, along with the standard
data.jsonBodymovin export, you’ll find a new
data.xmlfile – this is the
AnimatedVectorDrawable(using the inline resource format)
- Drop this file into your Android project
N̶o̶t̶e̶:̶ ̶I̶’̶v̶e̶ ̶h̶a̶d̶ ̶s̶o̶m̶e̶ ̶i̶s̶s̶u̶e̶s̶ ̶u̶s̶i̶n̶g̶ ̶t̶h̶e̶ ̶A̶n̶d̶r̶o̶i̶d̶ ̶S̶t̶u̶d̶i̶o̶ ̶3̶.̶0̶ ̶A̶l̶p̶h̶a̶s̶ ̶(̶s̶e̶e̶m̶s̶ ̶t̶o̶ ̶b̶e̶ ̶a̶n̶ ̶i̶s̶s̶u̶e̶ ̶w̶i̶t̶h̶ ̶a̶a̶p̶t̶2̶;̶ ̶I̶’̶m̶ ̶f̶i̶l̶i̶n̶g̶ ̶b̶u̶g̶s̶)̶ ̶b̶u̶t̶ ̶i̶t̶’̶s̶ ̶w̶o̶r̶k̶i̶n̶g̶ ̶f̶i̶n̶e̶ ̶o̶n̶ ̶s̶t̶a̶b̶l̶e̶.̶
buildToolsVersion27.0.1 fixes issues with nested inline resources 🙌
I’m excited to see what people build with this new tool. It really does seem to combine the best of both worlds: using a rich, powerful industry-standard editor to create great motion design, and then running it in the platform’s native format. There’s definitely still a place for Lottie (see the benefits described in the other article) but for animations better suited to
AnimatedVectorDrawables you now have access to great tooling.
Are you using Bodymovin to create vector animations in your apps? I’d love to hear how you got on in the comments.