button.setTitle blanks out image view - ios

Question

Can anyone tell me why setting the button.setTitle(string, forState) function blanks out the UIImage?
If I comment out both lines that use the button.setTitle, the animation runs fine. When the lines are there, the animation disappears when I press the button.
The var cryButton: UIButton and the function UpdateImage refer to the same button, but I tried adding a second button and referencing the title in that, and it had the same effect. It blanks out the image.
I'm stumped :)
import UIKit
class ViewController: UIViewController {
var counter = 1
var numImages = 8
var toggle = true
var timer = NSTimer()
#IBOutlet weak var babyImage: UIImageView!
#IBOutlet weak var cryButton: UIButton!
#IBAction func UpdateImage(sender: AnyObject) {
if toggle == true {
timer = NSTimer.scheduledTimerWithTimeInterval(0.2, target: self, selector: Selector("doanimation"), userInfo: nil, repeats: true)
cryButton.setTitle("Stop crying", forState: UIControlState.Normal)
toggle = false
} else {
timer.invalidate()
babyImage.image = UIImage(named: "WaWa1.png")
cryButton.setTitle("Wa-Waaaaa!", forState: UIControlState.Normal)
toggle = true
}
}
func doanimation() {
babyImage.image = UIImage(named: "WaWa\(counter).png")
if (counter == (numImages)) {
counter = 1
} else {
++counter
}
}
override func viewDidLayoutSubviews() {
babyImage.center = CGPointMake(babyImage.center.x - 400, babyImage.center.y)
}
override func viewDidAppear(animated: Bool) {
UIView.animateWithDuration(2, animations: { () -> Void in
self.babyImage.center = CGPointMake(self.babyImage.center.x + 400, self.babyImage.center.y)
})
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

Answer 1

I finally find the problem. It is not caused by the timer, the timer is totally fine. the problem is caused by viewDidLayoutSubviews being called when you set the button title. You are using auto layout, and you are using the intrinsic content size for the button, right? And since the two title has different length so when you set the title, the button's frame will be changed, hence it will be layout again and then viewDidLayoutSubviews will be called. And you set the center value of the imageView inside viewDidLayoutSubviews, so basically when you set the title the image will move 400 points left to its original spot which I guess is out of the screen. Please note: if the image has different size, when you call imageView.image = UIImage(named: "image.png") will also call viewDidLayoutSubviews. I think all the images you are using has same size, thats why when the timer runs viewDidLayoutSubviews was not called. Here is a good answer which explains when does viewDidLayoutSubviews get called. I will let yourself to figure out the proper solution, OK? :)

Answer 2

Actually there is a better way to animate a UIImageView with an array of images, you could probably try this and remove the timer.
babyImage.animationImages = #[image1,image2,image3,image4,image5,image6,image7,image8]
babyImage.animationDuration = 1.6
// There are 8 images, so each image occupies 1.6 / 8 = 0.2 secs
babyImage.startAnimating()
// Use babyImage.stopAnimating() to stop the animation