web-dev-qa-db-fra.com

Comment faire un fondu entrant ou sortant d'une étiquette swift

Je cherche à faire un fondu d'étiquette, dans viewDidLoad(), puis après un minuteur à 3 fondus. Je ne connais pas les fonctions fadein ou fadeout.

Comment pourrais-je procéder?

iosswiftfadeinfadeoutfading
12
Ty Victorson

Même si la vue est chargée, elle peut ne pas être visible par l'utilisateur lorsque viewDidLoad est appelé. Cela signifie que vous pourriez trouver que vos animations semblent avoir déjà commencé lorsque vous en êtes témoin. Pour résoudre ce problème, vous souhaiterez plutôt démarrer votre animation dans viewDidAppear.

Quant aux fonctions fadeIn et fadeOut - elles n'existent pas. Vous devrez les écrire vous-même. Heureusement, c'est très facile à faire. Quelque chose comme ci-dessous pourrait être suffisant.

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)
    }
}
9
Andy

Ma suggestion est de tirer parti des extensions Swift pour rendre le code un peu plus modulaire et facile à utiliser. Par exemple, si vous voulez faire fondre/sortir plusieurs étiquettes ou une étiquette pour entrer/sortir en fondu) sur plusieurs vues, vous devrez passer les méthodes animateWithDuration partout, ce qui peut être un problème. Une alternative plus propre consiste à créer un fichier appelé UIView.Swift (notre extension UIView). Ajoutez le code suivant à ce fichier:

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)
}

}

Vous pouvez maintenant ajouter la fonctionnalité fadeIn/fadeout à n'importe quel enfant d'UIView (par exemple, UILabel, UIImage, etc.). À l'intérieur de votre fonction viewDidLoad (), vous pouvez ajouter:

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

Maintenant, vous pouvez utiliser cet exemple de code pour les vues d'image, les étiquettes, les vues de texte, les vues de défilement ou tout enfant d'UIView. J'espère que ça aide.

22
Troy Nunnally

Réponse mise à jour pour Swift 3 - Utilisation de l'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)
    }
}

tilisation:

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

Mettre à jour Swift 3.1 - sur le code @Andy

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)
        }
    }
4
Tuan Huynh

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)
    }
}
1
Ahmed Safadi

Swift 5

Cela a bien fonctionné pour moi. J'ai placé l'étiquette à l'intérieur du "cardHeaderView".

@IBOutlet weak var cardHeaderView: UIView!

Placez-le dans le "viewDidAppear". J'y suis allé avec un retard de zéro pour que l'animation commence tout de suite.

fadeViewInThenOut(view: cardHeaderView, delay: 0)

Voici la fonction.

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)

}
1
Bill