Question

我遇到了一个动画小问题，被卡住了。我想显示两个动画，一个接一个（首先从按钮向中心滑动卡片，然后将其翻转）。因此，一旦第一个动画完成，我将使用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)
        })
})

Answer 1

您正在混合CA动画和UIView动画。

第一个动画是CABasicAnimation。 UIView.animate无法识别它，因此第一个动画会立即“完成”（就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属性即可。

斯威夫特：一次又一次的两个动画

1 个答案: