是否有一种方法可以在 Swift 中对多个动画进行计时功能？

Question

I'm trying to recreate the Activity ring that Apple uses in their activity apps. Here is an image for those unaware.

Apple Progress Ring.

I've done a decent job of recreating it, something I especially struggled with was the overlapping shadow. In the end, the workaround I used was to split the ring into two parts, the first 75% and the last 25% so I could have the last 25% have a shadow and appear to overlap with itself.

Now that I have done this, the animation timing has become more difficult. I now have three animations that I need to take care of.

1. The first 75% of the ring
2. The last 25% of the ring
3. Rotating the ring if it surpasses 100%

Here is a video demonstrating this. Streamable Link.

For illustrative purposes, here is the last 25% coloured differently so you can visualise it.

As you can see, the timing of the animation is a bit janky. So I have my timings set as follows

1. If the ring is filled at 75% or less, it takes 2.25 seconds to fill with a timing function of ease out
2. If the ring is filled between 75 and 100%, the first 75% takes 1 second to fill and the last 25% takes 1.25 seconds to fill with a timing function of ease out.
3. If the ring is filled over 100%, the first 75% takes 1 second, the last 25% takes 1 second and the rotation for the ring also takes 1 second with a timing function of ease out.

My question is, is it possible to link these seperate CABasicAnimations so I can set a total time of 2.25 seconds as well as set a timing function for that group so timing is calculated dynamically for each animation and a timing function affects all three?

Here is my code so far, it consists of 3 animation functions.

percent = How much to fill the ring

• gradientMaskPart1 = first 75% ring layer

• gradientMaskPart2 = last 25% ring layer

• containerLayer = layer that holds both gradientMaskParts and is rotated to simute the ring overlapping itself.

   private func animateRing() { let needsMultipleAnimations = percent <= 0.75 ? false : true CATransaction.begin() if needsMultipleAnimations { CATransaction.setCompletionBlock(ringEndAnimation) } let basicAnimation = CABasicAnimation(keyPath: "strokeEnd") basicAnimation.fromValue = currentFill basicAnimation.toValue = percent > 0.75 ? 0.75 : percent currentFill = Double(percent) basicAnimation.fillMode = .forwards basicAnimation.isRemovedOnCompletion = false basicAnimation.duration = needsMultipleAnimations ? 1 : 2.25 basicAnimation.timingFunction = needsMultipleAnimations ? .none : CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut) gradientMaskPart1.add(basicAnimation, forKey: "basicAnimation") CATransaction.commit() }

•  private func ringEndAnimation() {

    let needsMultipleAnimations = percent <= 1 ? false : true

    CATransaction.begin()

    if needsMultipleAnimations { CATransaction.setCompletionBlock(rotateRingAnimation) }

    let duration = needsMultipleAnimations ? 1 : 1.25
    let timingFunction: CAMediaTimingFunction? =
        needsMultipleAnimations ? .none : CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut)

    let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
    basicAnimation.fromValue = 0
    basicAnimation.toValue = percent <= 1 ? (percent-0.75)*4 : 1

    basicAnimation.duration = duration
    basicAnimation.fillMode = .forwards
    basicAnimation.isRemovedOnCompletion = false
    basicAnimation.timingFunction = timingFunction


    self.gradientMaskPart2.isHidden = false
    self.gradientMaskPart2.add(basicAnimation2, forKey: "basicAnimation")

    CATransaction.commit()
    }

•  private func rotateRingAnimation() {

    let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
    rotationAnimation.fromValue = 2*CGFloat.pi
    rotationAnimation.toValue = 2*CGFloat.pi+((2*(percent-1)*CGFloat.pi))
    rotationAnimation.duration = 1
    rotationAnimation.fillMode = CAMediaTimingFillMode.forwards
    rotationAnimation.isRemovedOnCompletion = false
    rotationAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut)
    self.containerLayer.add(rotationAnimation, forKey: "rotation")
    }

Answer 1

This solution demonstrates how to animate several layers synchronously with their dedicated CABasicAnimation by using CAAnimationGroup .

1. Create a container CALayer subclass for layers that should be animated synchronously. Let's call it TestLayer
2. Define the property for every layer you need to animate.
3. Override needsDisplay(forKey:) in the TestLayer to receive the display call when animation modifies the particular layer via keyPath .
4. Override init(layer:) in the TestLayer to assign your sublayers to the testLayer.presentation() layer that renders the animation of the TestLayer .

Here is the whole code with TestView that hosts TestLayer .

class TestLayer: CALayer {
    @NSManaged @objc dynamic var layer1: CAGradientLayer
    @NSManaged @objc dynamic var layer2: CAGradientLayer
    
    override init() {
        super.init()
        let gradientLayer1 = CAGradientLayer()
        let gradientLayer2 = CAGradientLayer()
        gradientLayer1.colors = [UIColor.red.cgColor, UIColor.green.cgColor]
        gradientLayer2.colors = [UIColor.green.cgColor, UIColor.red.cgColor]
        gradientLayer1.startPoint = CGPoint(x: 0.5, y: 0.5)
        gradientLayer1.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradientLayer2.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer2.endPoint = CGPoint(x: 0.5, y: 0.5)
        addSublayer(gradientLayer1)
        addSublayer(gradientLayer2)
        layer1 = gradientLayer1
        layer2 = gradientLayer2
    }
    
    override init(layer: Any) {
        super.init(layer: layer)
        if let testLayer = layer as? TestLayer {
            layer1 = testLayer.layer1
            layer2 = testLayer.layer2
        }
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSublayers() {
        var bounds1 = self.bounds
        bounds1.size.height /= 2.0
        var bounds2 = bounds1
        bounds2.origin.y = bounds1.maxY
        super.layoutSublayers()
        layer1.frame = bounds1
        layer2.frame = bounds2
    }
    
    override class func needsDisplay(forKey key: String) -> Bool {
        if key == "layer1" || key == "layer2" {
            return true
        }
        return super.needsDisplay(forKey: key)
    }
}

--

class TestView: UIView {
    override class var layerClass: AnyClass {
        get {
            return TestLayer.self
        }
    }
    
    var testLayer: TestLayer {
        get {
            return layer as! TestLayer
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func startAnimation() {
        let animLayer1 = CABasicAnimation(keyPath: "layer1.startPoint")
        animLayer1.fromValue = CGPoint(x: 0.5, y: 0.5)
        animLayer1.toValue = CGPoint(x: 0.0, y: 0.5)
        animLayer1.duration = 1.0
        animLayer1.autoreverses = true
        let animLayer2 = CABasicAnimation(keyPath: "layer2.endPoint")
        animLayer2.fromValue = CGPoint(x: 0.5, y: 0.5)
        animLayer2.toValue = CGPoint(x: 1.0, y: 0.5)
        animLayer2.duration = 1.0
        animLayer2.autoreverses = true
        let group = CAAnimationGroup()
        group.duration = 1.0
        group.autoreverses = true
        group.repeatCount = Float.greatestFiniteMagnitude
        group.animations = [animLayer1, animLayer2]
        testLayer.add(group, forKey: "TestAnim")
    }
}

If you want to test it, create a dummy view controller, and override its viewWillAppear like this:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    let testView = TestView()
    testView.frame = view.bounds
    testView.translatesAutoresizingMaskIntoConstraints = true
    testView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    view.addSubview(testView)
    testView.startAnimation()
}