Swift中的顺序淡入 [英] Sequential fade in Swift

问题描述

我使用的是很好的答案这里以实现文本标签的淡入.

I'm using the excellent answer here to implement a fade in for a text label.

但是，我想引入一个延迟，以便可以依次淡入多个文本标签.

However, I want to introduce a delay so I can sequentially fade in several text labels.

到目前为止(取自答案)，我正在使用:

So far (taken from the answer), i'm using :

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

然后使用:

override func viewDidLoad() {

        self.line1Outlet.alpha = 0
        self.line1Outlet.fadeIn(completion: {
            (finished: Bool) -> Void in
        })

    }

我当时认为最好的解决方案是将延迟作为扩展中的参数来实现，这样我就可以轻松地为每个标签添加不同的延迟. (例如

I was thinking the best solution would be to implement the delay as a parameter in the extension so I could easily add a different delay to each label. (e.g.

override func viewDidLoad() {

        self.line1Outlet.alpha = 0
        //add a parameter here for the delay (here line 1 gets '1second' then line 2 could come in after 2seconds etc)
        self.line1Outlet.delay = 1second
        self.line1Outlet.fadeIn(completion: {
            (finished: Bool) -> Void in
        })

    }

我尝试将self.delay添加到扩展名(在self.alpha之下)，但这不起作用，我不确定如何重构该扩展名以允许我使用它.

I've tried adding self.delay into the extension (underneath self.alpha) but that doesn't work and I'm not sure how to refactor that extension to allow what I'm after.

然后，对此的答案将是一种可重复使用的实现顺序渐变的方法，该方法有望对许多其他人有用！

The answer to this would then be a reusable method of implementing sequential fades that hopefully would be useful to lots of other people!

推荐答案

在创建的extension中，首先在fadeIn函数的顶部添加self.alpha = 0.0，即

In the extension you created, first add self.alpha = 0.0 at the top in fadeIn function, i.e.

extension UIView {
    func fadeIn(duration: TimeInterval = 1.0, delay: TimeInterval = 0.0, completion: ((Bool)->())? = nil) {
        self.alpha = 0.0
        UIView.animate(withDuration: duration, delay: delay, options: .curveEaseIn, animations: {
            self.alpha = 1.0
        }, completion: completion)
    }
}

现在假设您的view中有3个labels，即

Now lets assume you've 3 labels in your view, i.e.

@IBOutlet weak var label1: UILabel!
@IBOutlet weak var label2: UILabel!
@IBOutlet weak var label3: UILabel!

按如下顺序将animation添加到labels

self.label1.fadeIn(delay: 0.1) { _ in
    self.label2.fadeIn(delay: 0.2, completion: { _ in
        self.label3.fadeIn(delay: 0.3, completion: { _ in
            print("Done All")
        })
    })
}

由于fadeIn方法中的duration parameter具有default value，因此我们可以避免这种情况.

Since the duration parameter in fadeIn method is having a default value, we can avoid that.

您调用fadeIn的方式是一种调用它的方式.由于该方法包含多个default params，因此也可以通过其他方式调用它.

The way you're calling fadeIn is one way of calling it. Since the method contains multiple default params, it can be called in other ways as well.

详细了解 default parameters 此处.

要最初隐藏labels，请在storyboard本身中将所有labels的alpha设置为0.

For hiding the labels initially, set the alpha of all labels as 0 in storyboard itself.

这篇关于Swift中的顺序淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！