Lottie of the fort

Airbnb recently opened source an animation library called Lottie that supports iOS,Android and ReactNative development. As soon as this news came out, I was still struggling to explore all kinds of cool effects of custom controls. I was excited as if I had discovered a new continent. Lottie has freed Android/iOS engineers from the endless work of writing native custom animations. When we used GIF to achieve some complex visual effects in our projects, we encountered many problems. For example,GIF files are too large and can be difficult to adapt to devices with different resolutions, and the color depth of the GIF format is a dead end.

For example, here are some animation effects:





http://cdn.trojx.me/blog_pic/Example1.gif

And these:





http://cdn.trojx.me/blog_pic/Example2.gif

Designing these animations is clearly not the responsibility of the programmer who writes the code. Is there a way to make the animations that artists design on AFTER Effects directly available on mobile? Yes, it is using Lottie.





http://cdn.trojx.me/blog_pic/lottie_sum.png

The BodyMovin plugin itself is an open source library for rendering a variety of AE effects on web pages. What Lottie has done is to implement a plugin that can be used in different formats The way after Effects animation is displayed on the animation platform. So as to achieve the animation file a drawing, a conversion, everywhere available effect. Of course, Lottie itself, the animation player library, is not cross-platform, just as Java builds once and runs anywhere.

Learn to use

With all that said, here’s how to use this bunker vault in more detail. First of all, the following software may contain cracked version, if you have enough money, please support the legal version. The following methods of use and software are valid on February 6, 2017.

Install Adobe After Effects CC 2017

Adobe is a good company and makes a lot of great software, but all of them are cracked by Chinese. This example uses the latest version of AE CC 2017.





http://cdn.trojx.me/blog_pic/AE_CC_2017.png

  • It can be downloaded at www.dayanzai.me/after-effec…
  • CDN Shunt address trojx-me.oss-cn-hangzhou.aliyuncs.com/AE%202017%5…

Thanks to the author for providing the software. Note that this version is only applicable to WIN 64-bit system, the author can normally install and use in Windows 7 64-bit environment. Follow the built-in instructions during installation.

Install the BodyMovin plugin

See the GitHub page for this plugin.

downloadbodymovin.zxpThe plug-in package

This file is located in the /build/extension/ directory of the project. If the Internet speed is slow, you can download the latest version of the plug-in from here.

Installing a plug-in

The project description provides three ways to install plug-ins for AE:

  • Install using the third-party software ZXP Installer.
  • Manual installation;
  • Install using Adobe’s official plug-in installer.

I’ve tried all three, and only the second (and seemingly most tedious) works. The second method is explained in detail here:

  • Turn off the AE;
  • Open it with WinRAR or similar softwarebodymovin.zxpFile, and copy the decompressed folder directly toC:\Program Files (x86)\Common Files\Adobe\CEP\extensions

    Or is itC:<username>\AppData\Roaming\Adobe\CEP\extensionsFor MAC machines, the path is/Library/Application\ Support/Adobe/CEP/extensions/bodymovin





    http://cdn.trojx.me/blog_pic/bodymovin_zxp_extracted.png






    http://cdn.trojx.me/blog_pic/bodymovin_zxp_extracted_copy.png

  • Modify the registry. For Windows, open the registry modifier and findHKEY_CURRENT_USER/Software/Adobe/CSXS.6And under this path add a name namedPlayerDebugModeThe KEY,

    And assign 1; For a MAC, open the file~/Library/Preferences/com.adobe.CSXS.6.plistAnd add a line at the end with the keyPlayerDebugMode, a value of 1.
  • No matter how you install the BodyMovin plugin, you need to install it in AEEdit -> Preferences -> GeneralThe admissionAllows scripts to write files and access the network(Disabled by default)





    http://cdn.trojx.me/blog_pic/ae_setting.png

Start animating

Since I am not currently using AE(crap, the software is just installed), here we open an existing project file. Here you can find some AE source files for the animations shown in Lottie, download them locally and open them in AE. Here we use the emptystate. aep example project and modify it slightly:





http://cdn.trojx.me/blog_pic/empty_page_editting.png

Exporting JSON Data

If the bodyMovin plugin is installed successfully, it can be found in the Windows -> Extension in After Effects.





http://cdn.trojx.me/blog_pic/ae_bodymovin_menu.png

Select the json data file export path in the plug-in window and click the Render button to Render the project and export it.





http://cdn.trojx.me/blog_pic/ae_bodymovin_render.png

  • Original engineering animation effect:





    http://cdn.trojx.me/blog_pic/empty_state_origin.gif

  • Original project export JSON file: CDn.trojx. me/blog_raw/lo…

  • Modified project animation effect:





    http://cdn.trojx.me/blog_pic/empty_state_edit.gif

  • Modified project exported JSON file: CDn.trojx. me/blog_raw/lo…

Play animations using Lottie libraries

Finally, the main character, however, is relatively simple to use. The introduction and use of Lottie is just like any other library, with Android as an example.

Add the following to your project’s build.gradle file:

    dependencies {  
      compile 'com. Reality. The android: Lottie: 1.0.1'. }Copy the code

Lottie supports Jellybean (API 16) and above. The easiest way to use Lottie is directly to add:

    <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

Alternatively, you can add them in code. For example, import animation data from a JSON file in app/ SRC /main/assets:

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

This method will load the data file asynchronously in the background thread and start rendering the display animation once the load is complete. If you want to reuse the loaded animation, for example, every item in the next ListView needs to display the animation, then you can do this:

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view); . LottieComposition composition = LottieComposition.fromJson(getResources(), jsonObject, (composition) -> { animationView.setComposition(composition); animationView.playAnimation(); });Copy the code

You can also control animations through the API and set up some listeners:

    animationView.addAnimatorUpdateListener((animation) -> {
        // Do something.}); animationView.playAnimation(); .if (animationView.isAnimating()) {
        // Do something.}... animationView.setProgress(0.5 f); .// Customize the speed and duration
    ValueAnimator animator = ValueAnimator.ofFloat(0f.1f)
        .setDuration(500); animator.addUpdateListener(animation -> { animationView.setProgress(animation.getAnimatedValue()); }); animator.start(); . animationView.cancelAnimation();Copy the code

In the case of masks,LottieAnimationView uses Lottie edrawable to render the animation. If necessary, you can use the drawable form directly:

    LottieDrawable drawable = new LottieDrawable();
    LottieComposition.fromAssetFileName(getContext(), "hello-world.json", (composition) -> {
        drawable.setComposition(composition);
    });Copy the code

If you need to use an animation frequently, you can use a cache strategy built into LottieAnimationView: LottieAnimationView.setAnimation(String, CacheStrategy), where the value of CacheStrategy can be Strong,Weak, or None, and is used to determine what form of reference LottieAnimationView holds (Strong/Weak reference) to the animation that has been loaded and converted.

supplement

See DON Chen’s article for an introduction to Lottie in iOS

Share a website that previews json animated data in a browser

The Lottie official Android Demo installation package has the ability to view sample animations and load and play JSON animation data from local storage or the network.

I’m going to work on AE. There should be an Android Demo using Lottie. Original address www.trojx.me/2017/02/06/…