I have a score counter in an app I am working on. Rather than just changing the number, I would like the transition to fade the new score in, while the old score scales up and fades out.
The following is as close as I got:
UIView.animateWithDuration(0.6, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
self.scoreOutlet.text = "\(self.numberFormatter.stringFromNumber(self.score)!)"
self.scoreOutlet.transform = CGAffineTransformMakeScale(1.5, 1.5)
self.scoreOutlet.alpha = 0.0
}) { (_) in
UIView.animateWithDuration(0.0, animations: {
self.scoreOutlet.transform = CGAffineTransformMakeScale(1.0, 1.0)
self.scoreOutlet.alpha = 1.0
})
}
I would like these to happen simultaneously. I realize that the closure occurs after the 0.6 seconds of the initial animation, but didn't think nesting animateWithDuration blocks is the cleanest approach here..
Desired Result
If the score changes from 20 to 25: 25 would fade in, but at the same time, 20 is fading out, scaling larger, and slightly moving up (the slightly moving up part isn't in my code attempt above.)
Make 2 labels, 1 for the old score 1 for the new, this way both can be done in 1 animation, and in the completion, set the new score to the oldScoreLabel so the other one is ready when ether you'll update the score.
you should get something like this:
UIView.animateWithDuration(0.6, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
self.scoreOutlet.alpha = 0.0
self.newScoreOutlet.text = "\(self.numberFormatter.stringFromNumber(self.score)!)"
self.newScoreOutlet.transform = CGAffineTransformMakeScale(1.5, 1.5)
self.newScoreOutlet.alpha = 1.0
}) { (_) in
UIView.animateWithDuration(0.0, animations: {
self.newScoreOutlet.transform = CGAffineTransformMakeScale(1.0, 1.0)
self.newScoreOutlet.alpha = 0.0
self.scoreOutlet.alpha = 1.0
self.scoreOutlet.text = self.newScoreOutlet.text
})
}