Recently I published a countdown app. At one point of development - I have to show a timer on a UILabel which ticks on each seconds. As usual I started setting text to a label object -
But wait ... it won't take much user attention when timer ticks on every seconds. So I decided to make use of a simple animation while label gets text update. I found there are dozens of ways to animate a label. In this short article, I listed 3 best way you can animate text on a label. (Spoiler Alert 👀- I decided to go with 3rd option)
You might find many more variations of the label animations. Making best choice may be even harder for you. I hope this article will help you to find best suite. Comment down animations you have used or found useful.
self.timerLabel.text = someString
Easy piece of cake right !? But wait ... it won't take much user attention when timer ticks on every seconds. So I decided to make use of a simple animation while label gets text update. I found there are dozens of ways to animate a label. In this short article, I listed 3 best way you can animate text on a label. (Spoiler Alert 👀- I decided to go with 3rd option)
1. Fade In - Fade out animation :
CATransition class has got transition type `fade`. With timing function of CATransition - I was able to see the below result.let animation:CATransition = CATransition()
animation.timingFunction = CAMediaTimingFunction(name:
CAMediaTimingFunctionName.easeInEaseOut)
animation.type = CATransitionType.fade
animation.subtype = CATransitionSubtype.fromTop
self.timerLabel.text = counterString
animation.duration = 0.25
self.timerLabel.layer.add(animation, forKey: CATransitionType.fade.rawValue)
2. Push up text animation :
With same CATransition class, changed transition type `push` from `fade` in the place (1) and (2) given below result.let animation:CATransition = CATransition()
animation.timingFunction = CAMediaTimingFunction(name:
CAMediaTimingFunctionName.easeInEaseOut)
animation.type = CATransitionType.push //1.
self.timerLabel.text = counterString
animation.duration = 0.25
self.timerLabel.layer.add(animation, forKey: CATransitionType.push.rawValue)//2.
3. Transform with scale :
Initialise label transition (CGAffineTransform class) property scale with 1.25x gives growing effect. Post updating text, reclaim the original scale of label. You can see the final result as below -UIView.animate(withDuration: 0.2, animations: { () -> Void in
self.timerLabel.transform = .init(scaleX: 1.25, y: 1.25)
}) { (finished: Bool) -> Void in
self.timerLabel.text = counterString
UIView.animate(withDuration: 0.25, animations: { () -> Void in
self.timerLabel.transform = .identity
})
}
You might find many more variations of the label animations. Making best choice may be even harder for you. I hope this article will help you to find best suite. Comment down animations you have used or found useful.