Animating with Lottie

Web animation is not only very interesting, but also effectively improves user participation and converts visitors into customers. Think of Twitter's "Like" button: When you click to like, colorful bubbles diffuse around the heart-shaped button, and the button gradually becomes a circle, and finally the red fill state after the like is displayed. If you simply fill the heart shape outline, the effect will be much worse. This sense of excitement and satisfaction perfectly illustrates how animation can enhance the user experience.

This article will introduce how to use Lottie to render Adobe After Effects animations on web pages to achieve complex animation effects such as Twitter like buttons.

Bodymovin is a plug-in for Adobe After Effects that exports animations to JSON format; Lottie is a library that can render these JSON animations natively on mobile and web pages. It was created by Hernan Torrisi. If you are thinking, "I don't use After Effects, this post may not be for me", please wait a moment. I'm not using After Effects, either, but I've used Lottie in my project.

Of course, you don't have to use Lottie to make animations on web pages. Another approach is to design animations from scratch, but this can be very time-consuming, especially for complex animation types that Lottie is good at dealing with. Another option is to use GIF animations, which have unlimited animation types, but their file size is usually twice as big as the JSON file generated by Bodymovin.

Let's start to understand how it works.

Get JSON file

To use Lottie, we need a JSON file that contains the After Effects animation. Fortunately, Icons8 offers many free animated icons available in JSON, GIF, and After Effects formats.

Add script to HTML

We also need to introduce the JavaScript library of the Bodymovin player in HTML and call its loadAnimation() method. The basic method is as follows:

<div id="icon-container"></div>
<script>
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('icon-container'), // 必需
    path: 'data.json', // 必需
    renderer: 'svg', // 必需
    loop: true, // 可选
    autoplay: true, // 可选
    name: "Demo Animation", // 可选
  });
</script>

Activational animation

After the animation is loaded into the container, we can use the event listener to configure the activation method and trigger the action of the animation. The following are the available properties:

• container : load the DOM element of the animation
• path : The relative path to the JSON file containing the animation
• renderer : animation format, including SVG, canvas and HTML
• loop : Boolean value, specify whether the animation is played loop
• autoplay : Boolean value, specify whether the animation will automatically play after loading
• name : Animation name, used for future references

Note that in the previous example, animationData property has been commented out. It is mutually exclusive to path attribute and is an object containing the exported animation data.

Try an example

I want to demonstrate how to use Lottie with this animation play/pause control icon from Icons8:

The Bodymovin player library is statically hosted here and can be placed directly into HTML, but can also be used as a package:

 npm install lottie-web ### or yarn add lottie-web

Then, in your HTML file, include the scripts from the dist folder of the installed package. You can also import the library from Skypack as a module:

 import lottieWeb from "https://cdn.skypack.dev/lottie-web";

Currently, our pause button is in loop playback and plays automatically:

Let's change it so that the animation is triggered by the action.

Trigger animation

If autoplay is turned off, we will get a static pause icon because that's how it exports from After Effects.

But, don't worry! Lottie provides some methods that can be applied to animation instances. That is to say, the documentation of the npm package is more comprehensive.

We need to do a few things:

• Initially displayed as "Play" status.
• Set its animation to "pause" when clicked
• Then switch the animation between the two when clicked.

goToAndStop(value, isFrame) method is very suitable here. When the animation is loaded into the container, this method sets the animation to go to the provided value and then stops there. In this case, we have to find the value of the animation when it is played and set it. The second parameter specifies whether the provided value is based on time or frame. It is a Boolean type with a default value of false (i.e., a time-based value). Since we want to set the animation to play frame, we set it to true.

Sets the animation to a specific point on the timeline based on the timeline based on the value. For example, the time value at the start of the animation (at pause) is 1. However, the animation is set to a specific frame value based on the value of the frame. According to TechTerms, a frame is a single image in an image sequence. So if I set the frame value of the animation to 5, the animation will go to the fifth frame in the animation (in this case "Image Sequence").

After trying different values, I found that the animation plays from frame values ​​11 to 16. So I chose 14 to be safe.

Now we need to animate so that it changes to pause when the user clicks it and plays when the user clicks it again. Next, we need playSegments(segments, forceFlag) method. segments parameter is an array type containing two numbers. The first and second numbers represent the first and last frames that the method should read, respectively. forceFlag is a boolean value indicating whether the method should be triggered immediately. If set to false, it will wait until the animation plays to the value specified as the first frame in the segments array. If true, the clip will be played immediately.

Here I created a flag to indicate when to play the clip from play to pause, and the clip from pause to play. I also set forceFlag boolean to true because I want the conversion to be done immediately.

That's it! We render animations from After Effects into the browser! Thanks Lottie!

Canvas?

I prefer using SVG as the renderer because it supports scaling, which I think can render the clearest animation. Canvas rendering is not very good and does not support scaling. However, if you want to render animations with an existing canvas, you need to do some extra operations.

More operations

There are also some events in animation instances that can also be used to configure the behavior of animations.

For example, in the Pen below, I added two event listeners in the animation and set some text to display when the event is triggered.

All events can be found in the documentation for the npm package. With all this, let me say something else, let’s render some amazing animations!

The above is the detailed content of Animating with Lottie. For more information, please follow other related articles on the PHP Chinese website!