UIview animation misbehaves when image of an unrelated button is changed

Question

On my viewcontroller, I have a button to enable/disable audio using the following action:

func audioControl() {
    playMusic = playMusic ? false : true // toggle
    if (playMusic) {
        startMusic()
        audioBtn.setImage(UIImage(named: "musicOn"),for: .normal)
    }
    else {
        stopMusic()
        audioBtn.setImage(UIImage(named: "musicOff"),for: .normal)
    }
}

The button toggles its image, as expected.

There is also an unrelated UIImageView object on the same VC which is being translated as follows:

UIView.animate(withDuration: 10.0, delay: 0.0, options: [ .curveLinear, .repeat ], animations: {
    self.movingImg.center = CGPoint(x: screenSize.minX, y: screenSize.maxY)
})

This simple animation works fine by itself. However, as soon as the button is tapped, the movingImg object goes outside the boundary of screen and it is no longer visible.

I am not sure why a change of image on a button causes another object animation to misbehave. Any thoughts? I am using Swift 3.

Thank you.

Answer 1

After reading through discussions in a number of SO threads, I found that with the image change (along with any other layout changes), the viewcontroller's viewDidLayoutSubviews() gets called. As such, the followings are two things I did to resolve this issue:

1. Within the audioControl() method, I removed the animation of movingImg (i.e. movingImg.layer.removeAllAnimations()) before updating the button image.
2. I added viewDidLayoutSubviews() to my viewcontroller and started the animation of movingImg there.

Hopefully, this approach helps others too.