lottie-js
lottie-js copied to clipboard
Unable to obtain the final position of the Layer's position.
I am using the Animation.fromURL method in lottie-js to parse Lottie JSON files. The animation is a simple position transformation with four keyframes. The first three keyframes contain 's' and 'e' fields, which represent the start and end positions. The last keyframe only has the 't' field because this last keyframe is often used to represent the animation's stop. The final position would be the "e" value in the last keyframe where "s" was defined, in the third keyframe specifically. In the code below, I expect the generated position to have four positions with different 'y' – [170, 130, 130, 90], but I only got the first three. Why didn't I get the last "e" value?
Please read first layers
{ "v": "5.10.0", "fr": 25, "ip": 0, "op": 257, "w": 1001, "h": 1334, "nm": "test", "ddd": 0, "assets": [ { "id": "image_0", "w": 448, "h": 141, "u": "images/", "p": "img_0.png", "e": 0 }, { "id": "image_1", "w": 1026, "h": 1334, "u": "images/", "p": "img_1.png", "e": 0 } ], "layers": [ { "ddd": 0, "ind": 1, "ty": 2, "nm": "first.png", "cl": "png", "refId": "image_0", "sr": 1, "ks": { "o": { "a": 1, "k": [ { "i": { "x": [ 0.2 ], "y": [ 0.97 ] }, "o": { "x": [ 0.38 ], "y": [ 0.05 ] }, "t": 15, "s": [ 0 ], "e": [ 100 ] }, { "i": { "x": [ 0.833 ], "y": [ 1 ] }, "o": { "x": [ 0.38 ], "y": [ 0 ] }, "t": 27, "s": [ 100 ], "e": [ 100 ] }, { "i": { "x": [ 0.833 ], "y": [ 1 ] }, "o": { "x": [ 0.167 ], "y": [ 0 ] }, "t": 82, "s": [ 100 ], "e": [ 0 ] }, { "t": 92 } ], "ix": 11 }, "r": { "a": 0, "k": 0, "ix": 10 }, "p": { "a": 1, "k": [ { "i": { "x": 0.2, "y": 0.97 }, "o": { "x": 0.38, "y": 0.05 }, "t": 15, "s": [ 346.352, 170.508, 0 ], "e": [ 346.352, 130.508, 0 ], "to": [ 0, -6.667, 0 ], "ti": [ 0, 6.667, 0 ] }, { "i": { "x": 0.2, "y": 0.2 }, "o": { "x": 0.38, "y": 0.38 }, "t": 30, "s": [ 346.352, 130.508, 0 ], "e": [ 346.352, 130.508, 0 ], "to": [ 0, 0, 0 ], "ti": [ 0, 0, 0 ] }, { "i": { "x": 0.2, "y": 0.98 }, "o": { "x": 0.38, "y": 0 }, "t": 82, "s": [ 346.352, 130.508, 0 ], "e": [ 346.352, 90.508, 0 ], "to": [ 0, -6.667, 0 ], "ti": [ 0, 6.667, 0 ] }, { "t": 92 } ], "ix": 2, "l": 2 }, "a": { "a": 0, "k": [ 119.352, 31.008, 0 ], "ix": 1, "l": 2 }, "s": { "a": 0, "k": [ 100, 100, 100 ], "ix": 6, "l": 2 } }, "ao": 0, "hasMask": true, "masksProperties": [ { "inv": false, "mode": "a", "pt": { "a": 0, "k": { "i": [ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ], "o": [ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ], "v": [ [ 239.703, -0.5 ], [ -1, -0.5 ], [ -1, 62.516 ], [ 239.703, 62.516 ] ], "c": true }, "ix": 1 }, "o": { "a": 0, "k": 100, "ix": 3 }, "x": { "a": 0, "k": 0, "ix": 4 }, "nm": "mask 1" } ], "ip": 15, "op": 375, "st": 15, "bm": 0 }, { "ddd": 0, "ind": 2, "ty": 2, "nm": "first.png", "cl": "png", "refId": "image_0", "sr": 1, "ks": { "o": { "a": 1, "k": [ { "i": { "x": [ 0.2 ], "y": [ 0.97 ] }, "o": { "x": [ 0.38 ], "y": [ 0.05 ] }, "t": 17, "s": [ 0 ], "e": [ 100 ] }, { "i": { "x": [ 0.833 ], "y": [ 1 ] }, "o": { "x": [ 0.167 ], "y": [ 0 ] }, "t": 29, "s": [ 100 ], "e": [ 100 ] }, { "i": { "x": [ 0.833 ], "y": [ 1 ] }, "o": { "x": [ 0.167 ], "y": [ 0 ] }, "t": 84, "s": [ 100 ], "e": [ 0 ] }, { "t": 94 } ], "ix": 11 }, "r": { "a": 0, "k": 0, "ix": 10 }, "p": { "a": 1, "k": [ { "i": { "x": 0.2, "y": 0.97 }, "o": { "x": 0.38, "y": 0.05 }, "t": 17, "s": [ 450.203, 237.508, 0 ], "e": [ 450.203, 197.508, 0 ], "to": [ 0, -6.667, 0 ], "ti": [ 0, 6.667, 0 ] }, { "i": { "x": 0.2, "y": 0.2 }, "o": { "x": 0.167, "y": 0.167 }, "t": 32, "s": [ 450.203, 197.508, 0 ], "e": [ 450.203, 197.508, 0 ], "to": [ 0, 0, 0 ], "ti": [ 0, 0, 0 ] }, { "i": { "x": 0.2, "y": 0.98 }, "o": { "x": 0.167, "y": 0 }, "t": 84, "s": [ 450.203, 197.508, 0 ], "e": [ 450.203, 157.508, 0 ], "to": [ 0, -6.667, 0 ], "ti": [ 0, 6.667, 0 ] }, { "t": 94 } ], "ix": 2, "l": 2 }, "a": { "a": 0, "k": [ 223.203, 98.008, 0 ], "ix": 1, "l": 2 }, "s": { "a": 0, "k": [ 100, 100, 100 ], "ix": 6, "l": 2 } }, "ao": 0, "hasMask": true, "masksProperties": [ { "inv": false, "mode": "a", "pt": { "a": 0, "k": { "i": [ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ], "o": [ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ], "v": [ [ 447.406, 133.5 ], [ -1.297, 133.5 ], [ -1, 62.516 ], [ 447.703, 62.516 ] ], "c": true }, "ix": 1 }, "o": { "a": 0, "k": 100, "ix": 3 }, "x": { "a": 0, "k": 0, "ix": 4 }, "nm": "mask 1" } ], "ip": 15, "op": 375, "st": 15, "bm": 0 }, { "ddd": 0, "ind": 3, "ty": 2, "nm": "bg.png", "cl": "png", "refId": "image_1", "sr": 1, "ks": { "o": { "a": 0, "k": 100, "ix": 11 }, "r": { "a": 0, "k": 0, "ix": 10 }, "p": { "a": 0, "k": [ 500.5, 667, 0 ], "ix": 2, "l": 2 }, "a": { "a": 0, "k": [ 513, 667, 0 ], "ix": 1, "l": 2 }, "s": { "a": 0, "k": [ 100, 100, 100 ], "ix": 6, "l": 2 } }, "ao": 0, "ip": 0, "op": 375, "st": 0, "bm": 0 } ], "markers": [ { "tm": 15, "cm": "1", "dr": 0 }, { "tm": 136, "cm": "3", "dr": 0 }, { "tm": 241, "cm": "2", "dr": 0 }, { "tm": 256, "cm": "", "dr": 0 } ] }
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.