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

Question

我希望在viewDidLoad()中让一个标签淡入，然后在计时器达到3后淡出。我不熟悉fadein或fadeout函数。

我该如何实现？

- Ty Victorson

Answer 1

我的建议是利用Swift扩展使代码更加模块化和易于使用。例如，如果您想要让多个标签淡入/淡出或一个标签在多个视图中淡入/淡出，则必须在各处传递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 的任何子视图（例如 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 的子视图。希望这有所帮助。

- Troy Nunnally

---

这应该是正确的答案。非常干净和抽象化。谢谢。 - user3286381

这是解决这个问题的绝佳方案。 - Joe Sene

这看起来很棒！谢谢。顺便说一下，“completion”参数需要一个@escaping闭包。 - adamcee

Answer 2

即使视图已经加载完毕，但在调用viewDidLoad时，该视图可能对用户不可见。这意味着您可能会发现动画似乎已经开始了，但用户并未看到它。为了解决这个问题，您应该在viewDidAppear中启动动画。

至于fadeIn和fadeOut函数 - 它们不存在。您需要自己编写它们。幸运的是，这非常容易做到。类似下面的代码可能已足够。

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

- Andy

Answer 3

针对Swift 3进行更新的答案 - 使用扩展(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)
    }
}

使用方法：

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

- Ed.

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

- Tuan Huynh

---

编辑按钮是有存在的意义的。仅仅为了稍微修改语法而复制粘贴答案是不好的。 - Fogmeister

Answer 5

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

- Ahmed Safadi

Answer 6

Swift 5

我试过这个方法，对我很有效。我把标签放在“cardHeaderView”里面。

@IBOutlet weak var cardHeaderView: UIView!

将此内容放置在“viewDidAppear”内。我选择了0秒的延迟，这样动画就会立即开始。

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)

}

- Bill