如何处理 Swift 中的重叠动画调用
How to Handle Overlapping Animation Calls in Swift
我有一个页脚栏,它本质上是一个包含按钮和图像的视图。当按下特定按钮时,函数:
- 隐藏图像 (footerImg)
- 按钮 (footerBtn) 添加了文本 (textToDisplay)
- 然后动画使 footerBtn 淡出,图像淡出
- 整个动画大约需要2秒
我的问题
我的问题是有时用户会在 2 秒过去之前再次点击按钮,并且在完成之前会要求相同的动画 运行。如何使我的代码能够处理重叠动画?我希望第二次按下停止第一个动画并简单地 运行 第二个动画。
我的代码
使用下面的代码,按下第二个按钮会破坏动画,文本和图像都会消失两秒钟,然后恢复到原始状态。
//Animate TaskAction feedback in footer bar
func animateFeedback(textToDisplay: String, footerBtn: UIButton, footerImg: UIImageView) {
//Cancel any running animation
footerBtn.layer.removeAllAnimations()
//Set to defaults - In case it is interrupting animation
footerBtn.backgroundColor = UIColor.clearColor()
footerBtn.setTitleColor(UIColor(red: 55/255.0, green: 55/255.0, blue: 55/255.0, alpha: 1.0), forState: UIControlState.Normal) //light gray
//Setup for animation
footerImg.alpha = 0.0
footerBtn.alpha = 1
footerBtn.setTitle(textToDisplay, forState: UIControlState.Normal)
footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Regular", size: 18)
UIView.animateKeyframesWithDuration(2.0 /*Total*/, delay: 1.0, options: UIViewKeyframeAnimationOptions.CalculationModeLinear, animations: {
UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration:0.50, animations:{
footerBtn.alpha = 0.01 //Text fades out
})
UIView.addKeyframeWithRelativeStartTime(0.50, relativeDuration:0.50, animations:{
footerImg.alpha = 1 //Starting image reappears
})
},
completion: { finished in
footerBtn.setTitle("", forState: UIControlState.Normal)
footerBtn.alpha = 1
})//End of animation
}//End of animateFeedback
解决方法如下:
如果动画因为在第一个动画完成之前触发第二个动画调用而变得混乱,请阅读此 post 的答案:
本质上,它与完成块有关。奇怪的是,完成仍然在第一个动画上运行,即使它被打断了。如果代码没有完成,您可以添加一个 if 语句来跳过剩余的完成块。
我有一个页脚栏,它本质上是一个包含按钮和图像的视图。当按下特定按钮时,函数:
- 隐藏图像 (footerImg)
- 按钮 (footerBtn) 添加了文本 (textToDisplay)
- 然后动画使 footerBtn 淡出,图像淡出
- 整个动画大约需要2秒
我的问题
我的问题是有时用户会在 2 秒过去之前再次点击按钮,并且在完成之前会要求相同的动画 运行。如何使我的代码能够处理重叠动画?我希望第二次按下停止第一个动画并简单地 运行 第二个动画。
我的代码
使用下面的代码,按下第二个按钮会破坏动画,文本和图像都会消失两秒钟,然后恢复到原始状态。
//Animate TaskAction feedback in footer bar
func animateFeedback(textToDisplay: String, footerBtn: UIButton, footerImg: UIImageView) {
//Cancel any running animation
footerBtn.layer.removeAllAnimations()
//Set to defaults - In case it is interrupting animation
footerBtn.backgroundColor = UIColor.clearColor()
footerBtn.setTitleColor(UIColor(red: 55/255.0, green: 55/255.0, blue: 55/255.0, alpha: 1.0), forState: UIControlState.Normal) //light gray
//Setup for animation
footerImg.alpha = 0.0
footerBtn.alpha = 1
footerBtn.setTitle(textToDisplay, forState: UIControlState.Normal)
footerBtn.titleLabel!.font = UIFont(name: "HelveticaNeue-Regular", size: 18)
UIView.animateKeyframesWithDuration(2.0 /*Total*/, delay: 1.0, options: UIViewKeyframeAnimationOptions.CalculationModeLinear, animations: {
UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration:0.50, animations:{
footerBtn.alpha = 0.01 //Text fades out
})
UIView.addKeyframeWithRelativeStartTime(0.50, relativeDuration:0.50, animations:{
footerImg.alpha = 1 //Starting image reappears
})
},
completion: { finished in
footerBtn.setTitle("", forState: UIControlState.Normal)
footerBtn.alpha = 1
})//End of animation
}//End of animateFeedback
解决方法如下:
如果动画因为在第一个动画完成之前触发第二个动画调用而变得混乱,请阅读此 post 的答案:
本质上,它与完成块有关。奇怪的是,完成仍然在第一个动画上运行,即使它被打断了。如果代码没有完成,您可以添加一个 if 语句来跳过剩余的完成块。