Lottie-ios: Reverse animation is broken in lottie 2.1.3

[jeawang]

This issue is a regression

What Platform are you on?

• iOS 10.2

Expected Behavior

Setting the speed to a negative value should reverse an animation

Actual Behavior

animation does not play in reverse (animation does not play at all)

Code Example

circleContainer.pause()
let currentProgress = circleContainer.animationProgress
circleContainer.animationSpeed = -1.0
circleContainer.animationProgress = currentProgress
circleContainer.play(fromProgress: 0, toProgress: currentProgress, withCompletion: nil)

Animation JSON

{"v":"4.10.1","fr":29.9700012207031,"ip":0,"op":43.0000017514259,"w":168,"h":168,"nm":"Progress","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 10","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[100],"e":[1]},{"t":6.00000024438501}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[84,84,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-16.5,-18],[-16.5,17.75],[17.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,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":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":51.0000020772726,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 9","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[84.75,82,0],"ix":2},"a":{"a":0,"k":[-85,53.5,0],"ix":1},"s":{"a":0,"k":[105,105,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[151.27,151.27],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1.2,"ix":5},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-85.781,55.476],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[101.17,101.17],"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":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"n":["0p833_0p833_0p333_0"],"t":10,"s":[0],"e":[100]},{"t":31.0000012626559}],"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":10.0000004073083,"op":31.0000012626559,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[38]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":10,"s":[38],"e":[38]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":37,"s":[38],"e":[1]},{"t":43.0000017514259}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[84.75,82,0],"ix":2},"a":{"a":0,"k":[-85,53.5,0],"ix":1},"s":{"a":0,"k":[105,105,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[151.27,151.27],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1.2,"ix":5},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-85.781,55.476],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[101.17,101.17],"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":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":51.0000020772726,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[84.75,82,0],"ix":2},"a":{"a":0,"k":[-85,53.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ef":[{"ty":26,"nm":"Radial Wipe","np":7,"mn":"ADBE Radial Wipe","ix":1,"en":1,"ef":[{"ty":0,"nm":"Transition Completion","mn":"ADBE Radial Wipe-0001","ix":1,"v":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":56,"s":[0],"e":[8]},{"t":60.0000024438501}],"ix":1}},{"ty":0,"nm":"Start Angle","mn":"ADBE Radial Wipe-0002","ix":2,"v":{"a":0,"k":0,"ix":2}},{"ty":3,"nm":"Wipe Center","mn":"ADBE Radial Wipe-0003","ix":3,"v":{"a":0,"k":[46.368,97.349],"ix":3}},{"ty":7,"nm":"Wipe","mn":"ADBE Radial Wipe-0004","ix":4,"v":{"a":0,"k":2,"ix":4}},{"ty":0,"nm":"Feather","mn":"ADBE Radial Wipe-0005","ix":5,"v":{"a":0,"k":0,"ix":5}}]}],"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[151.27,151.27],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-85.781,55.476],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[101.17,101.17],"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":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":51.0000020772726,"st":0,"bm":0}]}

Info

I see there's a pr out for fixing this https://github.com/airbnb/lottie-ios/pull/385, though I don't think this pr fixes the issue entirely. The pr needs to deal with adding the time offset to the animation begintime when the animation is playing in reverse. I don't think that's the only issue either since with those changes, I am seeing the animation flash the initial frame on reverse.
I was unable to push my own branch, since I didn't have permissions.

[buba447]

Instead of setting speed to -1 you can call
circleContainer.play(fromProgress: currentProgress, toProgress: 0, withCompletion: nil)

[jeawang]

that seems to work :)
the negative animationSpeed should still get fixed though since it's documented as being able to reverse an animation "/// Sets the speed of the animation. Accepts a negative value for reversing animation."

[buba447]

Negative speeds do work, set loop to true and watch them play backwards!
Theres some strange edge cases with combinations of negative speed and manually setting animationProgress to the last frame. Still thinking that one over.

[blackm00n]

Please check/review #424

[buba447]

Should be fixed on master! Dot release coming soon!

[brunomunizaf]

Sorry for extending this issue but it seems that the frame rate changes although the speed/progress/duration is correct. I'm facing this issue on iOS 10.2 - iPad 2 Air Simulator, i will check on a real device as soon as i have one which might be in the next few days. My workaround was to set speed for ~0.3 when reversing the progress but i don't know why it's happening.

[blackm00n]

@brunomunizaf make sure you are on latest master as #424 is not included in latest tag 2.1.3