SpriteKit：使用SKShapeNode+UIBezierPath实现正方形转圆形动画卡顿求助

我帮你定位到了问题的核心，也有完美的修复方案——咱们先聊聊为什么会出现跳变，再看具体怎么实现平滑动画。

问题根源：UIBezierPath的自动路径优化 #

你当前使用的UIBezierPath(roundedRect:byRoundingCorners:cornerRadii:)方法，在圆角半径增大到某个阈值（就是你观察到的0.3-0.35比值区间）时，UIKit内部会偷偷修改路径的生成逻辑：

• 当圆角半径较小时，路径是直线段+独立小圆弧的循环结构；
• 当半径大到让相邻圆角的圆弧开始“触碰”时，UIBezierPath会自动合并路径，跳过中间的直线段，直接用连续曲线连接各个角。

这种路径结构的突变，就是导致动画跳变卡顿的罪魁祸首——每帧渲染的路径节点数和形状突然改变，视觉上就会出现明显的跳跃。

解决方案：手动构建平滑过渡路径 #

要避免这个问题，我们需要完全掌控路径的生成逻辑，不用系统的roundedRect方法，而是手动绘制每个圆角的圆弧和连接的直线段（当需要时）。这样不管半径怎么变化，路径的结构都是连续平滑的。

第一步：自定义路径生成函数 #

先写一个函数，根据当前的圆角半径生成对应的路径：

func shapePath(forSquareSize size: CGFloat, cornerRadius radius: CGFloat) -> CGPath {
    let rect = CGRect(x: -size/2, y: -size/2, width: size, height: size)
    let path = UIBezierPath()
    
    // 限制半径不超过正方形边长的一半（超过后就是圆形了）
    let maxRadius = size / 2.0
    let clampedRadius = min(radius, maxRadius)
    // 计算圆弧之间的直线段长度（半径等于maxRadius时，直线段长度为0）
    let edgeLength = size - 2 * clampedRadius
    
    // 从右下角开始绘制（适配SpriteKit的y轴向上坐标系）
    let startPoint = CGPoint(x: rect.maxX - clampedRadius, y: rect.minY)
    path.move(to: startPoint)
    
    // 右下角圆弧
    path.addArc(withCenter: CGPoint(x: rect.maxX - clampedRadius, y: rect.minY + clampedRadius),
                radius: clampedRadius,
                startAngle: .pi * 3/2,
                endAngle: .pi * 2,
                clockwise: true)
    
    // 右边缘直线段（如果还有剩余长度）
    if edgeLength > 0 {
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - clampedRadius))
    }
    
    // 右上角圆弧
    path.addArc(withCenter: CGPoint(x: rect.maxX - clampedRadius, y: rect.maxY - clampedRadius),
                radius: clampedRadius,
                startAngle: 0,
                endAngle: .pi/2,
                clockwise: true)
    
    // 上边缘直线段
    if edgeLength > 0 {
        path.addLine(to: CGPoint(x: rect.minX + clampedRadius, y: rect.maxY))
    }
    
    // 左上角圆弧
    path.addArc(withCenter: CGPoint(x: rect.minX + clampedRadius, y: rect.maxY - clampedRadius),
                radius: clampedRadius,
                startAngle: .pi/2,
                endAngle: .pi,
                clockwise: true)
    
    // 左边缘直线段
    if edgeLength > 0 {
        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY + clampedRadius))
    }
    
    // 左下角圆弧
    path.addArc(withCenter: CGPoint(x: rect.minX + clampedRadius, y: rect.minY + clampedRadius),
                radius: clampedRadius,
                startAngle: .pi,
                endAngle: .pi * 3/2,
                clockwise: true)
    
    // 闭合路径
    path.close()
    
    return path.cgPath
}

第二步：修改动画代码 #

用上面的函数替换原来的UIBezierPath(roundedRect:)调用，动画逻辑不变：

let shape = SKShapeNode()
let l: CGFloat = 100.0
shape.path = shapePath(forSquareSize: l, cornerRadius: 0)
shape.position = CGPoint(x: frame.midX, y: frame.midY)
shape.fillColor = .white
addChild(shape)

let action = SKAction.customAction(withDuration: 1) { (node, t) in
    let shapeNode = node as! SKShapeNode
    // 计算当前帧的圆角半径（从0到边长的一半）
    let currentRadius = t * l / 2
    shapeNode.path = shapePath(forSquareSize: l, cornerRadius: currentRadius)
}
shape.run(SKAction.repeatForever(action))

为什么这个方案有效？ #

• 连续的路径结构：不管圆角半径怎么变化，路径始终是“圆弧+直线段”（或纯圆弧）的组合，没有突然的结构变更；
• 完全可控的过渡：当半径达到正方形边长的一半时，直线段长度刚好为0，四个圆弧无缝拼接成完美的圆形，整个过渡过程平滑无跳变；
• 更高效的渲染：手动构建的路径节点数稳定，SpriteKit渲染时性能更稳定，进一步提升动画流畅度。

内容的提问来源于stack exchange，提问作者Tibor Udvari