Repeat Fade In / Fade Out Between Two Different Texts On Same UILabel

Question

I've been searching online for an answer to my question but there doesn't seem to be any solutions. I have a UILabel which contains two interchangeable icons (from FontAwesome). I would like to create an animation where it changes the UILabels text from one to the other repeatedly.

What I have so far is an animation which calls itself again and again. It seemed to look fine on the simulator but when I ran it on the phone it didn't work how I wanted it to. I seem to almost be there but my code creates some sort of flash when it fades out

func animateLabel() {
    self.runningPersonLabel.text = self.runningPersonLabel.text == "ICON 1" ? "ICON 2" : "ICON 1"
    self.runningPersonLabel.sizeToFit()
    self.runningPersonLabel.center = modalContainer.boundsCenter
    self.runningPersonLabel.frameTop = titleLabel.frameBottom + 40

    UIView.animate(withDuration: 2, delay: 0, options: [.autoreverse], animations: {
        self.runningPersonLabel.alpha = 1.0
    }, completion: { finished in
        self.runningPersonLabel.alpha = 0.0
        self.animateLabel()
    })
}

Answer 1

Try with this class:

import UIKit

@IBDesignable class FadingLabel: UILabel
{
    // The secondary text
    @IBInspectable var secondaryText:String?
    var primaryText:String?

    // Animation time, is divided by 2
    @IBInspectable var animationTime:TimeInterval = 1

    // Set this flag to true to stop animation
    var stop = true

    // Start the animation
    func startAnimating()
    {
        stop = false
        if primaryText == nil
        {
            primaryText = self.text
        }

        fadeAnim()
    }

    // Stop the animation
    func stopAnimating(_ sender: UIButton)
    {
        stop = true
    }

    @objc private func fadeAnim()
    {
        if stop
        {
            return
        }

        // Fade out
        UIView.animate(withDuration: animationTime / 2, animations: {
            self.alpha = 0
        }) { (complete) in
            UIView.animate(withDuration: self.animationTime / 2, animations: {
                if self.text == self.primaryText
                {
                    self.text = self.secondaryText
                }
                else
                {
                    self.text = self.primaryText
                }

                self.alpha = 1

            }, completion: { (complete2) in
                self.fadeAnim()
            })
        }
    }
}

Usage:

• put a label in your view controller;
• set the label class to FadingLabel;
• set the secondary text and the animation time in the storyboard inspector
• call the methods startAnimating or stopAnimating as needed.