顺序淡入 Swift
Sequential fade in Swift
我正在使用出色的答案 来实现文本标签的淡入效果。
但是,我想引入一个延迟,这样我就可以依次淡入多个文本标签。
到目前为止(取自答案),我正在使用:
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
})
}
我认为最好的解决方案是在扩展中将延迟实现为参数,这样我就可以轻松地为每个标签添加不同的延迟。 (例如
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 下方),但这不起作用,我不确定如何重构该扩展以实现我想要的.
这个问题的答案将是一种可重复使用的实现顺序淡入淡出的方法,希望对很多其他人有用!
在您创建的extension
中,首先在fadeIn
函数的顶部添加self.alpha = 0.0
,即
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
,即
@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
,我们可以避免这种情况。
您的调用方式 fadeIn
是一种调用方式。由于该方法包含多个default params
,因此也可以通过其他方式调用。
详细了解 default parameters
here。
编辑:
为了最初隐藏 labels
,将所有 labels
的 alpha
设置为 storyboard
本身的 0
。
我正在使用出色的答案
但是,我想引入一个延迟,这样我就可以依次淡入多个文本标签。
到目前为止(取自答案),我正在使用:
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
})
}
我认为最好的解决方案是在扩展中将延迟实现为参数,这样我就可以轻松地为每个标签添加不同的延迟。 (例如
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 下方),但这不起作用,我不确定如何重构该扩展以实现我想要的.
这个问题的答案将是一种可重复使用的实现顺序淡入淡出的方法,希望对很多其他人有用!
在您创建的extension
中,首先在fadeIn
函数的顶部添加self.alpha = 0.0
,即
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
,即
@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
,我们可以避免这种情况。
您的调用方式 fadeIn
是一种调用方式。由于该方法包含多个default params
,因此也可以通过其他方式调用。
详细了解 default parameters
here。
编辑:
为了最初隐藏 labels
,将所有 labels
的 alpha
设置为 storyboard
本身的 0
。