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 missing border on iOS Xcode but working perfect on Android. #1535

Closed
fangjinfeng opened this issue Mar 26, 2022 · 1 comment

Comments

@fangjinfeng
Copy link

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.3.0

What Platform are you on?

  • [] iOS

What Language are you in?

  • [] Swift

Expected Behavior

back_address_animation_expect

Actual Behavior

back_address_animation_actual

Code Example

let animation = AnimationView(name: "address_animation")
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":[]}

@calda
Copy link
Member

calda commented Aug 3, 2022

This animation appears to render correctly when I use the new Core Animation rendering engine in 3.4.0+. If you update and enable the new engine, this animation should play as expected.

@calda calda closed this as completed Aug 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants