Skip to content

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

Closed
@fangjinfeng

Description

@fangjinfeng

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

Activity

calda

calda commented on Nov 11, 2022

@calda
Member

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @calda@fangjinfeng

        Issue actions

          Lottie animation with coreAnimation renderingEngine don't appear on iOS11, iOS12. · Issue #1808 · airbnb/lottie-ios