This article is about the article I posted in Zhihu in April. Links:zhuanlan.zhihu.com/p/26304609)



Some time ago, I heard from the head of the department that Airbnb developed a mobile terminal animation library Lottie, which can be combined with an AE plug-in named Bodymovin to export the animation done on AE into JSON files, and then render and play it on mobile devices in the form of Android/iOS native animation. After Effects (Adobe After Effects) is an expert in video post Effects and animation, which was used to create the MG animation that flooded the scene recently. If it can be achieved, it will greatly facilitate the design of front-end animation.

Later, on April 8, I attended the second China Front-end Developers Conference (FDCon2017) and looked at you as a rookie. Coincidentally, Lottie and Bodymovin were also mentioned by Nagisa Ohtaku, from Ali, in his keynote speech. Nagisa kaoru’s topic was “The right Way to Open H5 Interaction” and his presentation was excellent. What are you waiting for? I practiced after the meeting.

(Above is the PPT page of EMnagisa Kaoru speaking about Lottie in FDCon2017)


After some experimentation, I figured out how to use Bodymovin. This plugin can export Composition from AFTER Effects into A JSON file with vector animation information, which can be played on any of the following platforms:

  • Web page in the form of SVG /canvas/ HTML + JS. Bodymovin provides its own JS library as a Player – bodymovin.js;
  • Android native, through Airbnb’s open source project “Lottie-Android”;
  • IOS native, through Airbnb’s open source project “Lottie-ios”;
  • React Native is implemented through Airbnb’s open source project “Lottie-React – Native”.


Here is a step-by-step summary of how to install and use Bodymovin, and how to play the exported animation on the Web page.



1. If you do not have AE on your computer, you need to install AE CC2014 or later. Take AE CC2017 as an example:



(WELCOME screen for AE CC2017)



2. After AE is installed, install Bodymovin.

There are several ways to install plug-ins, such as going directly to Adobe add-ons (link: Adobe Add-ons, not the latest version) or going to Bodymovin’s GitHub homepage to download and install the latest version of the plug-in. I recommend the second method, which is as follows:

2.1 Go to Bodymovin’s GitHub homepage (link:bodymovin/bodymovin) clone the project locally or download the. Zip package.


2.2 In the project directoryZXP /build/extension/bodymovin.



2.3 downloadThe installationZXP Installer (link:ZXP Installer), Open the software, click “File” > “Open” menu item to load the above. ZXP plug-in package,The ZXP Installer will start installing automatically. After the software is installed, the following figure shows the software home page.


3. Open After Effects, choose Edit > Preferences > General, select Allow scripts to write files and access networks, and click OK.



4. Click “Window” > “Extension” > “Bodymovin” menu item, you can open the Bodymovin interface to use the plug-in.


5. In the empty AE project, create a new compositing called “Compositing 1” and create a simple animation:



6. Open the Bodymovin plugin window, you can see “Composition 1” appears in the following list. Select “Compose 1”, set the output position of the JSON file, and click “Render”.



7. Bodymovin also provides Preview function for the generated JSON file. Click the “Preview” button on the plug-in interface and click “Browse” to load the generated JSON file.



8. Let’s create a new web page to play this animation. Copy “build\ Player \ Bodymovin. Js” from Bodymovin’s GitHub project directory and the json file you just generated to the root directory of the web page and create a new HTML file, the code is as follows:


        
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bodymovin Demo</title>
    <script src="bodymovin.js"></script>
</head>
<body>
    <div id="animation"></div>
    <script>
        bodymovin.loadAnimation({
            path:'data.json'.//json file path
            loop:true.autoplay:true.renderer:'canvas'.// Render with "HTML", "canvas" and "SVG"
            container:document.getElementById('animation')});/ / bodymovin js API documentation see making complete project home page (https://github.com/bodymovin/bodymovin)
    </script>
</body>
</html>Copy the code



9. Open this page, you will find that the animation successfully run, isn’t it very black technology?



10. If you want json animations to run on Android/iOS devices, search for “Lottie” on GitHub and choose the platform you’re interested in.


I remember at the FDCon2017 conference, after nagisa kaoru finished his talk, someone asked me the question I had always wanted to ask:

Adobe has released An (Adobe Animate CC) for HTML5 animation design. Why not use An instead?

Nagisa replied that the predecessor of An is Flash, which produces H5 animations written in JS (using the CreateJS library), which are more complex to modify and maintain later. Indeed, after using Bodymovin, it is easy to see that it is very flexible, and json animation is far more suitable for cross-platform than JS animation. Wow. 10,086 likes for Bodymovin.



— — — — —

The asynchronous community is the top IT professional book community in China. I heard that you can get the book of the asynchronous community for writing articles recently. I really want to have a look at this book: Git Learning Guide to consolidate the basic knowledge.