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

Lottie animation with coreAnimation renderingEngine don't appear on iOS11, iOS12. #1808

Closed
fangjinfeng opened this issue Nov 11, 2022 · 1 comment
Labels

Comments

@fangjinfeng
Copy link

fangjinfeng commented Nov 11, 2022

Check these before submitting:
[] The issue doesn't involve an Unsupported Feature
[] This issue isn't related to another open issue
This issue is a:
[] Non-Crashing Bug (Visual or otherwise)
Which Version of Lottie are you using?
Lottie 3.5.0

What Platform are you on?
[] iOS
What Language are you in?
[] Swift
Expected Behavior
lottie_ios_expect

Actual Behavior
image

Code Example
lazy var secondAnimationView: LottieAnimationView = {
let config = LottieConfiguration(renderingEngine: .coreAnimation, decodingStrategy: .codable)
let animation = LottieAnimationView(name: "end_point_bg", configuration: config)
animation.loopMode = .loop
animation.backgroundBehavior = .pauseAndRestore
return animation
}()

Animation JSON
{"v":"5.6.10","fr":60,"ip":0,"op":140,"w":1031,"h":172,"nm":"NewUser","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"ShapeLayer 6","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[515,85.844,0],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1016,165],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":40,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":6,"ix":10},"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":8}},"s":{"a":0,"k":[-252.939,-0.045],"ix":4},"e":{"a":0,"k":[323.944,3.109],"ix":5},"t":1,"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"bm":0,"nm":"RectangleStroke1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[2.501,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":70,"op":140,"st":100,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Plan6","tt":1,"sr":1,"ks":{"o":{"a":0,"k":70,"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},"t":70,"s":[515,85.844,0],"to":[45.788,0,0],"ti":[-139.546,0,0]},{"t":140,"s":[1627,85.844,0]}],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2127,180],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":9,"k":{"a":0,"k":[0,0.11,0.831,0.82,0.125,0.416,0.806,0.91,0.25,0.722,0.78,1,0.375,0.861,0.525,0.663,0.499,1,0.271,0.325,0.625,0.861,0.525,0.663,0.75,0.722,0.78,1,0.875,0.416,0.806,0.91,1,0.11,0.831,0.82],"ix":9}},"s":{"a":0,"k":[-1055.69,2.357],"ix":5},"e":{"a":0,"k":[1070.442,4.441],"ix":6},"t":1,"nm":"gradient1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-552.999,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":70,"op":140,"st":100,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"ShapeLayer 8","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[515,85.844,0],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1016,165],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":40,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":9}},"s":{"a":0,"k":[-394.409,1.224],"ix":5},"e":{"a":0,"k":[399.407,-4.418],"ix":6},"t":1,"nm":"GradientFill1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.501,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":70,"op":140,"st":100,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Plan8","tt":1,"sr":1,"ks":{"o":{"a":0,"k":6,"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},"t":70,"s":[515,85.844,0],"to":[185.333,0,0],"ti":[-185.333,0,0]},{"t":140,"s":[1627,85.844,0]}],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2127,180],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":9,"k":{"a":0,"k":[0,0.11,0.831,0.82,0.125,0.416,0.806,0.91,0.25,0.722,0.78,1,0.375,0.861,0.525,0.663,0.5,1,0.271,0.325,0.625,0.861,0.525,0.663,0.75,0.722,0.78,1,0.875,0.416,0.806,0.91,1,0.11,0.831,0.82],"ix":9}},"s":{"a":0,"k":[-1055.69,2.357],"ix":5},"e":{"a":0,"k":[1070.442,4.441],"ix":6},"t":1,"nm":"gradient3","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-552.999,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":70,"op":140,"st":100,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"ShapeLayer 5","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[515,85.844,0],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1016,165],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":40,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":6,"ix":10},"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":8}},"s":{"a":0,"k":[-252.939,-0.045],"ix":4},"e":{"a":0,"k":[323.944,3.109],"ix":5},"t":1,"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"bm":0,"nm":"GradientStroke1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[2.501,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":70,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Plan5","tt":1,"sr":1,"ks":{"o":{"a":0,"k":70,"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},"t":0,"s":[515,85.844,0],"to":[185.333,0,0],"ti":[-185.333,0,0]},{"t":70,"s":[1627,85.844,0]}],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2127,180],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":9,"k":{"a":0,"k":[0,1,0.271,0.325,0.125,0.861,0.525,0.663,0.25,0.722,0.78,1,0.375,0.416,0.806,0.91,0.5,0.11,0.831,0.82,0.625,0.416,0.806,0.91,0.75,0.722,0.78,1,0.875,0.861,0.525,0.663,1,1,0.271,0.325],"ix":9}},"s":{"a":0,"k":[-1055.69,2.357],"ix":5},"e":{"a":0,"k":[1070.442,4.441],"ix":6},"t":1,"nm":"gradient2","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-552.999,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":70,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"ShapeLayer 7","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[515,85.844,0],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[1016,165],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":40,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":9}},"s":{"a":0,"k":[-394.409,1.224],"ix":5},"e":{"a":0,"k":[399.407,-4.418],"ix":6},"t":1,"nm":"GradientFill1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.501,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":70,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Plan7","tt":1,"sr":1,"ks":{"o":{"a":0,"k":6,"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},"t":0,"s":[515,85.844,0],"to":[185.333,0,0],"ti":[-185.333,0,0]},{"t":70,"s":[1627,85.844,0]}],"ix":2},"a":{"a":0,"k":[2.501,605.844,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[2127,180],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"RectangularPath 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":9,"k":{"a":0,"k":[0,1,0.271,0.325,0.125,0.861,0.525,0.663,0.25,0.722,0.78,1,0.375,0.416,0.806,0.91,0.5,0.11,0.831,0.82,0.625,0.416,0.806,0.91,0.75,0.722,0.78,1,0.875,0.861,0.525,0.663,1,1,0.271,0.325],"ix":9}},"s":{"a":0,"k":[-1055.69,2.357],"ix":5},"e":{"a":0,"k":[1070.442,4.441],"ix":6},"t":1,"nm":"gradient4","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-552.999,605.844],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100.877,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":70,"st":0,"bm":0}],"markers":[]}

Problem Code:
image

Fixed Code:
image

@calda
Copy link
Member

calda commented Nov 11, 2022

Good timing! I noticed this problem a couple of days ago and fixed it here: https://github.com/airbnb/lottie-ios/pull/1801/files#diff-a349bd038afce438fb0b070fb8054b858853b0504514df74ff72a6be8f0d6d89R9

Does this work as expected now when using master instead of 3.5.0?

@calda calda closed this as completed Nov 11, 2022
@calda calda added the bug label Nov 11, 2022
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

2 participants