How does Bodymovin work

The original author is @: Sunchwen. I reformatted the article and highlighted some important parts

Here is the text:

Summarize the experience of doing flat animation with Bodymovin in these months.

In recent months, I have done Lottie resource planning with my mentor. I have also followed the project with Bodymovin process and made some small dynamic effects. In this process, I kept finding and solving problems, learned some knowledge and accumulated some experience, and took this opportunity to make a summary of my work in these months. Thank you very much for your guidance ~~

Outline of the content

  1. A few key words
  2. Advantages and Limitations
  3. Where the demand comes from
  4. Dynamic effect case sharing (workflow)
  5. Official website and related links

(Originally edited: September 23, 2019)

A few key words

First, a few nouns to know:

(1) Lottie: Open source animation library designed by Airbnb.

In the past, animating for Android, iOS and other mobile and client applications was a very difficult and lengthy process. Airbnb Design has now come up with a solution to the interactive animation workflow of the Internet age: Animators can use Bodymovin, an open source AE plug-in, to export JSON files, and engineers and developers can modify Javascript to achieve interactive animation design.

Lottie has a variety of open source animation solutions on Github, such as Lottie for Web, Lottie for ios, Lottie for Android, etc.

(2) Bodymovin: An AE plugin.

Animators can download the free open source Bodymovin from aescripts, with tutorials on how to install it. After making MG flat animation in AE, designers export JSON files with BodyMovin, but animation design needs to comply with certain design specifications.

(3) Json: animation file format exported by Bodymovin.

Also called JavaScript Object Notation, Json is a data interchange language. Animators with Bodymovin exported JSON files can be submitted to the research and development personnel, extract the animation properties, and the corresponding configuration, animation will be presented in the product or page.

Second, advantages and limitations

(1) Advantages of Lottie Animation:

  • Unlike traditional hand-drawn animation workflows, which require tedious production time and great modification difficulty, Lottie animation can be easily modified and adjusted by designers. The designer can also change the animation speed, which is difficult to do with hand-drawn animation.

  • Unlike GIF animations, Lottie animations have more than twice the size of GIF files. Lottie animations are vector-scalable to match higher screen requirements, while GIF animations are non-vector-scalable.

  • Unlike PNG sequences, which are even worse than GIF, PNG sequences are bulky and cannot be vectorial scaled.

  • Properly configured Json files allow users to develop more interactive experiences, including animation playback at double speed, line thickness, and color adjustment.

  • The small SIZE of the Json file reduces the size of the product installation package and enables users to download resources more quickly.

  • Lottie animation is more convenient for animators and developers to cooperate, and better develop product animation interaction.

(2) Limitations of Lottie Animation:

  • First of all, Bodymovin temporarily does not support a variety of AE effects and attributes, use to comply with certain design specifications.

  • Bodymovin is sometimes unstable and buggy. Need to go to GitHub to find open source solutions etc.

As for which AE functions are Supported by Bodymovin and which platforms are Supported, there are detailed tables on the official website. You can go to the Supported After Effect Features section of the official website to check.

Third, where does demand come from

  • More and more products or marketing pages need to be presented to the audience in an interactive way.

  • With the development of the Internet era, interaction becomes more and more important.

  • The traditional animation process, the more difficult and time-consuming it is to implement, sometimes leads to conflicts between designers and engineers.

  • People are trying to find a more simple, efficient and high performance animation scheme.

Lottie Files’ homepage reads: The Future of Animation and Interactive Design. We can effectively convey information through animation, communicate with users, and better show marketing content through interaction; At the same time, users can also get timely information through interaction. The interactive design of animation could be more exciting.

4. Dynamic effect case sharing

Lottie animations are currently suitable for flat animations and MG animations based on the Shape Layer, as most AE effects and plugins are not supported. Before this, I also posted a small action effect case with Bodymovin output in the station. Here I use the action effect of Duolingo bird to share the case:

How to do vector animation with Bodymovin? It’s simple, just do it!

Workflow:

  1. Do animation: first of all, we need to follow the design specification, do animation in AE, the design specification here refers to Bodymovin does not support some special effects, expressions, etc., from the key frame, synthesis and other aspects of testing, continuous output, in order to achieve a smaller volume, more perfect animation solution.

  2. Render with Bodymovin: Open the Bodymovin plugin in After Effects ->Windows->Extension, select the composition to export, set the output path, press Render to output. In each composition setting, you can select output Settings, such as splitting the composition into multiple JSON files every few seconds.

  1. Export Json file: A small and editable Json file is exported using Bodymovin. Object names in JavaScript correspond to various properties in AE: fr (frame rate), IP (start key frame), OP (end key frame), W (width), H (height), Layers (layer), COMp (composite name), etc.

Lottie leads by example when it comes to animation and interaction, and the Bodymovin output panel has a cute little motion effect:

Lottie’s app can read JSON files or scan qr codes of animation files posted by other designers on LottieFiles’ official website, read them and preview them on the phone. Real interactive animation flexibility, adjustable, including background color modification, double speed playback, zoom in and out, etc.

Lottie Editor allows you to edit JSON files online, change layer colors, visibility, and more in real time.

V. Official website and related links

  • Someone whose Design website: reality. The Design/introducing…
  • Bodymovin’s GitHub: github.com/airbnb/lott…
  • Lottie Files Animator community: Lottiefiles.com/
  • Lottie Editor Animation editor: editor.lottiefiles.com/
  • IO/Lottie /#/RE…
  • Bodymovin download: aescripts.com/bodymovin/
  • The correct Way to open H5 Interaction by Nagisa Kaoru: ke.qq.com/course/2004…

Thank you for seeing the bottom of my friends ~

Thanks for your support ~

conclusion

At the beginning of Lottie, the mentor’s task was to have a very clear understanding of the strengths and limitations of the Bodymovin process, and to find other ways to achieve a similar design effect from the limitations. I read the website document, click on each derivative link, understand after the “predecessor” this life Lottie, from theory into practice, multiple dynamic effect experiment, including gradient, stroke, character animation, masking animation, three-dimensional, expression, etc., particular case is particular analysis, cannot be used for expression and pure color 3 d provides a solution to problems such as how to output, I also participated in the work project with Lottie process. Thank you very much for your guidance! I hope I can continue to get some new knowledge in the work, keep learning ability, good at summarizing and expanding thinking.

Thank you for your reading and support

Welcome to leave a comment

Give a thumbs up if it helps

▼ ▼ ▼ ▼ ▼ ▼ ▼