如何在Swift中实现绘图动画同时改变UIImageView的缩放比例？

我来帮你搞定这个螺旋线动画的实现！结合你提到的需求——既要更新UIImageView里的螺旋线内容，又要同步调整视图的缩放比例，我整理了一套完整的实现方案，分步骤给你拆解：

1. 先实现缩放比例计算函数 #

首先得搞定scaleFactor，它的作用是根据螺旋线的旋转圈数，计算出让螺旋线刚好适配UIImageView的缩放比例。这里我们基于螺旋线的极坐标方程来推导：

func scaleFactor(for rotations: Double) -> CGFloat {
    // a是控制螺旋疏密的系数，数值越小螺旋越密
    let spiralDensity: CGFloat = 10.0
    // 计算螺旋线的最大极角（转满指定圈数的总角度）
    let maxTheta = CGFloat(rotations * 2 * Double.pi)
    // 螺旋线的最大半径 = 系数 * 极角
    let maxSpiralRadius = spiralDensity * maxTheta
    // 取视图短边的一半作为可用的最大半径，避免螺旋超出视图
    let availableRadius = min(mainImageView.bounds.width, mainImageView.bounds.height) / 2
    // 最终缩放比例 = 可用半径 / 螺旋最大半径
    return availableRadius / maxSpiralRadius
}

2. 完善螺旋线绘制函数 #

接下来补全你的drawSpiral函数，重点是在图形上下文里做坐标平移、缩放，然后绘制螺旋线，最后同步更新视图的缩放：

func drawSpiral(rotations: Double) {
    let scale = scaleFactor(for: rotations)
    let viewBounds = mainImageView.bounds
    
    // 开启图形上下文，注意使用视图的尺寸和屏幕缩放因子
    UIGraphicsBeginImageContextWithOptions(viewBounds.size, false, 0.0)
    // 用defer确保上下文一定会被关闭，避免内存泄漏
    defer { UIGraphicsEndImageContext() }
    
    guard let context = UIGraphicsGetCurrentContext() else { return }
    
    // 把坐标系原点平移到视图中心，方便绘制中心螺旋
    context.translateBy(x: viewBounds.midX, y: viewBounds.midY)
    // 应用计算好的缩放比例，让螺旋线刚好适配视图
    context.scaleBy(x: scale, y: scale)
    
    // 设置绘制样式：线宽、颜色
    context.setLineWidth(2.0)
    context.setStrokeColor(UIColor.systemBlue.cgColor)
    
    // 螺旋线的极坐标方程：r = a * θ
    let spiralDensity: CGFloat = 10.0
    // 步长越小，螺旋线越平滑，但计算量会增加
    let drawingStep: CGFloat = 0.1
    let maxTheta = CGFloat(rotations * 2 * Double.pi)
    
    // 开始绘制路径
    context.beginPath()
    context.move(to: .zero) // 从原点（视图中心）开始
    
    var currentTheta: CGFloat = 0.0
    while currentTheta <= maxTheta {
        let radius = spiralDensity * currentTheta
        // 极坐标转直角坐标
        let x = radius * cos(currentTheta)
        let y = radius * sin(currentTheta)
        context.addLine(to: CGPoint(x: x, y: y))
        currentTheta += drawingStep
    }
    
    // 描边完成路径
    context.strokePath()
    
    // 生成图像并赋值给UIImageView
    if let spiralImage = UIGraphicsGetImageFromCurrentImageContext() {
        mainImageView.image = spiralImage
    }
    
    // 同步更新UIImageView的缩放变换
    mainImageView.transform = CGAffineTransform(scaleX: scale, y: scale)
}

3. 实现序列动画效果 #

如果要做从0到指定圈数的连续动画，有两种常用方式：

方式一：用UIView关键帧动画（简单易上手） #

适合对精度要求不是极高的场景：

func animateSpiral(from startRotations: Double, to endRotations: Double, duration: TimeInterval) {
    UIView.animateKeyframes(withDuration: duration, delay: 0, options: .calculationModeLinear) {
        // 分100帧来绘制，帧数越多动画越平滑
        let totalFrames = 100
        for frame in 0...totalFrames {
            let progress = Double(frame) / Double(totalFrames)
            let currentRotations = startRotations + (endRotations - startRotations) * progress
            UIView.addKeyframe(withRelativeStartTime: progress, relativeDuration: 1/Double(totalFrames)) {
                self.drawSpiral(rotations: currentRotations)
            }
        }
    }
}

// 调用示例：3秒内从0转到5圈
animateSpiral(from: 0, to: 5, duration: 3)

方式二：用CADisplayLink（精准逐帧控制） #

适合需要更流畅、精准的动画场景：

private var displayLink: CADisplayLink?
private var currentRotations: Double = 0.0
private let targetRotations: Double = 5.0 // 目标旋转5圈
private let animationDuration: TimeInterval = 3.0 // 动画时长3秒
private var startTime: CFTimeInterval?

func startSpiralAnimation() {
    // 重置动画状态
    currentRotations = 0.0
    startTime = CACurrentMediaTime()
    
    // 创建DisplayLink，绑定到主运行循环
    displayLink = CADisplayLink(target: self, selector: #selector(updateSpiralFrame))
    displayLink?.add(to: .main, forMode: .common)
}

@objc private func updateSpiralFrame() {
    guard let startTime = startTime else { return }
    let elapsedTime = CACurrentMediaTime() - startTime
    
    // 动画结束后停止DisplayLink
    if elapsedTime >= animationDuration {
        displayLink?.invalidate()
        displayLink = nil
        drawSpiral(rotations: targetRotations) // 确保最后一帧正确
        return
    }
    
    // 计算当前进度和对应的旋转圈数
    let progress = elapsedTime / animationDuration
    currentRotations = targetRotations * progress
    drawSpiral(rotations: currentRotations)
}

// 调用示例
startSpiralAnimation()

几个关键注意点 #

• 把mainImageView的contentMode设置为.center，这样缩放时图像不会被拉伸变形
• 如果螺旋线不够平滑，可以减小drawingStep参数，但要注意平衡性能（步长太小会增加CPU消耗）
• 始终用defer关闭图形上下文，避免内存泄漏
• 如果需要反向动画，只需要调整currentRotations的计算逻辑即可（比如从目标圈数减到0）

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