如何使标签快速淡入或淡出

Posted 2023-05-08

【中文标题】如何使标签快速淡入或淡出

【英文标题】：How to make a label fade in or out in swift

【发布时间】：2016-05-24 23:24:33

【问题描述】：

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

我该怎么做呢？

【参考方案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 的任何子视图。我希望这有帮助。

【讨论】：

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

这是解决这个问题的绝妙方法。

这看起来很棒！谢谢你。仅供参考，“完成”参数需要 @escaping 闭包。

【参考方案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)
    

【参考方案3】：

为 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()
        )

【参考方案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)
        
    

【讨论】：

编辑按钮的存在是有原因的。复制粘贴答案只是为了稍微修改语法是不好的。

【参考方案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)
    

【参考方案6】：

斯威夫特 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)