Lottie-web was used in a recent project, but the JSON used in Lottie-Web generation is extremely long, so if we want to modify its parameters during development, we must understand what each field represents. Now the knowledge used in the project is summed up, hoping to be helpful to its small partners.
What is Lottie-Web?
Lottie is a mobile library for the Web and iOS that uses Bodymovin (an AE plug-in) to parse Adobe After Effects animations exported in JSON format and render them natively on mobile devices! . When doing animation, let the design students do the animation first, export THE JSON to the development students, and the development students just take this JSON and use Lottie to analyze, can render the animation.
How do I use Lottie
- The introduction of the script
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.3/lottie.min.js" integrity="sha512-35O/v2b9y+gtxy3HK+G3Ah60g1hGfrxv67nL6CJ/T56easDKE2TAukzxW+/WOLqyGE7cBg0FR2KhiTJYs+FKrw==" crossorigin="anonymous"></script>
或者
$ npm install lottie-web
Copy the code- Loading animation
lottie.loadAnimation({
container: document.getElementById('container'), // the dom element that will contain the animation
renderer: 'svg'.loop: false.autoplay: true.path: './data/data.json' // the path to the animation json
});
Copy the codeYes, it’s as simple as that, and the animation is rendered. Before we see what JSON looks like, let’s draw a simple animation in AFTER Effects. Here I will draw a simple animation with only the image fading in and out.
Then use bodyMovie to export and take a look at the JSON in its entirety.
{
"v": "5.6.10".// Use the bodyMovie plugin version
"fr": 32./ / frame rate
"ip": 0.// Start time of composition
"op": 64.// Duration of composition
"w": 750.// Synthesize the width
"h": 1334.// Synthesize height
"nm": "Synthesis 1"./ / synthesis
"ddd": 0.// Whether the layer is 3D
"assets": [ // The resources used
{
"id": "image_0".// Id of the resource used
"w": 750.// The width of the current image resource
"h": 1334.// The height of the current image resource
"u": "images/".// The current image is exported under bodyMovie
"p": "img_0.jpg".// Current image resource path
"e": 0 // if e=0, use u+p as the image path. If e=1, use p directly.}]."layers": [ / / layer
{
"ddd": 0.// It is a 3D layer
"ind": 1.// Index of the current layer
"ty": 2.// 2 represents the image layer
"nm": "img_0.jpg"./ / the name of the source
"cl": "jpg"./ / the suffix
"refId": "image_0".// Use the id in assets
"sr": 1.// Layer => Time => Time scaling
"ks": { // Layer => Transform
o": {// transparency"a": 1, // whether keyframe"k": [// array in case of keyframe {// Configuration information for each keyframe position"i": {"x": [0.833]."y": [0.833]}, // The current input value of the Bezier curve, which is written dead in Lottie."o": {"x": [0.167]."y": [0.167]}, // The current output value of the Bezier curve, which is written dead in Lottie."t": 0, // current keyframe start time"s": [60] // Start opacity}, {// Second keyframe configuration information"i": {"x": [0.833]."y": [0.833]}."o": {"x": [0.167]."y": [0.167]}."t": 25,"s": [100]}, // The configuration of the third keyframe {"i": {"x": [0.833]."y": [0.833]}."o": {"x": [0.167]."y": [0.167]}."t": 30,"s": [100]}, // The configuration information of the fourth keyframe {"t: 50, ""s": [50]}],"ix": 11 // Property Index. Expression tags. Haven't worked out how to use this},"r": {// rotate"a": 0, // is a keyframe, 0 means not a keyframe"k": 0, // number for non-keyframe, rotation Angle 0"ix": 10 // Property Index. Expression tag},"p": {// position"a": 1, // keyframe"k": [{"i": {"x": 0.833."y": 0.833}, // The current input value of the Bezier curve, which is written dead in Lottie."o": {"x": 0.167."y": 0.167}, // The current output value of the Bezier curve, which is written dead in Lottie."t": 0, // start time"s": [-375, 675, 0], // Current keyframe position, x-375, y-675, not 3D layer, z-direction 0"to": [125, 0, 0], // In Spatial Tangent. Only for spatial properties. Array of numbers. I don't know what a space tangent is in AE."ti": [-125, 0, 0] // Out Spatial Tangent. Only for spatial properties. Array of numbers. I don't know what a space tangent is in AE}, {"i": {"x": 0.833."y": 0.833}."o": {"x": 0.167."y": 0.167}."t": 25,"s": [375, 675, 0],to": [0, 0, 0],ti": [0, 0, 0]}, {"i": {"x": 0.833."y": 0.833}."o": {"x": 0.167."y": 0.167}."t": 30,"s": [375, 675, 0],to": [125.167, 0, 0]"ti": [-125.167, 0, 0]}, {"t: 50, ""s": [1126, 675, 0]}],"ix": 2 // Property Index. Used for expressions. }, "a": {// anchor point"a": 0, // not keyframe"k": [375, 667, 0], // anchor value"ix": 1 // Property Index. Used for expressions. }, "s": {// zoom scale"a": 0, // not keyframe"k": [100, 100, 100], // // Scale value"ix": 6 // Property Index. Used for expressions. } }, "ao": 0, // Whether automatic tracking"ip": 0, // start frame"op": 64, // Duration frame length"st": 0, // start time"bm": 0 // mix mode}],"markers": []}Copy the codeParsing JSON
This is a relatively simple JSON, now let’s parse its parameters one by one:
Basic video information
Let’s look at lines 1-10 in json above
"v": "5.6.10".// Use the bodyMovie plugin version
"fr": 32./ / frame rate
"ip": 0.// Start time of composition
"op": 64.// Duration of composition
"w": 750.// Synthesize the width
"h": 1334.// Synthesize height
"nm": "Synthesis 1"./ / synthesis
"ddd": 0.// Whether the layer is 3D
Copy the codeSo let’s look at these parameters in AE
I believe everyone can understand, no nonsense. Now let’s look at what’s inside assets.
assets
Let’s explain what assets are. Assets list all the resources referenced in Layers, including images, precomposition, text, and so on.
Now our assets are relatively simple and just have the configuration information of a picture, so let’s interpret what those properties mean.
Image Configuration information
{
"id": "image_0".// Id of the resource used
"w": 750.// The width of the current image resource
"h": 1334.// The height of the current image resource
"u": "images/".// The current image is exported under bodyMovie
"p": "img_0.jpg".// Current image resource path
"e": 0 // if e=0, use u+p as the image path. If e=1, use p directly.
}
Copy the codeIf we want to replace the relative image address in the template with an online image link, there are two ways.
- Set e to 1, and then change the value of p to the link for the online picture
- Set e to 0 or 1, delete the u attribute, and change the p value to the link to the online image.
Why is that? Let’s take a look at the processing of image resources in Lottie’s source code.
function getAssetsPath(assetData, assetsPath, original_path) {
var path = ' ';
if (assetData.e) { // If e is 1, set the image path to p directly
path = assetData.p;
} else if(assetsPath) { // If unified assetsPath is configured, then set the image path to if unified assetsPath + p
var imagePath = assetData.p;
if (imagePath.indexOf('images/')! = = -1) {
imagePath = imagePath.split('/') [1];
}
path = assetsPath + imagePath;
} else { // If e is not 1 and no uniform assetsPath is set, set the image path to u + p
path = original_path;
path += assetData.u ? assetData.u : ' ';
path += assetData.p;
}
return path;
}
Copy the codelayers
The Layers in JSON represent information for each layer in AFTER Effects. Because we now only have one layer, the Layers array only has one entry.
Image layer configuration information
Since we are using the image layer, let’s look at the image layer configuration information.
As the configuration of KS is a bit long, we will explain it separately later.
{" DDD ": 0, / / whether the 3 d layer" ind ": 1, / / the layer index by" ty ": 2, / / 2 representative image layer" nm ":" img_0. JPG ", / / the source name "cl" : "JPG", / / the suffix "refId" : "Image_0", / / use the id in assets "sr" : 1, / / layer = > = > time scale "ks" : {}, / / transformation "ao" : 0, / / whether the automatic tracking "IP" : 0, / / frame "op" : 64, // Frame duration "st": 0, // start time "bm": 0 // mixed mode}Copy the code- DDD, IND, nm, cl are relatively simple, just look at the comments above.
- Ty 2 means it’s an image layer. Ty also has other values: 0: precomposition, 1: solid layer, 4: Shape layer, 5: Text layer
- Sr is the stretch factor that controls the time scaling of layers. 1 stands for 100%, and the default is 1
\
- Ao automatic tracking, this effect is not used at present, and we will study it again when it is useful
- IP Start frame OP duration
The frame range of the current layer, which happens to start at 0 I, lasted 64 frames
In this case, the IP is 20 frames, and the duration is 44 frames
- The default for BM mixed mode is 0
All bm enumerated values are:
enum BlendModeEnum {
normal, // The normal default value
multiply, // Multiply
screen, / / screen
overlay, / / overlay
darken, / / darker
lighten, / / gets brighter
colorDodge, // The color becomes lighter
colorBurn, // The color is darker
hardLight, / / light
softLight, / / light
difference,/ / difference
exclusion,/ / out
hue, / / hue
saturation, / / saturation
color, / / color
luminosity / / brightness
}
Copy the codeCorresponding to AE:
- Ks transform
ks: {
o: {}, // Opacity
p: {}, / / position
a: {}, / / the anchor
s: {}, // Scale
}
Copy the code\
After setting the corresponding transform parameters, AE will list the values in the layer area
Let’s go through them one by one, looking at the opacity first and comparing the parameters in JSON and AE above.
The opacity
ks: {
"o": { / / transparency
"a": 1.// Whether it is a keyframe
"k": [ // Array if keyframe
{ // The configuration information of the first keyframe position
"i": { "x": [0.833]."y": [0.833]},// The current input value of the Bezier curve, which is written dead in Lottie
"o": { "x": [0.167]."y": [0.167]},// The current output value of the Bezier curve. This is the value written dead in Lottie
"t": 0.// Start time of the current keyframe
"s": [60] // Start opacity
},
{ // The configuration information of the second keyframe
"i": { "x": [0.833]."y": [0.833]},"o": { "x": [0.167]."y": [0.167]},"t": 25."s": [100]},// The configuration information of the third keyframe
{
"i": { "x": [0.833]."y": [0.833]},"o": { "x": [0.167]."y": [0.167]},"t": 30."s": [100]},// The configuration information of the fourth keyframe
{ "t": 50."s": [50]}],"ix": 11 // Property Index. Used for expressions. Expression tags. We haven't figured out how to use this yet}},Copy the codeO has actually four attributes: A, K, x (configuration expression information, because we don’t use it now), ix. Now let’s explain what each property means.
- A: 0 | 1. 0 indicates a non-key frame, and 1 indicates a key frame. If you are not familiar with design, you may not know what keyframes are. So what is a keyframe in AE.
Let’s take a look at the explanation of key frames on Baidu:
The term for computer animation, a frame, is the smallest unit of a single image in an animation, equivalent to each frame on a film. Frames are represented as a grid or marker on the animation software timeline. Keyframes – the equivalent of the original drawing in 2d animation. Refers to the frame in which the key action of a character or object is in motion or change. Animations between key frames can be created by software, called transition frames or intermediate frames.
The simple thing is that if you want a frame to give a particular parameter to the animation, that frame is called a keyframe. So we now have four key frames for opacity in the screen.
- K: Set the value. We already know that we set the opacity to four keyframes, so k is an array with four terms 7, each of which is the value of each keyframe configuration. Let’s look at the value of the first keyframe.
{ // The configuration information of the first keyframe position
"i": { "x": [0.833]."y": [0.833]},// The current input value of the Bezier curve, which is written dead in Lottie
"o": { "x": [0.167]."y": [0.167]},// The current output value of the Bezier curve. This is the value written dead in Lottie
"t": 0.// Start time of the current keyframe
"s": [60] // Start opacity
}
Copy the codeIn AE, we set the opacity of the current keyframe to 60, so in our JSON, S is 60. The reason why it is an array will be known later when we talk about the configuration position information. The frame position of the current keyframe is 0, so t is 0. I and O are inputs and outputs of a Bessel curve, respectively. This parameter seems to be written dead in Lottie. It is not clear what it is for. Let’s see what Lottie means by having these two values.
var easeInBez = BezierFactory.getBezierEasing(0.333.0.833..833..'easeIn').get;
var easeOutBez = BezierFactory.getBezierEasing(0.167.0.167.667..1.'easeOut').get;
var easeInOutBez = BezierFactory.getBezierEasing(33..0.667..1.'easeInOut').get;
Copy the codeSo let’s leave it there, and we know that I and O are the values of Bessel curves.
Now look at the information for the second key frame of opacity.
{ // The configuration information of the second keyframe
"i": { "x": [0.833]."y": [0.833]},"o": { "x": [0.167]."y": [0.167]},"t": 25."s": [100]},Copy the codeI and O are also two sets of Bezier curves, but let’s ignore that. At this time, the frame position of our second key frame is 25, so t is 25, the opacity is 100, so S is [100]. And so on, the third one, the fourth one we won’t talk about.
- Ix: / Property index.used for expressions. Expression tags. We haven’t figured out how to use this yet
location
Now that we’re done with opacity Settings, let’s look at the location Settings.
ks: {
"p": { / / position
"a": 1.// Is a keyframe
"k": [{"i": { "x": 0.833."y": 0.833 }, // The current input value of the Bezier curve, which is written dead in Lottie
"o": { "x": 0.167."y": 0.167 }, // The current output value of the Bezier curve. This is the value written dead in Lottie
"t": 0.// Start time
"s": [- 375..675.0].// The current keyframe position, x-375, y-675, is not 3d layer, z direction is 0
"to": [125.0.0].// In Spatial Tangent. Only for spatial properties. Array of numbers. What the hell is a space tangent in AE
"ti": [- 125..0.0] // Out Spatial Tangent. Only for spatial properties. Array of numbers. I don't know what a space tangent is in AE
},
{
"i": { "x": 0.833."y": 0.833 },
"o": { "x": 0.167."y": 0.167 },
"t": 25."s": [375.675.0]."to": [0.0.0]."ti": [0.0.0] {},"i": { "x": 0.833."y": 0.833 },
"o": { "x": 0.167."y": 0.167 },
"t": 30."s": [375.675.0]."to": [125.167.0.0]."ti": [125.167.0.0] {},"t": 50."s": [1126.675.0]}],"ix": 2 // Property Index. Used for expressions.}},Copy the codeHaving talked about opacity, I believe you already have some understanding of parameter Settings. Like opacity, A sets whether a key frame is present, K sets the value of the current key frame, and ix is the expression flag.
Now let’s look at the parameters of the first keyframe.
{
"i": { "x": 0.833."y": 0.833 }, // The current input value of the Bezier curve, which is written dead in Lottie
"o": { "x": 0.167."y": 0.167 }, // The current output value of the Bezier curve. This is the value written dead in Lottie
"t": 0.// Start time
"s": [- 375..675.0].// The current keyframe position, x-375, y-675, is not 3d layer, z direction is 0
"to": [125.0.0].// In Spatial Tangent. Only for spatial properties. Array of numbers. What the hell is a space tangent in AE
"ti": [- 125..0.0] // Out Spatial Tangent. Only for spatial properties. Array of numbers. I don't know what a space tangent is in AE
},
Copy the codeAgain, I and O are two sets of Bezier curves, so let’s just ignore that.
The keyframe in the first position is 0, so t is 0. The current position is -375 on the X-axis and 667 on the Y-axis, which is not a 3D layer so z is 0. So the value of s is minus 375, 675, 0.
Ti and TO decibels are the values of two sets of tangent lines in space. I don’t know how to use them, so I’ll leave them for now.
The same is true for the second, third and fourth keyframes, so let’s not talk nonsense.
The anchor
Now let’s look at the anchor point. Again, look at the configuration of anchor points in AE.
Before we talk about anchors, let’s talk about what anchors are.
An anchor is a simple way to control where the center of the current layer is located. Look at the picture:
When we drag the image, the image changes the position of the anchor point.
\
We found that we did not keyframe the anchor point, so the anchor point has no keyframe.
Ks: {"a": {// anchor "a": 0, // not keyframe "k": [375, 667, 0], // anchor "ix": 1 // Property Index. Used for expressions.},}Copy the codeYou can see that now a is 0, which means it’s not a keyframe. K is still the information of the current anchor point.
scaling
Ks: {" s ": {/ / scaling" a ": 0, / / not keyframes" k ": [100, 100, 100], / / scaling value" ix ": 6 // Property Index. Used for expressions. } }Copy the codeI don’t have to tell you that the current scale is not a keyframe, x, Y, and Z are all 100%, no scaling.
\
rotating
ks: {
"r": { / / rotation
"a": 0.// Whether it is a key frame, 0 indicates not a key frame
"k": 0.// The rotation Angle is 0
"ix": 10 // Property Index. Used for expressions. Expression mark}}Copy the codeNo keyframe for rotation, rotation Angle 0
conclusion
So far, we have covered all the configuration information of image layers, and hope it will be helpful to you.