The first day of the New Year to work, did not expect the start of spring, as the saying goes, a year’s plan depends on spring, the new 17 years began, come, clean up the mood, into the work, roll up sleeves, is dry!

Just the other day, Airbnb opened source a project called Lottie, which I personally think is awesome!

Animation believes everyone not unfamiliar, in the process of App development, appropriate use of animation can improve the user experience, make our products icing on the cake, for some simple animation, we can easily achieve, but for some more complex animation, to implement more troublesome, some animation such as below:





How’s that？ These are not simple to move, zoom, rotate to fix, maybe some people after thinking about the implementation of the following ideas:

  • This is certainly possible with Gif, but it takes up a lot of space and needs to be adapted to various screen sizes and resolutions. Android does not provide native Gif API support, so there are compatibility issues with this solution.

  • Using frame animation, this way is better than using Gif, generally using frame animation takes up much more space than Gif, but also to do more screen resolution adaptation, but will not encounter compatibility problems;

  • The use of video, this way of course, but generally speaking, the propaganda video is used on the video, the general animation far do not need to use video to achieve, it is somewhat overqualified, and take up a lot of space.

Isn’t there a better way to do it?

Of course, Android 5.x provides support for SVG, which can be used to create slightly complex animations using a combination of VectorDrawable and AnimatedVectorDrawable. Compatibility is a problem, but the implementation process is very cumbersome. Every time a new animation implementation has to start all over again, the most critical is, if a company’s App, iOS also has to implement a set of the same animation, the occupation of resources will be too large.

Airbnb’s open source project perfectly solves these problems, so let’s take a look at what the process looks like.

Let’s say we want to create a welcome animation for the lead page. The designer would use After Effects to create an animation. It’s much faster and easier for designers to create an animation with After Effects than it is for engineers to create an animation with code. After AE, there is a plug-in called Bodymovin, which is also awesome. You can directly export JSON files according to the animation files on AE, and the JSON file describes the coordinates and movement tracks of some key points of the animation. Later, we reference Lottie open source library in the project. Simply adding this sentence to the layout file is perfect.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animation_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="hello-world.json"
    app:lottie_loop="true"
    app:lottie_autoPlay="true" />Copy the code

Or use it in code like this:

LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);Copy the code

It is worth mentioning that our hello-world.json file only needs to be stored in app/ SRC /main/assets.

Of course, there are many more uses, such as adding events to animations. Json files that describe animations can be remotely updated and downloaded locally, so that you can update your animations regularly and quietly.

With this library, we can use our imagination to easily implement a set of cool animations. Most importantly, the library is cross-platform, supports Android, iOS and ReactNative, and shares a set of JSON animation description files.

In fact, Facebook recently opened source a similar library called Keyframes, which is also cross-platform, but Littie supports more features than Keyframes, and according to the official blog of Airbnb, we have to say that the library will support more features and functions in the future. True conscience!

Finally, the open source address for this library is here:

Android: github.com/airbnb/lott…

IOS: github.com/airbnb/lott…

ReactNative: github.com/airbnb/lott…

Finally, Airbnb also provided a sample APk. Considering that some people find it difficult to download APK on Google Play, I also kindly downloaded the sample APk. The public account Googdev responded to the background to obtain the keyword “Lottie”.

This article was originally published on wechat public account Stormzhang, ID: Googdev, not only technology sharing, there are more bullshit, attention please be careful!