如何翻转在CAShapeLayer上动画绘制的UIBezierPath/CGPath？

嘿，这个问题我太熟了——本质上是UIKit和Core Animation/CALayer的坐标系不匹配在搞鬼！UIKit的坐标原点在视图左上角，Y轴向下；而CAShapeLayer用的是Core Graphics坐标系，原点在左下角，Y轴向上，直接把UIBezierPath转成CGPath赋值过去，自然就会上下翻转。结合你已经实现了缩放功能，给你几个针对性的解决方案：

方案1：直接翻转CAShapeLayer的变换（最快捷，无需修改路径） #

这个方法不用动你的swiftBirdForm()生成的路径，只需要给shapeLayer加一个Y轴翻转的3D变换，再调整一下锚点和位置避免偏移，同时还能和你的缩放逻辑兼容：

// 假设你的shapeLayer要添加到containerView上
let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
let shapeLayer = CAShapeLayer()

// 先设置layer的frame和锚点，确保翻转后位置正确
shapeLayer.frame = containerView.bounds
shapeLayer.anchorPoint = CGPoint(x: 0.5, y: 0.5) // 锚点设为中心
shapeLayer.position = CGPoint(x: containerView.bounds.midX, y: containerView.bounds.midY)

// 应用Y轴翻转的3D变换（Z轴保持1不变）
shapeLayer.transform = CATransform3DMakeScale(1, -1, 1)

// 如果你需要缩放，直接在transform上叠加缩放效果即可
let scaleFactor: CGFloat = 0.8
shapeLayer.transform = CATransform3DScale(shapeLayer.transform, scaleFactor, scaleFactor, 1)

// 最后给layer赋值你的路径
let bezierPaths = Forms.swiftBirdForm()
if let targetPath = bezierPaths.first?.cgPath {
    shapeLayer.path = targetPath
}

// 添加你的绘制动画
let drawAnimation = CABasicAnimation(keyPath: "strokeEnd")
drawAnimation.fromValue = 0
drawAnimation.toValue = 1
drawAnimation.duration = 2.0
shapeLayer.add(drawAnimation, forKey: "animateDrawPath")
containerView.layer.addSublayer(shapeLayer)

方案2：在生成UIBezierPath时适配坐标系（路径本身更“干净”） #

如果你希望路径本身的坐标就符合Core Animation的规则，可以修改Forms类里的swiftBirdForm()方法，生成路径时直接转换坐标系：

class Forms {
    // 修改方法，传入容器视图的bounds用于坐标转换
    static func swiftBirdForm(for viewBounds: CGRect) -> [UIBezierPath] {
        var paths = [UIBezierPath]()
        
        // --- 这里是你原来绘制路径的代码 ---
        let birdPath = UIBezierPath()
        birdPath.move(to: CGPoint(x: 50, y: 50))
        birdPath.addLine(to: CGPoint(x: 150, y: 100))
        // ... 其他绘制逻辑
        // --- 原来的代码结束 ---
        
        // 创建翻转+平移的变换，把UIKit坐标转成Core Animation坐标
        let flipTransform = CGAffineTransform(scaleX: 1, y: -1)
            .translatedBy(x: 0, y: -viewBounds.height)
        
        // 给路径应用变换
        let adjustedPath = birdPath.copy() as! UIBezierPath
        adjustedPath.apply(flipTransform)
        
        paths.append(adjustedPath)
        return paths
    }
}

// 使用时传入容器视图的bounds
let adjustedPaths = Forms.swiftBirdForm(for: containerView.bounds)
shapeLayer.path = adjustedPaths.first?.cgPath
// 接着添加你的缩放和动画逻辑即可

方案3：转换CGPath时应用组合变换（灵活适配多种需求） #

如果需要同时处理翻转、缩放等多个变换，可以在把UIBezierPath转成CGPath后，直接给CGPath应用组合变换，这样路径本身会被修改，适合需要复用变换后路径的场景：

let bezierPaths = Forms.swiftBirdForm()
let containerBounds = containerView.bounds
let scaleFactor: CGFloat = 0.8

// 先创建翻转+平移的变换（修正坐标系）
let flipTransform = CGAffineTransform(scaleX: 1, y: -1)
    .translatedBy(x: 0, y: -containerBounds.height)
// 再创建缩放变换
let scaleTransform = CGAffineTransform(scaleX: scaleFactor, y: scaleFactor)
// 组合两个变换（注意顺序：先翻转再缩放，或者反过来，根据你的需求调整）
let combinedTransform = flipTransform.concatenating(scaleTransform)

// 给路径应用组合变换
if let originalCGPath = bezierPaths.first?.cgPath,
   let transformedPath = originalCGPath.copy(using: combinedTransform) {
    shapeLayer.path = transformedPath
    // 添加绘制动画
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.toValue = 1
    animation.duration = 2.0
    shapeLayer.add(animation, forKey: "drawPath")
}

小提示 #

如果你的动画还是有位置偏移，检查一下shapeLayer的frame、anchorPoint和position是否匹配容器视图的边界，这三个属性配合不好很容易导致路径位置异常。

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