【问题标题】:How to make a label fade in or out in swift如何使标签快速淡入或淡出
【发布时间】:2016-05-24 23:24:33
【问题描述】:

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

我该怎么做呢?

【问题讨论】:

    标签: ios swift fadein fadeout fading


    【解决方案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 中开始您的动画。

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

    【讨论】:

      【解决方案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)
          
          }
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-10-26
            • 2015-12-04
            • 2013-10-05
            • 2015-06-01
            相关资源
            最近更新 更多