Bodymovin to Android
I’ve previously taken a look at using AirbnbEng’s Lottie to create vector animations on Android:
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 AnimatedVectorDrawable
s! 🙌 🎉 🥂🍾🎈 A huge thanks to Hernan Torrisi for adding this!
Here’s how it works:
- In AfterEffects, select
Window
→Extensions
→Bodymovin
- Select the composition to export and open its
Settings
- Select the
AVD
option. - Choose a destination folder and hit
Render
- In the output folder, along with the standard
data.json
Bodymovin export, you’ll find a newdata.xml
file – this is theAnimatedVectorDrawable
(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̶.̶
Update:
buildToolsVersion
27.0.1 fixes issues with nested inline resources 🙌
Get movin’
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 AnimatedVectorDrawable
s 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.