Question

我试图为UIButton做一个“翻转x动画”。我已经看过一些关于如何制作这个动画的文档，但我找不到如何重复这样做。例如，我想翻转UIButton的图像，并在重复5秒的时间间隔后更改它。有帮助吗？感谢。

Answer 1

您可以使用CAAnimationGroup对动画数组进行分组。整个animationGroup的总动画为6.0，翻转动画发生1.0秒。所以剩下的5.0秒在这里延迟了。

编辑： CATransaction.setCompletionBlock可以使用，但只会在所有动画完成后调用完成。所以现在翻转只会发生一次，完成后你将收到完成调用，并更新图像视图并再次启动翻转动画。

喜欢这个

imageView.flip {
    // update imageView and call it again.
}

extension UIView {
    func flip(completion: @escaping ()->()) {
        CATransaction.begin()
        CATransaction.setCompletionBlock { 
            // completion code here
            completion()
        }

        let animationGroup = CAAnimationGroup()
        animationGroup.duration = 6.0
        animationGroup.repeatCount = 1

        let easeInOut = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

        let animation = CABasicAnimation(keyPath: "transform")
        animation.duration = 1.0
        animation.autoreverses = true
        animation.fromValue = CATransform3DIdentity
        animation.toValue = NSValue(caTransform3D: CATransform3DMakeRotation(CGFloat(M_PI), 0, 1, 0))
        animation.timingFunction = easeInOut

        animationGroup.animations = [animation]
        layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
        layer.add(animationGroup, forKey: "flip")

        CATransaction.commit()
    }
}

在一定时间后重复翻动x动画

1 个答案: