How to make a label fade in or out in swift

Question

I am looking to make a label fade in, in viewDidLoad(), and then after a timer is at 3 fade out. I am not familiar with the fadein or fadeout functions.

How would I go about doing this?

Answer 1

Even though the view has loaded, it may not be visible to the user when viewDidLoad is called. This means you might find your animations appears to have already started when you witness it. To overcome this issue, you'll want to start your animation in viewDidAppear instead.

As for the fadeIn and fadeOut functions - they don't exist. You'll need to write them yourself. Thankfully, it's very easy to do this. Something like the below might be good enough.

func fadeViewInThenOut(view : UIView, delay: NSTimeInterval) {

    let animationDuration = 0.25

    // Fade in the view
    UIView.animateWithDuration(animationDuration, animations: { () -> Void in
        view.alpha = 1
        }) { (Bool) -> Void in

            // After the animation completes, fade out the view after a delay

            UIView.animateWithDuration(animationDuration, delay: delay, options: .CurveEaseInOut, animations: { () -> Void in
                view.alpha = 0
                },
                completion: nil)
    }
}

Answer 2

SWIFT 4.2

extension UIView {
    func fadeIn(duration: TimeInterval = 1.0, delay: TimeInterval = 0.0, completion: @escaping ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
        UIView.animate(withDuration: duration, delay: delay, options: .curveEaseIn, animations: {
            self.alpha = 1.0
        }, completion: completion)
    }

    func fadeOut(duration: TimeInterval = 1.0, delay: TimeInterval = 3.0, completion: @escaping (Bool) -> Void = {(finished: Bool) -> Void in}) {
        UIView.animate(withDuration: duration, delay: delay, options: .curveEaseIn, animations: {
            self.alpha = 0.0
        }, completion: completion)
    }
}

Answer 3

Answer updated for Swift 3 - Using extension

extension UIView {
    func fadeIn(duration: TimeInterval = 1.0, delay: TimeInterval = 0.0, completion: @escaping ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
        UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
            self.alpha = 1.0
        }, completion: completion)
    }

    func fadeOut(duration: TimeInterval = 1.0, delay: TimeInterval = 3.0, completion: @escaping (Bool) -> Void = {(finished: Bool) -> Void in}) {
        UIView.animate(withDuration: duration, delay: delay, options: UIViewAnimationOptions.curveEaseIn, animations: {
            self.alpha = 0.0
        }, completion: completion)
    }
}

Usage:

self.statusLabel.alpha = 0
self.statusLabel.text = "Sample Text Here"
self.myLabel.fadeIn(completion: {
        (finished: Bool) -> Void in
        self.myLabel.fadeOut()
        })

Answer 4

My suggestion is to leverage Swift extensions to make the code a bit more modular and easy to use. For example, if you want to make multiple labels fadein/out or one label to fade in/out on multiple views, you would have to pass the animateWithDuration methods everywhere, which can be a hassle. A cleaner alternative is to create a file called UIView.swift (our UIView extension). Add the following code to this file:

import Foundation

extension UIView {


func fadeIn(duration: NSTimeInterval = 1.0, delay: NSTimeInterval = 0.0, completion: ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
    UIView.animateWithDuration(duration, delay: delay, options: UIViewAnimationOptions.CurveEaseIn, animations: {
        self.alpha = 1.0
        }, completion: completion)  }

func fadeOut(duration: NSTimeInterval = 1.0, delay: NSTimeInterval = 3.0, completion: (Bool) -> Void = {(finished: Bool) -> Void in}) {
    UIView.animateWithDuration(duration, delay: delay, options: UIViewAnimationOptions.CurveEaseIn, animations: {
        self.alpha = 0.0
        }, completion: completion)
}

}

Now you can add fadeIn/fadeout functionality to any child of UIView (e.g., UILabel, UIImage, etc). Inside of your viewDidLoad() function, you can add :

self.statusLabel.alpha = 0
self.statusLabel.text = "Sample Text Here"
self.myLabel.fadeIn(completion: {
        (finished: Bool) -> Void in
        self.myLabel.fadeOut()
        })

Now, you can use this sample code for Image views, labels, text views, scroll views, or any child of UIView as well. I hope this helps.

Answer 5

Swift 5

This worked well for me. I placed the label inside the "cardHeaderView".

@IBOutlet weak var cardHeaderView: UIView!

Place this inside the "viewDidAppear". I went with a delay of zero so the animation would start right away.

fadeViewInThenOut(view: cardHeaderView, delay: 0)

Here is the function.

func fadeViewInThenOut(view : UIView, delay: TimeInterval) {

    let animationDuration = 1.5

    UIView.animate(withDuration: animationDuration, delay: delay, options: [UIView.AnimationOptions.autoreverse, UIView.AnimationOptions.repeat], animations: {
        view.alpha = 0
    }, completion: nil)

}

Answer 6

Update Swift 3.1 - on @Andy code

func fadeViewInThenOut(view : UIView, delay: TimeInterval) {
        let animationDuration = 0.25

        // Fade in the view
        UIView.animate(withDuration: animationDuration, animations: { () -> Void in
            view.alpha = 1
        }) { (Bool) -> Void in

            // After the animation completes, fade out the view after a delay

            UIView.animate(withDuration: animationDuration, delay: delay, options: [.curveEaseOut], animations: { () -> Void in
                view.alpha = 0
            }, completion: nil)
        }
    }