call stop() to reset animation without reverse animation in visual!

[Calabash-Boy]

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)
• [] Crashing Bug
• [] Feature Request
• [] Regression (Something that once worked, but doesn't work anymore)

Which Version of Lottie are you using?

Lottie 3.1.1

What Platform are you on?

• [] MacOS
• [✅] iOS

What Language are you in?

• [✅] Swift
• [] Objective-C

Expected Behavior

I want to play the animation from 0 to 0.5, then stop it, the animationView should go back to start frame without animation

Actual Behavior

Actually, when i call stop() in the play(fromProgress....), a reverse animation came out, this is weird;

Code Example

var aniView: AnimationView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        aniView = AnimationView(name: "star")
        aniView.frame = CGRect(x: 50, y: 50, width: 100, height: 100)
        aniView.backgroundColor = UIColor.lightGray
        self.view.addSubview(aniView)
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        aniView.play(fromProgress: 0, toProgress: 0.5, loopMode: nil) { (finished) in
            self.aniView.stop()
        }
    }

Animation JSON

{"assets":[],"layers":[{"ddd":0,"ind":0,"ty":4,"nm":"图层1","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.42,"y":1},"o":{"x":0.235,"y":0},"n":"0p42_1_0p235_0","t":0,"s":[89,49,0],"e":[132,252.5,0],"to":[70.5833358764648,-6,0],"ti":[2.83333325386047,-41.4166679382324,0]},{"t":45}]},"a":{"k":[0,0,0]},"s":{"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[0,0,100],"e":[7.7,7.7,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":2,"s":[7.7,7.7,100],"e":[0,0,100]},{"t":45}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"k":[180.734,180.734]},"p":{"k":[0,0]},"r":{"k":0},"nm":"矩形路径 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","fillEnabled":true,"c":{"k":[1,0.79,0.49,1]},"o":{"k":100},"nm":"填充 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[2.01,-6.615],"ix":2},"a":{"k":[1.381,2.297],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":60,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":4,"nm":"图层2","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.42,"y":1},"o":{"x":0.235,"y":0},"n":"0p42_1_0p235_0","t":0,"s":[89,49,0],"e":[16.5,260,0],"to":[-58.5833320617676,-49.8333320617676,0],"ti":[2.5,-187,0]},{"t":45}]},"a":{"k":[0,0,0]},"s":{"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[0,0,100],"e":[12.7,12.7,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":2,"s":[12.7,12.7,100],"e":[0,0,100]},{"t":45}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"k":[180.734,180.734]},"p":{"k":[0,0]},"r":{"k":0},"nm":"矩形路径 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","fillEnabled":true,"c":{"k":[1,0.79,0.49,1]},"o":{"k":100},"nm":"填充 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[2.01,-6.615],"ix":2},"a":{"k":[1.381,2.297],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":60,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"图层3","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.42,"y":1},"o":{"x":0.235,"y":0},"n":"0p42_1_0p235_0","t":0,"s":[89,49,0],"e":[16.5,120.5,0],"to":[-51.5833320617676,-17.0833339691162,0],"ti":[2.20833325386047,-27.2916660308838,0]},{"t":45}]},"a":{"k":[0,0,0]},"s":{"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[0,0,100],"e":[4.7,4.7,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":2,"s":[4.7,4.7,100],"e":[0,0,100]},{"t":45}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"k":[180.734,180.734]},"p":{"k":[0,0]},"r":{"k":0},"nm":"矩形路径 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","fillEnabled":true,"c":{"k":[1,0.79,0.49,1]},"o":{"k":100},"nm":"填充 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[2.01,-6.615],"ix":2},"a":{"k":[1.381,2.297],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":60,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"图层4","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.42,"y":1},"o":{"x":0.235,"y":0},"n":"0p42_1_0p235_0","t":0,"s":[89,49,0],"e":[119,308,0],"to":[63.3333320617676,-1.16666662693024,0],"ti":[8.83333301544189,-119.75,0]},{"t":45}]},"a":{"k":[0,0,0]},"s":{"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[0,0,100],"e":[12.7,12.7,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":2,"s":[12.7,12.7,100],"e":[0,0,100]},{"t":45}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"k":[180.734,180.734]},"p":{"k":[0,0]},"r":{"k":0},"nm":"矩形路径 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","fillEnabled":true,"c":{"k":[1,0.79,0.49,1]},"o":{"k":100},"nm":"填充 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[2.01,-6.615],"ix":2},"a":{"k":[1.381,2.297],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":60,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"图层5","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.42,"y":1},"o":{"x":0.235,"y":0},"n":"0p42_1_0p235_0","t":0,"s":[89,49,0],"e":[54,159,0],"to":[-34.5,-19.5833339691162,0],"ti":[-1.83333337306976,-19,0]},{"t":45}]},"a":{"k":[0,0,0]},"s":{"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[0,0,100],"e":[5.7,5.7,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":2,"s":[5.7,5.7,100],"e":[0,0,100]},{"t":45}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"k":[180.734,180.734]},"p":{"k":[0,0]},"r":{"k":0},"nm":"矩形路径 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","fillEnabled":true,"c":{"k":[1,0.79,0.49,1]},"o":{"k":100},"nm":"填充 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[2.01,-6.615],"ix":2},"a":{"k":[1.381,2.297],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":60,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":4,"nm":"图层6","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.42,"y":1},"o":{"x":0.235,"y":0},"n":"0p42_1_0p235_0","t":0,"s":[89,49,0],"e":[102,184.5,0],"to":[30.25,-21.9166660308838,0],"ti":[15.75,-44.0833320617676,0]},{"t":45}]},"a":{"k":[0,0,0]},"s":{"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[0,0,100],"e":[7.7,7.7,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":2,"s":[7.7,7.7,100],"e":[0,0,100]},{"t":45}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"k":[180.734,180.734]},"p":{"k":[0,0]},"r":{"k":0},"nm":"矩形路径 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","fillEnabled":true,"c":{"k":[1,0.79,0.49,1]},"o":{"k":100},"nm":"填充 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[2.01,-6.615],"ix":2},"a":{"k":[1.381,2.297],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":60,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":6,"ty":4,"nm":"图层7","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.42,"y":1},"o":{"x":0.235,"y":0},"n":"0p42_1_0p235_0","t":0,"s":[89,49,0],"e":[174.5,105.5,0],"to":[26.8333339691162,-22.5833339691162,0],"ti":[-11.1666669845581,-38.9166679382324,0]},{"t":45}]},"a":{"k":[0,0,0]},"s":{"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[0,0,100],"e":[6.7,6.7,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":2,"s":[6.7,6.7,100],"e":[0,0,100]},{"t":45}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"k":[180.734,180.734]},"p":{"k":[0,0]},"r":{"k":0},"nm":"矩形路径 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","fillEnabled":true,"c":{"k":[1,0.79,0.49,1]},"o":{"k":100},"nm":"填充 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[2.01,-6.615],"ix":2},"a":{"k":[1.381,2.297],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":60,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":7,"ty":4,"nm":"图层8","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.42,"y":1},"o":{"x":0.235,"y":0},"n":"0p42_1_0p235_0","t":0,"s":[89,49,0],"e":[25,56.5,0],"to":[2.33333325386047,-22.75,0],"ti":[33.1666679382324,-60.75,0]},{"t":45}]},"a":{"k":[0,0,0]},"s":{"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[0,0,100],"e":[5.7,5.7,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":2,"s":[5.7,5.7,100],"e":[0,0,100]},{"t":45}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"k":[180.734,180.734]},"p":{"k":[0,0]},"r":{"k":0},"nm":"矩形路径 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","fillEnabled":true,"c":{"k":[1,0.79,0.49,1]},"o":{"k":100},"nm":"填充 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[2.01,-6.615],"ix":2},"a":{"k":[1.381,2.297],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"变换"}],"nm":"矩形 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":60,"st":0,"bm":0,"sr":1}],"v":"4.5.3","ddd":0,"ip":0,"op":60,"fr":30,"w":180,"h":400}

[buba447]

Fixed by #974

[ferico55]

@buba447 are you sure? I am testing and still get what described in this issue (reversing to the starting frame)

[buba447]

@ferico55 are you on the latest master? #974 hasnt shipped yet.

[ferico55]

@buba447 Yes I am, I can see changes from #974 there

[muhlenXi]

This problem has not been solved yet, I have reproduced it here.

[7jason]

Can confirm that stopping an animation while its playing does not work properly. The CATransaction completion listener should definitely not be after the CATransaction.commit in that PR, either.

tagging @thedrick .. The PR merged here looks like it made a mistake in it's placement of CATransaction.setCompletionListener (it should be before the CATransactin.commit), additionally, stop() is not working properly, at least in lottie-swift 3.1.5.

Can confirm that Lottie 2.5.3 does not have this problem.