首页 > 解决方案 > 迅速停止 CABasicAnimation

问题描述

我将 CABasicAnimation 用于像脉冲帧这样的动画视图

有代码

extension UIView {
/// animate the border width
func animateBorderWidth(toValue: CGFloat, duration: Double) -> CABasicAnimation {
    let widthAnimation = CABasicAnimation(keyPath: "borderWidth")
    widthAnimation.fromValue = 0.9
    widthAnimation.toValue = 0.0
    widthAnimation.duration = 15
    widthAnimation.timingFunction = CAMediaTimingFunction(name: .easeOut)
    return widthAnimation
}

/// animate the scale
func animateScale(toValue: CGFloat, duration: Double) -> CABasicAnimation {
    let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
    scaleAnimation.fromValue = 1.0
    scaleAnimation.toValue = 12
    scaleAnimation.duration = 55
    scaleAnimation.repeatCount = .infinity
    scaleAnimation.isRemovedOnCompletion = false
    scaleAnimation.timingFunction = CAMediaTimingFunction(name: .linear)
    return scaleAnimation
}
    
func pulsate(animationDuration: CGFloat) {
    var animationGroup: CAAnimationGroup!
    let newLayer = CALayer()
    animationGroup = CAAnimationGroup()
    animationGroup.duration = CFTimeInterval(animationDuration)
    animationGroup.repeatCount = Float.infinity
    
    newLayer.bounds = CGRect(x: 0, y: 0, width: self.frame.width, height: self.frame.height)
    newLayer.cornerRadius = self.frame.width/2
    newLayer.position = CGPoint(x: self.frame.width/2, y: self.frame.height/2)
    newLayer.cornerRadius = self.frame.width/2
    newLayer.borderColor = #colorLiteral(red: 0.7215686275, green: 0.5137254902, blue: 0.7647058824, alpha: 0.7).cgColor
    
        animationGroup.timingFunction = CAMediaTimingFunction(name: .easeOut)
    animationGroup.animations = [animateScale(toValue: 7.5, duration: 2.0),
                                 animateBorderWidth(toValue: 0.6, duration: Double(animationDuration))]
        animationGroup.duration = 14
    newLayer.add(animationGroup, forKey: "pulse")
    self.layer.cornerRadius = self.frame.width/2
    self.layer.insertSublayer(newLayer, at: 0)
}

func removeAnimation() {
    self.layer.sublayers?.forEach { $0.removeAnimation(forKey: "pulse") }
}

} 在此处输入图像描述

并在 UIViewCOntroller 中添加此动画以查看

func startPul() {
self.backPulseView.pulsate(animationDuration: 2.0)
}

但是如果我按下按钮我想停止动画并隐藏我正在尝试

func stopPul() {
self.backPulseView.removeAnimation()
}

但是动画仍然有效并且没有被删除

如何删除动画然后我可以再次调用?

停止我从按钮点击调用的动画

 @IBAction func stopBtn(_ sender: UIButton) {
    stopPul()
 }

标签: swiftanimationcabasicanimation

解决方案


要删除动画迭代sublayers并删除该“脉冲”键的动画:

self.layer.sublayers?.forEach {
            $0.speed = 0
            $0.removeAllAnimations()
            $0.removeFromSuperlayer()
        }
}

推荐阅读