如何实现CGPath数组的逐路径绘制动画？（UIBezierPath转CGPath场景）

Hey there! Let’s work through how to get those UIBezierPaths animating one after another—this is a common gotcha, but I’ve got a reliable approach for you. The core issue with most failed attempts is not properly managing individual layer animations and their execution order. Here’s a step-by-step solution:

Each UIBezierPath needs its own CAShapeLayer to control the stroke animation. We’ll animate the strokeEnd property of each layer from 0 to 1 (which draws the path incrementally) and chain these animations so they run one after another.

1. Convert Your UIBezierPath Array to CAShapeLayers #

First, we’ll wrap each path in a shape layer with the right styling. This ensures each path has its own animation context:

// Assume your path array is called macbookPath: [UIBezierPath]
func createShapeLayers(from paths: [UIBezierPath]) -> [CAShapeLayer] {
    return paths.map { path in
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.strokeColor = UIColor.black.cgColor // Customize your stroke color
        shapeLayer.fillColor = UIColor.clear.cgColor // Critical: Don't let fill cover the stroke
        shapeLayer.lineWidth = 2.0 // Adjust line thickness as needed
        shapeLayer.strokeEnd = 0.0 // Start with the path completely undrawn
        return shapeLayer
    }
}

2. Add Layers to Your View #

Next, attach all these shape layers to your view’s layer so they’re visible:

let shapeLayers = createShapeLayers(from: macbookPath)
shapeLayers.forEach { layer in
    yourTargetView.layer.addSublayer(layer)
}

3. Animate Paths One After Another #

We’ll use a recursive approach with CATransaction completion blocks (works on iOS 10+/macOS 10.12+) to chain animations cleanly. This avoids messy delegate code:

func animatePathsSequentially(_ layers: [CAShapeLayer], currentIndex: Int = 0) {
    // Exit if we've animated all layers
    guard currentIndex < layers.count else { return }
    
    let currentLayer = layers[currentIndex]
    let strokeAnimation = CABasicAnimation(keyPath: "strokeEnd")
    
    // Animation settings
    strokeAnimation.fromValue = 0.0
    strokeAnimation.toValue = 1.0
    strokeAnimation.duration = 1.0 // Adjust time per path
    strokeAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut) // Smooth curve
    
    // Keep the final state of the animation (don't reset to strokeEnd = 0)
    currentLayer.strokeEnd = 1.0
    
    // Chain to the next animation when this one finishes
    CATransaction.begin()
    CATransaction.setCompletionBlock {
        self.animatePathsSequentially(layers, currentIndex: currentIndex + 1)
    }
    currentLayer.add(strokeAnimation, forKey: "strokeAnimation")
    CATransaction.commit()
}

4. Trigger the Animation #

Call this function from your view setup code (like viewDidLoad):

override func viewDidLoad() {
    super.viewDidLoad()
    // Set up your macbookPath array here first
    let shapeLayers = createShapeLayers(from: macbookPath)
    shapeLayers.forEach { yourTargetView.layer.addSublayer($0) }
    animatePathsSequentially(shapeLayers)
}

If your previous code didn’t work, check these common mistakes:

• Forgot fillColor = .clear: A filled path will hide the stroke animation. Always set this if you only want to animate the outline.
• No initial strokeEnd = 0: If the layer starts with strokeEnd = 1, the animation won’t have anything to show.
• Animating all layers at once: Without chaining, all paths will draw simultaneously instead of sequentially.
• Layers not added to the view: Double-check you’re adding the shape layers to a visible view’s layer.

内容的提问来源于stack exchange，提问作者Thijs van der Heijden