求助：UIBezierPath圆形动画出现变形，求排查原因

问题根源 #

你遇到的圆形动画变形，核心原因是使用path属性动画时，两个路径（半径0的点和半径100的圆）的贝塞尔曲线结构不一致：

• 当radius=0时，UIBezierPath创建的是一个单点的闭合路径，控制点数量和结构与正常圆形路径完全不同；
• Core Animation在插值这两个差异较大的路径时，无法生成平滑的圆形过渡，最终导致动画过程中形状扭曲变形。

另外还有一个潜在问题：如果在viewDidLoad中直接使用view.center，此时视图的布局可能还未完成，圆心位置可能不准确，也会间接影响动画效果。

修复方案：改用图层缩放动画 #

相比path动画，使用transform的缩放动画可以保证圆形始终保持正圆形态，同时配合透明度动画实现需求效果。修改后的代码如下：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    let circleLayer = CAShapeLayer()
    let radius: CGFloat = 100.0
    // 直接创建最终状态的圆形路径（半径100）
    let circlePath = UIBezierPath(arcCenter: view.center, radius: radius, startAngle: 0, endAngle: CGFloat(Double.pi * 2), clockwise: true)
    
    circleLayer.fillColor = UIColor.red.cgColor
    circleLayer.path = circlePath.cgPath
    // 初始状态：缩放到0，完全隐藏
    circleLayer.transform = CATransform3DMakeScale(0, 0, 1)
    circleLayer.opacity = 1
    
    // 创建缩放动画：从0缩放到1
    let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
    scaleAnimation.fromValue = 0
    scaleAnimation.toValue = 1
    
    // 透明度动画：从1到0
    let alphaAnimation = CABasicAnimation(keyPath: "opacity")
    alphaAnimation.fromValue = 1
    alphaAnimation.toValue = 0
    
    // 动画组配置
    let animations = CAAnimationGroup()
    animations.duration = 2
    animations.repeatCount = .greatestFiniteMagnitude
    animations.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    animations.animations = [scaleAnimation, alphaAnimation]
    // 设置动画完成后保持最终状态（可选，根据你的需求调整）
    animations.fillMode = .forwards
    animations.isRemovedOnCompletion = false
    
    circleLayer.add(animations, forKey: "animations")
    self.view.layer.addSublayer(circleLayer)
}

关键修改点说明 #

• 改用缩放动画：通过transform.scale动画替代path动画，利用图层缩放实现从无到有的效果，完全避免路径插值导致的变形；
• 在viewDidLayoutSubviews中执行：确保view.center是视图布局完成后的准确位置，避免圆心偏移；
• 初始状态设置：直接创建最终大小的圆形路径，通过transform缩放到0来实现初始隐藏，保证动画过程中形状始终是正圆；
• 动画填充模式：添加fillMode = .forwards和isRemovedOnCompletion = false，让动画结束后保持最终状态（如果需要重复播放，这个设置也不会影响重复效果）。

额外优化建议 #

如果你希望动画有反向过渡（比如从大到小再从小到大循环），可以添加animations.autoreverses = true，这样动画会在完成一次正向播放后自动反向播放，循环效果更流畅。

内容的提问来源于stack exchange，提问作者DS.