We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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 } ] }
{ "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 } ] }
The text was updated successfully, but these errors were encountered:
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.
Sorry, something went wrong.
No branches or pull requests
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 } ] }
The text was updated successfully, but these errors were encountered: