Skip to content
New issue

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

Unable to obtain the final position of the Layer's position. #37

Open
chenshuang02 opened this issue Oct 23, 2023 · 1 comment
Open
Labels

Comments

@chenshuang02
Copy link

chenshuang02 commented Oct 23, 2023

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 } ] }

Copy link

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.

@github-actions github-actions bot added the stale label Dec 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant