Lottie Android animation production and use

For those of you who are not familiar with Lottie, please check out my previous article on Lottie Android

I. Preview of effect drawing

Install Adobe After Effects

As IT siege lion, installation software is also very powerful, I will not make a fool of the installation tutorial, and finally remember to install the plug-in Bodymovin.

Three, prepare material

I am in Android Material Material style icon LOGO generator generated Material, open the web page, and then select “choose an icon from below” or scroll to the bottom of the page, randomly select an icon, I choose is download icon. The configuration download page is displayed. After the configuration is complete, click Download.

The downloaded content is as follows:

Iv. AE production started

Open after Effects and enter the home screen. Use Ctrl+ I to import the icon you just downloaded:

Use Ctrl+N to create a new composition:

Left click on the ic_launcher. PNG icon in the upper left and drag it to the action box below:

Select the downloaded icon and move it up some distance:

Left-click the round box to the left of “Location” to determine the starting position of the icon:

In the timeline operation panel at the bottom right, move the “current time indicator” to 1s to indicate the animation duration of one second:

Then drag the icon from the composition panel in the upper right to move it down some distance:

In the lower right timeline panel, drag the line on the time ruler and the line below it to move them to the 1s position, then click the Play button in the preview panel on the right side of the main screen to watch the effect;

Then choose “window” -> “extension” -> “bodyMovin”, open bodyMovin panel, select the round box under Selected, select the export position, and then click Render to Render and export JSON format file.

At this point, AE to make a simple animation and export json file complete.

V. AS to create a Lottie project

Add dependencies to build.gradle in app Module:

dependencies {  
  compile 'com. Reality. The android: Lottie: 2.0.0 - beta4'
}
Copy the code

Create an assets directory in the main directory and put the exported data.json file into it.

Then write the following code in the XML layout:

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
Copy the code

Add:

 LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
        animationView.setAnimation("data.json");
        animationView.loop(true);
        animationView.playAnimation();
Copy the code

The data.json file is imported to assets.

Then run to the phone, the following error occurs:

java.lang.IllegalStateException: You must set an images folder before loading an image. Set it with LottieComposition#setImagesFolder or LottieDrawable#setImagesFolder
Copy the code

You must set up an image folder before loading the image. You can call the setImagesFolder method of Lotus Position or the setImagesFolder method of Lotus EdRawable.

These two methods are no longer available in version 2.0.0-Beta4. We can use LottieAnimationView’s setImageAssetsFolder method and LottieDrawable’s setImageAssetsFolder method.

SetImageAssetsFolder:

If you use the assets of Image, you must explicitly specify the assets folder where they are located, because the bodyMovin exported files use a file name starting with img_ for the sequence of ingredients inside. Do not rename the images you put into assets. If your image is in SRC /main/assets/ airbnb_loader /, you can call the setImageAssetsFolder(” airbnb_loader/”); .

In this case, we create an LSJ folder under assets, rename the original animation to img_0.png and put it under LSJ. The reason why the modified name is img_0.png has been explained in the above paragraph. Alternatively, it can be found in data.json:

"assets": [{"id":"image_0"."w": 192,"h": 192,"u":"images/"."p":"img_0.png"}].Copy the code

Let’s change the code in our Activity to:

 LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
        animationView.setImageAssetsFolder("lsj/");
        animationView.setAnimation("data.json");
        animationView.loop(true);
        animationView.playAnimation();
Copy the code

At this point, animation, export JSON file, display on the Android platform to complete.

Sixth, the Demo

https://fir.im/lottied
Copy the code

Vii. Reference materials

[bodymovin] http://jaqen.me/mdpub/ [Lottie Android asain] http://blog.csdn.net/vitamio/article/details/70046998 [Android Material Style LOGO generator] http://jaqen.me/mdpub/Copy the code

Original article, reproduced please indicate the source.

Lottie Android animation production and use