从视图中触发淡入淡出标签延迟确实加载而不是在上一个淡入淡出结束时
Trigger fading label delay from view did load instead of at the end of previous fade
背景
感谢出色的回答 ,我设法让一系列标签按顺序淡入淡出。
但是,扩展中函数中提到的延迟仅在前一个淡入淡出完成(我认为)时触发,因此它们之间至少有 1 秒。理想情况下,我想编辑模型,以便延迟是指从视图加载开始的时间,而不是前一个完成的时间。
即如果我将延迟设置得非常小,第二个会在第一个结束之前开始淡入。
这是分机:
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)
}
}
这是我在带有 6 个标签的 VC 上的实现:
func animateLabels() {
self.titleOutlet.alpha = 0.0
self.line1Outlet.alpha = 0.0
self.line2Outlet.alpha = 0.0
self.line3Outlet.alpha = 0.0
self.line4Outlet.alpha = 0.0
self.line5Outlet.alpha = 0.0
self.line6Outlet.alpha = 0.0
self.titleOutlet.fadeIn(delay: 0.2, completion: { _ in
self.line1Outlet.fadeIn(delay: 0.4, completion: { _ in
self.line2Outlet.fadeIn(delay: 0.6, completion: { _ in
self.line3Outlet.fadeIn(delay: 0.8, completion: { _ in
self.line4Outlet.fadeIn(delay: 1.0, completion: { _ in
self.line5Outlet.fadeIn(delay: 1.2, completion: { _ in
self.line6Outlet.fadeIn(delay: 1.4, completion: { _ in
})})})})})})})
}
我想达到什么目的?
所以我想要做的是让 line2outlet 在页面加载后 0.4 秒开始淡出,但它仅在 line1 完成淡入时才开始(这需要 1 秒并延迟 0.2 秒).
我尝试了什么?
读完后,我尝试编写自己的延迟函数。我尝试将其添加到扩展名中:
func delay(interval: TimeInterval, closure: @escaping () -> Void) {
DispatchQueue.main.asyncAfter(deadline: .now() + interval) {
closure()
}
}
并像这样实施:
self.line1Outlet.fadeIn(delay: 0, completion: { _ in
delay(interval: 1, closure: ()->Void)
但是有很多错误!我也尝试为延迟设置负数,但这也没有用。
非常感谢任何帮助!
我之前使用过的一个可能的解决方案是使用一个循环,该循环将递增的延迟变量馈送到标准 UIView.animate()
方法中。此方法不使用完成处理程序。
制作标签数组:
var labels = [titleOutlet, line1Outlet] // etc...
使用这个扩展:
extension UIView {
func fadeIn(duration: TimeInterval = 1, delay: TimeInterval = 0) {
self.alpha = 0
UIView.animate(withDuration: duration, delay: delay, options: [], animations: { self.alpha = 1 }, completion: nil)
}
}
然后像这样使用它:
var delay = 0.2
var duration = 0.5
for label in labels {
label.fadeIn(duration: duration, delay: delay)
delay += 0.2 // Increment delay
}
背景
感谢出色的回答
但是,扩展中函数中提到的延迟仅在前一个淡入淡出完成(我认为)时触发,因此它们之间至少有 1 秒。理想情况下,我想编辑模型,以便延迟是指从视图加载开始的时间,而不是前一个完成的时间。
即如果我将延迟设置得非常小,第二个会在第一个结束之前开始淡入。
这是分机:
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)
}
}
这是我在带有 6 个标签的 VC 上的实现:
func animateLabels() {
self.titleOutlet.alpha = 0.0
self.line1Outlet.alpha = 0.0
self.line2Outlet.alpha = 0.0
self.line3Outlet.alpha = 0.0
self.line4Outlet.alpha = 0.0
self.line5Outlet.alpha = 0.0
self.line6Outlet.alpha = 0.0
self.titleOutlet.fadeIn(delay: 0.2, completion: { _ in
self.line1Outlet.fadeIn(delay: 0.4, completion: { _ in
self.line2Outlet.fadeIn(delay: 0.6, completion: { _ in
self.line3Outlet.fadeIn(delay: 0.8, completion: { _ in
self.line4Outlet.fadeIn(delay: 1.0, completion: { _ in
self.line5Outlet.fadeIn(delay: 1.2, completion: { _ in
self.line6Outlet.fadeIn(delay: 1.4, completion: { _ in
})})})})})})})
}
我想达到什么目的?
所以我想要做的是让 line2outlet 在页面加载后 0.4 秒开始淡出,但它仅在 line1 完成淡入时才开始(这需要 1 秒并延迟 0.2 秒).
我尝试了什么?
读完后,我尝试编写自己的延迟函数。我尝试将其添加到扩展名中:
func delay(interval: TimeInterval, closure: @escaping () -> Void) {
DispatchQueue.main.asyncAfter(deadline: .now() + interval) {
closure()
}
}
并像这样实施:
self.line1Outlet.fadeIn(delay: 0, completion: { _ in
delay(interval: 1, closure: ()->Void)
但是有很多错误!我也尝试为延迟设置负数,但这也没有用。
非常感谢任何帮助!
我之前使用过的一个可能的解决方案是使用一个循环,该循环将递增的延迟变量馈送到标准 UIView.animate()
方法中。此方法不使用完成处理程序。
制作标签数组:
var labels = [titleOutlet, line1Outlet] // etc...
使用这个扩展:
extension UIView {
func fadeIn(duration: TimeInterval = 1, delay: TimeInterval = 0) {
self.alpha = 0
UIView.animate(withDuration: duration, delay: delay, options: [], animations: { self.alpha = 1 }, completion: nil)
}
}
然后像这样使用它:
var delay = 0.2
var duration = 0.5
for label in labels {
label.fadeIn(duration: duration, delay: delay)
delay += 0.2 // Increment delay
}