UIView Animation Chaining Doesn't Work Properly

Question

I am trying to animate a simple Loading label text to show 3 dots after it, with each dot having a second of delay.

Here is what i tried:

func animateLoading() {

    UIView.animate(withDuration: 1, animations: {self.yukleniyorLabel.text = "Yükleniyor."}, completion: { _ in
         UIView.animate(withDuration: 1, animations: {self.yukleniyorLabel.text = "Yükleniyor.."}, completion: { _ in
           UIView.animate(withDuration: 1, animations: {self.yukleniyorLabel.text = "Yükleniyor..."})
        })
    })
}

But what i got is the all 3 dots appear in 1 second alltogether. Not in order. See here: https://streamable.com/yiz6s

What am i doing wrong with the chaining? Thanks in advance.

Answer 1

UIView animate is only for animatable view properties such as frame and background color. self.yukleniyorLabel.text is not an animatable property. So you get no animation.

Just use a Timer or delayed performance to change the text at time intervals.

Answer 2

You can use the scheduled Timer for showing text with three dots on the label with animation: ->

var i = 0
var timer : Timer?

loaderLabel.text = "Loading"
timer =  Timer.scheduledTimer(timeInterval: 0.2, target: self, selector:#selector(ViewController.setText), userInfo: nil, repeats: true)


@objc func setText() {
    loaderLabel.text = loaderLabel.text! + "."
    i += 1
    if i >= 3 {
        timer?.invalidate()
    }
}

output with animation: -> Loading...