Animate web pages with AE + BodyMovin

As we know, there are various forms of animation. CSS animation, Canvas, or JS can be used to control the properties of CSS to form animation. We often use CSS to make some relatively simple animations, such as excessive and loaded animations. For some complicated animations, we may make them into GIFs or use Canvas. The control granularity of Canvas can be very fine, and the workload is relatively large. There are other ways to do animation, that is to use After Effect(AE)/ Flash/Premiere(Pr)/ audio and video software, this way of visual production is easier than directly writing code, simple and natural. Animation itself should be made using tools, but the animation made by this video software is the end of the generated video files, and usually too large to be directly transplanted to the web.

However, the good news is that you can now animate using AE and export it to HTML files for playback using the BodyMovin plugin. AE is a popular video post-processing software from Adobe. Some movies are made with AE, such as Transformers, and some people use AE as an enhanced VERSION of PS. That said, it would be cool if we could make some movie-quality effects in AE and play them in HTML.

1. Install bodymovin

Bodymovin is an open source third-party extension for AE, github address. You can download the plugin above. Install a ZXPInstaller to install this file, and then restart after Effects if you need to install an AFTER Effects. It supports AE CC versions:

Once installed, click on the AE menu Window -> Extensions -> Bodymovin and a Window will pop up:

2. Animate with AE

I’m sure many of you haven’t played AE, so I’ll give you a brief introduction. First create a new project, then create a Composition, select 1080p/29fps for 10s and it will create a composition for 10s. The following timeline panel displays:

This timeline will be a place of frequent operations. Click on the Type Tool (T), select a position in the preview window at the top and click Create Text, then drag it outside the window, because we are going to make an animation of text coming in from outside, so it is outside at first. Drag the time line represented by the blue vertical line on the right of the image above to the Position Position Position on the left text layer, as shown in the image below:

Then move the timeline to the Position of 3S, change the Position of the text, and move it to the middle of the window. At this time, AE will automatically type a key frame at the Position of the timeline, as shown in the picture below:

Then press the space bar to preview, and the preview window will play the animation we just set:

You can see that this process is the same as the KEYFrame animation in CSS. That’s right! The principle of animation is the same, by setting the key frame to create animation. Now compare this animation with AFTER Effects and CSS/Canvas.

3. Keyframe animation

Now do the animation with CSS, as shown in the following code:

<style>
.text{
    animation: move 3s linear infinite;
}

@keyframes move{
    from{
        transform: translateX(-320px);
    }
    to{
        transform: translateX(100px); }}</style>
<div class="container">
    <p class="text">Hello, frontend</p>
</div>Copy the code

We add an animation to the animation. The animation has two keyframes, at 0% and 100%, that need to change the transform property. Run this code in a browser and it will have the same effect as the animation you just created with AE. If you use Canvas, how should you implement it?

The following code looks like this:

<canvas id="text-move" width="600" height="400"></canvas>
<script>
!function(){
    window.requestAnimationFrame(draw);
    var canvas = document.querySelector("#text-move"),
        ctx = canvas.getContext("2d");
    function draw(){
        // Calculate the text position
        var textPosition = getPosition();
        drawText();
        window.requestAnimationFrame(draw);
    }    
}();Copy the code

This is the basic framework for Canvas animation. First register the Draw function of requestAnimationFrame so that the browser will call this function when redrawing the screen. Ideally, 60 images will be drawn in 1s, i.e. 60 frames /60 FPS.

The most critical part of the above code is to calculate the position of the text. Similarly, it is necessary to set the initial position, the end position and the animation time, so as to know the moving speed V, that is, the distance every 1s, and record the start time of an animation. Then draw each time using date.now () to get the current time minus the start time to get the time t, and then v * t to get the displacement. This is the basic principle of animation with Cavans. As we see, using Canvas requires the implementation of a keyframe system.

From the perspective of abstraction level, after Effects > CSS >> Canvas, WITH AE I just need to drag and click and type several key frames, while with CSS, I need to write my operation into code, while with Canvas I need to control it bit by bit from 0, of course, you can use some animation and game engine to improve efficiency. So if you have a choice between a visual interface that allows you to do complicated things, and a way to write code line by line, I think most people would prefer the former. Of course, the difference between the two is not just about ease of operation, but also the ability to create complex effects quickly with AE borrowing plug-ins.

4. Bodymovin

You’ve just done the simplest animation with AE, now export it using BodyWin. Open BodyMovin, select the composite layer, and select the output path, as shown below:

Then click Render and when done it will output a JSON file. Open the exported file:

{” v “, “4.10.1”, “fr” : 29.9700012207031, “IP” : 0, “op” : 95.0000038694293, “w” : 1920, the “h” : 1080, “nm” : “Comp 1″,”ddd”:0,”assets”:[],”fonts”:{“list”:[{“origin”:0,”fPath”:””,”fClass”:””,”fFamily”:”Myriad Pro fWeight “, “” :” “, “fStyle” : “Regular”, “fName” : “MyriadPro – Regular”, “ascent” : 70.9991455078125}}], “the layers” : [{” DDD “: 0,” ind “: 1 ,”ty”:5,”nm”:”hello, Frontend, “” sr” : 1, “ks” : {” o “: {” a” : 0, “k” : 100, “ix” : 11}, “r” : {” a “: 0,” k “: 0,” ix “: 10},” p “: {” a” : 1, “k” : [{” I “: {” x” : 0.833, “y” : 0.833}, “O” : {” x “: 0.167,” y “: 0.167},” n “:” 0 p833_0p833_0p167_0p167 “, “t” : 0, “s” : [- 1017692, 0], “e” : [458692, 0], “to” : [245.83332824707, 0, 0], “ti” : [245.83332824707, 0, 0]}, {” t “, 90.0000036657751}], “ix” : 2}, “a” : {” a “: 0,” k “: [0, 0],” ix “: 1},” s “: {” a” : 0, “k” : [100100, 1 00],”ix”:6}},”ao”:0,”t”:{“d”:{“k”:[{“s”:{“s”:164,”f”:”MyriadPro-Regular”,”t”:”hello, Frontend “and” j “: 0,” tr “: 0,” lh “: 196.8,” ls “: 0,” fc “: [,0.64 0, 1]},” t “: 0}}],” p “: {},” m “: {” g” : 1, “a” : {” a “: 0,” k “: [0, 0],” ix “: 2}},” a “: ]}, “IP” : 0, “op” : 300.00001221925, “st” : 0, “bm” : 0}}]

This file records the process of all animations. The bold font above is the position of the two keyframes we just typed. To install the BodyMovin engine, download bodymovin. Js on Github or install NPM:

npm install bodymovinCopy the code

Then you can use bodyMovin, as shown in HTML:

       
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="animation-container" style="width:100%"></div>
    <script src="node_modules/bodymovin/build/player/bodymovin.js"></script>
    <script src="index.js"></script>
</body>
</html>Copy the code

Index.js looks like this:

var animation = bodymovin.loadAnimation({
    container: document.getElementById('animation-container'),
    renderer: 'canvas'./ / SVG, HTML
    loop: true.autoplay: true.path: 'data.json'
})Copy the code

Call its loadAnimation API and pass several parameters. It supports canvas/ SVG/HTML in three forms, that is to say, it can animate with Canvas, SVG and HTML. Among them, Canvas has the highest performance, but many effects are not supported by Canvas. The location of data.json is told by path. All animations are distinguished by changing the data.json file to which path points, and other parameters remain unchanged. This means that all animation content and effects are controlled through data.json.

Now run it in your browser and you will see an error:

Later, IT was found that this error was caused by text. If the canvas mode is used, the text should be generated into SVG instead of a plain text, and then font-family can be set in BodyMovin, as shown below:

You can also export a full demo and run it directly in HTML, which is more convenient. The effect is as follows:

And what we found is that its size and displacement are relative to the container, and when you pull the window down, it gets smaller. When using SVG, it uses JS to control the SVG path tag’s transform:

When using HTML, it’s a transform that controls CSS:

We have a Hello, World project running, how much complex animation can BodyMovin support?

5. AE’s camera

Using AE to do animation AE camera layer, often used when a camera is a visual Angle, by default the camera from front middle take the past, we can change the camera position, such as the camera to push the content will enlarge, the camera moving around, then see will tilt, It has a lot of camera-like parameters to control:

All camera properties can be animated by keyframing, now we add the camera for 3D animation. When you’re done, if you’re still using Canvas, it will tell you that you can’t use Canvas because it doesn’t visually support WebGL transformations, as shown below:

I’m using a 3D camera. Try using the HTML renderer. The final effect is as follows:

Upon examination, it can be seen that the camera is also controlled by transform’s Matrix. The full DMO is available at this link.

Then we’ll move on to the complex animation

6. Complex animation

Of all the special effects, my favorite is the particle effect, which is often used in movies, such as the Ice Queen’s Ice Magic:

There is also the particle effect of text:

However, I tried this effect and couldn’t export it. This effect itself is complicated, time-consuming to render and impractical to play in REAL time in HTML.

There are also some strange errors that are sometimes reported. The most common one is this one:

bodymovin.js:9249 Uncaught TypeError: this.addTo3dContainer is not a function

It may be bugged by the use of certain effects.

But don’t get upset, we can still export some complex effects, and the key to animation is the idea.

For example, you can make a small animation of decorations like this:

A full demo can be found here.

You can also make a photo album video that looks like this:

See the full demo here.

To make a 1080p video, a 1.5-minute MP4 format would take more than 100 MB even if it was heavily compressed, but now I only need to load a 90KB JSON file, a 240kB library file, and around 10Mb of images. And the text and graphics are vector.

Now look at the CPU consumption, you can see that the album video SVG animation is still CPU intensive, but you can also use CPU resources to start a video player.

However, BodyMovin offers a whole new way to do web animation without the dark side of pure code control, and you can do cool animations without learning Canvas or WebGL. However, there is undoubtedly a disadvantage of this method, that is, there is no way to add parameter control, for example, if I make an angry bird, I have to calculate its trajectory by the direction and force of the bow and the weight of the bird. But after effects can only be pure animation. So usually you can combine the two.

Bodymovin also supports conversion to IOS/Android code, which I feel is still in its early stages and there is not much online about it. But as this gets more and more popular, it’s getting better and better, and maybe it’ll support more effects and even parameters in the future.