Fade UILabel in and out, changing text on screen each time - swift

Question

I am trying to achieve the following effect
I currently have a stack view created as follows
class OnboardingWelcomeMessageStackView: UIStackView {
private lazy var retriggerAnimation = true
let messageHeader: UILabel = {
let label = UILabel()
label.text = OnboardingConstants.chatbotGreeting
label.textColor = .white
label.font = UIFont.boldSystemFont(ofSize: 24)
label.alpha = 0
label.numberOfLines = 0
label.textAlignment = .center
label.sizeToFit()
return label
}()
let messageBody: UILabel = {
let label = UILabel()
label.text = OnboardingConstants.chatbotPurpose
label.textColor = .white
label.font = UIFont.systemFont(ofSize: 16, weight: .medium)
label.alpha = 0
label.numberOfLines = 0
label.textAlignment = .center
label.sizeToFit()
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
setupStackview()
animateOnLoad()
}
required init(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func animateOnLoad() -> Void {
let duration: TimeInterval = 7
UIView.animateKeyframes(withDuration: duration, delay: 0.3, options: .calculationModeLinear, animations: {
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1 / duration, animations: {
self.messageHeader.alpha = 1
})
UIView.addKeyframe(withRelativeStartTime: 3 / duration, relativeDuration: 1 / duration, animations: {
self.messageBody.alpha = 1
})
UIView.addKeyframe(withRelativeStartTime: 6 / duration, relativeDuration: 1 / duration, animations: {
if self.retriggerAnimation {
self.messageHeader.alpha = 0
self.messageBody.alpha = 0
}
})
}) { (_) in
if self.retriggerAnimation {
self.updateLabelText()
self.animateOnLoad()
}
}
}
fileprivate func updateLabelText() -> Void {
retriggerAnimation = false
messageHeader.text = OnboardingConstants.chatbotIntroduction
messageBody.text = OnboardingConstants.chatbotOnboardingWelcome
}
fileprivate func setupStackview() -> Void {
self.addArrangedSubview(messageHeader)
self.addArrangedSubview(messageBody)
}
}
Essentially once the view is added, I call animateOnLoad and then call it again with a property set to prevent it running again.
This feels very hacky and to be honest I do not like this. How can I achieve something like this effect? What is best practice / most effecient way?

Answer 1

The best practice would always be to introudce local reasoning when it comes to such a problem.
So, you can create a custom animation function like this.
private func fade(labels : UILabel..., toAlpha alpha : CGFloat, duration : TimeInterval, completion : ((Bool)->Void)?){
UIView.animate(withDuration: duration, animations: {
labels.forEach({$0.alpha = alpha})
}, completion: completion)
}
then call the function in viewDidAppear like this
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
fade(labels: label1, toAlpha: 1, duration: 1) { (_) in
self.fade(labels: self.label2, toAlpha: 1, duration: 1, completion: { (_) in
self.fade(labels: self.label1, self.label2, toAlpha: 0, duration: 1, completion: { (_) in
self.fade(labels: self.label1, toAlpha: 1, duration: 1, completion: { (_) in
self.fade(labels: self.label2, toAlpha: 1, duration: 1, completion: nil)
})
})
})
}
}
What I have written will perform the same exact fading sequence like what you have provided.
You can choose to write better helper functions to separate the responsibilities.. But you should get the idea
Also, remember to settle the retain cycle problem, using weak or unowned.