Published 15 May 2017 by Applover
Lotte Reiniger was a pioneer of silhouette animation in film. Her namesake which also happens to be the matter of this post is also a huge breakthrough in animation. Lottie by Airbnb is an open-source Android, iOS and React Native library that focuses on making it easier to add beautiful animations to your applications. Note that I will focus on Android as this is what I do, however most of my thoughts during tests were similar to my iOS counterpart.
The usual approaches to animation in Android apps were really cumbersome and/or difficult for developers. You could use AnimationDrawables, an ancient, painfully slow and memory-hogging solution. Better than that you could try to utilise GIFs, however they too can take up a significant chunk of memory. On top of that, both these solutions are not scalable in the slightest. You would have to deliver assets in up to 5 different sizes which would increase the .apk size by a lot.
All this hassle can be taken care of if you have your developers do it by hand. Anything more complex than the simplest of animations done with ObjectAnimators and View.animate() method are really time consuming though. In the kind of animations that really improve the visual feel of the application you would have to use Animated Vector Drawables. They are not that hard to use, as they are basically just transitions between different SVG files, however there are some issues associated with this approach. First of all, it only supports Android API21 and higher (only about 70% of market) because of path morphing. It also requires the developer to run the svg files through some kind of SVGO to reduce the sizes of svg files. This may cause going back and forth between the developer and graphic designer because of slight discrepancies in animation caused by optimisation.
We first heard about Lottie sometime in mid-march when it was already a stable, proven release. At Applover we really crave to stay in touch with all the newest trends and tools and make use of them as soon as it is viable. We quickly delegated a team to investigate the library, doing some research and tests into performance and memory issues. We quickly came to conclusion that the best course of action is to swiftly employ Lottie in all of our project. Animation is a really important aspect of well designed application and we realised it would be wise to fully leverage its power.
Note that all numeric values found below are based on rudimentary tests and are very project specific.
We devised a simple test to compare Lottie with more regular approaches both on iOS and Android. There was to be a scrolling screen (pictured above) that would snap to certain elements and, depending on scroll’s value, would morph the shape of said elements. Coding this by hand turned out to be a real pain in the back side but with Lottie it was much easier. The time it took me to do the Android side was cut by about 75%. Moreover, the fact that the designer did most of the work, that would otherwise be done on both iOS and Android platforms (more on that later), allowed us to cut the time we spent on the project as a team almost in half. On top of that the Lottie approach saved us about 20-30% of CPU usage during the rendering.
The basic premise of Lottie is that developers shouldn’t code animations by hand inside of the application. It is much better to create the animation once in After Effects, export it using Bodymovin and simply plug the output JSON file into web, iOS and Android applications. Then, the library takes care of parsing the json data and rendering the graphics. Apart from its reusability (you don’t have to build the same animation twice or three times from scratch) it has many other benefits that come to mind as soon as you start to use it:
– The animations in JSON take up about 30-50% less RAM memory than corresponding GIFs, which mitigates the risk of OutOfMemory exceptions and provides smoother in-app experience
– The size saving is even more apparent when you take into account that for every animation in your application you would have to provide about 5 or 6 gifs of different sizes which quickly adds up to quite a sizeable .apk file.
– The CPU use seems to be lower in almost all situations compared to ObjectAnimators.
– You don’t have to rely on the timing provided in the animation. The progress of the animation can be dependent on views’ scroll, gesture or anything else. Lottie’s API is really easy to use and well-suited to a wide range of needs.
– The graphic designer does the animation itself, specifies all the movement and transformations. The developers’ job is to just hook it up to the application, give it progress updates and they’re set. Depending on your company model that might be an amazing thing.
In conclusion, Lottie’s greatness comes from combining the best of two words. It has the hand-craftedness, smoothness and beauty of designer-made GIFs, while at the same time it provides scalability and ease of control of manually coded animations.
The guys at Airbnb are still actively developing the library and don’t seem to be slowing down. They say they want to increase the number of supported AfterEffects features to give designers even greater control over the look of the animations. We are really looking forward to those improvements as we plan on using this great library a lot in the near future.
READ MORE AMAZING ARTICLES FROM OUR TEAM.
Published 20 December 2018 by Applover
Looking back at year 2018 for ApploverRead more
Published 7 December 2018 by Applover
How to make sure your website is secure?Read more
Published 30 November 2018 by Applover
Building Blockchain Loyalty System at the HackYeah Hackathon 2018Read more
Published 27 November 2018 by Applover
A story about a Software House with a goal oriented approachRead more
Published 7 November 2018 by Applover
A beginners guide to the future of Financial System.Read more
Published 19 April 2018 by Applover
The crowdfunding portal DoMore was launched in 2009 as a service whose main goal was to combine donors and beneficiaries in one place.Read more
Published 19 April 2018 by Applover
Amino Fitness App is a mobile application and training platform in Dubai, aimed at matching personal trainers from various sports disciplines with potential clients.Read more
Published 18 April 2018 by Applover
Footsteps Smart Cities is one of the B2G market leaders in Poland. The company offers smart city mobile solutions and cooperates with several dozen local governments in Poland.Read more
Published 10 April 2018 by Applover
Building business on mobile app brings us a few questions, among others, how can we make money on our application.Read more
Published 1 November 2017 by Applover
We have all been there. Working for a year for a software company with a “junior developer” sticker on your shoulder. You’d love the promotion?Read more
Published 30 August 2017 by Applover
Kotlin is a small island near Saint Petersburg, Russia. As it happens there is a Jetbrains office not that far from it.Read more
Published 3 June 2017 by Applover
Since January 2016 our team has grown up significantly – from 4 members to a team of more than 20 developers, project managers, designers and testers – this required a lot of recruiting, but we’ve had not much knowledge about recruitment and employer – employee relation at that time.Read more
Published 15 May 2017 by Applover
Lotte Reiniger was a pioneer of silhouette animation in film. Her namesake which also happens to be the matter of this post is also a huge breakthrough in animation.Read more