Swift: 两个动画一个接着一个
Swift: Two animations once after another
我遇到了这个小动画问题,卡住了。
我想显示两个动画,一个接一个(首先将卡片从按钮刷到中心,然后将其翻转)。
所以我在 UIView.animate 方法中使用完成,在第一个动画完成后触发第二个动画。但在模拟器中,它每次只显示第二个动画。有人可以帮忙吗?
非常感谢
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseOut, animations: {
let animation:CABasicAnimation = CABasicAnimation(keyPath: "position")
animation.fromValue = NSValue(cgPoint:CGPoint(x: self.imgBackOfTheCard.frame.midX, y: 1200))
animation.toValue = NSValue(cgPoint:CGPoint(x: self.imgBackOfTheCard.frame.midX, y: self.imgBackOfTheCard.frame.midY))
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
animation.duration = 1
self.imgBackOfTheCard.layer.add(animation, forKey: "position")
}, completion: { (finished: Bool) in
UIView.animate(withDuration: 1, delay: 1, options: .curveLinear, animations: {
let transitionOptionsLeft: UIView.AnimationOptions = [.transitionFlipFromLeft, .showHideTransitionViews]
UIView.transition(from: self.imgBackOfTheCard, to: self.imgFrontCard, duration: 1, options: transitionOptionsLeft, completion: nil)
})
})
您正在混合使用 CA 动画和 UIView 动画。
第一个动画是CABasicAnimation
。 UIView.animate
不识别,所以第一个动画是 "done" (就 UIView.animate
而言)立即调用完成闭包。现在你再做一个 UIView
动画。但实际上,第一个动画才刚刚开始,所以第二个动画接管了你只能看到第二个。
要解决此问题,您应该将第一个动画移出 UIView.animate
块:
let animation:CABasicAnimation = CABasicAnimation(keyPath: "position")
animation.fromValue = NSValue(cgPoint:CGPoint(x: self.imgBackOfTheCard.frame.midX, y: 1200))
animation.toValue = NSValue(cgPoint:CGPoint(x: self.imgBackOfTheCard.frame.midX, y: self.imgBackOfTheCard.frame.midY))
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
animation.duration = 1
self.imgBackOfTheCard.layer.add(animation, forKey: "position")
然后等待1秒,再做第二个动画:
DispatchQueue.main.asyncAfter(deadline: .now() + 1, execute: {
// do your second animation here.
})
经过进一步检查,第一个动画不一定是 CABasicAnimation
。它也可以用 UIView.animate
创建。只需设置 frame
属性.
我遇到了这个小动画问题,卡住了。 我想显示两个动画,一个接一个(首先将卡片从按钮刷到中心,然后将其翻转)。 所以我在 UIView.animate 方法中使用完成,在第一个动画完成后触发第二个动画。但在模拟器中,它每次只显示第二个动画。有人可以帮忙吗? 非常感谢
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseOut, animations: {
let animation:CABasicAnimation = CABasicAnimation(keyPath: "position")
animation.fromValue = NSValue(cgPoint:CGPoint(x: self.imgBackOfTheCard.frame.midX, y: 1200))
animation.toValue = NSValue(cgPoint:CGPoint(x: self.imgBackOfTheCard.frame.midX, y: self.imgBackOfTheCard.frame.midY))
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
animation.duration = 1
self.imgBackOfTheCard.layer.add(animation, forKey: "position")
}, completion: { (finished: Bool) in
UIView.animate(withDuration: 1, delay: 1, options: .curveLinear, animations: {
let transitionOptionsLeft: UIView.AnimationOptions = [.transitionFlipFromLeft, .showHideTransitionViews]
UIView.transition(from: self.imgBackOfTheCard, to: self.imgFrontCard, duration: 1, options: transitionOptionsLeft, completion: nil)
})
})
您正在混合使用 CA 动画和 UIView 动画。
第一个动画是CABasicAnimation
。 UIView.animate
不识别,所以第一个动画是 "done" (就 UIView.animate
而言)立即调用完成闭包。现在你再做一个 UIView
动画。但实际上,第一个动画才刚刚开始,所以第二个动画接管了你只能看到第二个。
要解决此问题,您应该将第一个动画移出 UIView.animate
块:
let animation:CABasicAnimation = CABasicAnimation(keyPath: "position")
animation.fromValue = NSValue(cgPoint:CGPoint(x: self.imgBackOfTheCard.frame.midX, y: 1200))
animation.toValue = NSValue(cgPoint:CGPoint(x: self.imgBackOfTheCard.frame.midX, y: self.imgBackOfTheCard.frame.midY))
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
animation.duration = 1
self.imgBackOfTheCard.layer.add(animation, forKey: "position")
然后等待1秒,再做第二个动画:
DispatchQueue.main.asyncAfter(deadline: .now() + 1, execute: {
// do your second animation here.
})
经过进一步检查,第一个动画不一定是 CABasicAnimation
。它也可以用 UIView.animate
创建。只需设置 frame
属性.