如何使标签在swift中淡入或淡出

时间:2016-02-13 22:03:31

标签: ios swift fadein fadeout fading

我希望在viewDidLoad()中制作标签淡入,然后在定时器淡出3之后。我不熟悉fadeinfadeout函数。

我将如何做到这一点?

6 个答案:

答案 0 :(得分:19)

我的建议是利用Swift扩展使代码更加模块化和易于使用。例如,如果要在多个视图上制作多个标签fadein / out或一个标签淡入/淡出,则必须在任何地方传递animateWithDuration方法,这可能很麻烦。更清洁的替代方法是创建一个名为UIView.swift的文件(我们的UIView扩展名)。将以下代码添加到此文件中:

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

}

现在你可以为任何UIView的孩子添加fadeIn / fadeout功能(例如,UILabel,UIImage等)。在viewDidLoad()函数内部,您可以添加:

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

现在,您可以将此示例代码用于图像视图,标签,文本视图,滚动视图或UIView的任何子项。我希望这有帮助。

答案 1 :(得分:9)

即使视图已加载,但在调用viewDidLoad时,用户可能无法看到该视图。这意味着当您目击它时,您可能会发现您的动画似乎已经开始。要解决此问题,您需要在viewDidAppear中启动动画。

至于fadeInfadeOut函数 - 它们不存在。你需要自己写。值得庆幸的是,这很容易做到这一点。像下面这样的东西可能已经足够了。

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

答案 2 :(得分:9)

为Swift 3更新了答案 - 使用扩展程序

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

<强>用法:

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

答案 3 :(得分:4)

更新Swift 3.1 - 关于@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 :(得分:0)

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

答案 5 :(得分:0)

快速5

这对我来说很好。我将标签放在“ cardHeaderView”中。

@IBOutlet weak var cardHeaderView: UIView!

将其放置在“ viewDidAppear”中。我的延迟为零,所以动画会立即开始。

fadeViewInThenOut(view: cardHeaderView, delay: 0)

这是功能。

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)

}