iOS中CAGradientLayer动画卡顿及SwiftUI渐变无动画问题求助

一、UIKit+CAGradientLayer方案修复 #

问题根源是手动同步CAGradientLayer的frame和UIView的约束变化，导致UIKit动画与Core Animation隐式动画不同步。正确做法是让渐变层自动跟随父视图的边界变化，无需手动修改frame。

修改步骤： #

1. 自定义UIView子类，将其主layer设置为CAGradientLayer，让渐变层自动跟随视图bounds更新：

class GradientView: UIView {
    // 指定视图的主layer为CAGradientLayer
    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }
    
    // 便捷获取渐变层
    var gradientLayer: CAGradientLayer {
        return layer as! CAGradientLayer
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupGradient()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupGradient()
    }
    
    private func setupGradient() {
        gradientLayer.startPoint = CGPoint(x: -1, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0)
        gradientLayer.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]
        gradientLayer.cornerRadius = 15
    }
}

2. 重构ViewController代码，移除手动管理gradientLayer的逻辑：

class ViewController: UIViewController {
    
    var rectangle: GradientView!
    var widthConstraint: NSLayoutConstraint!
    var shouldExpand = false
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        rectangle = GradientView()
        view.addSubview(rectangle)
        
        rectangle.translatesAutoresizingMaskIntoConstraints = false
        rectangle.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: view.frame.width * 0.05).isActive = true
        rectangle.heightAnchor.constraint(equalToConstant: 200).isActive = true
        widthConstraint = rectangle.widthAnchor.constraint(equalToConstant: 100)
        widthConstraint.isActive = true
        rectangle.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        
        // 直接给GradientView添加边框
        rectangle.layer.borderWidth = 5
        rectangle.layer.borderColor = UIColor.lightGray.cgColor
        
        setUpGesture()
    }
    
    func setUpGesture() {
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture))
        rectangle.addGestureRecognizer(panGesture)
        
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTapGesture))
        rectangle.addGestureRecognizer(tapGesture)
    }
    
    @objc func handlePanGesture(gesture: UIPanGestureRecognizer) {
        guard !shouldExpand else { return }
        
        let translation = gesture.translation(in: gesture.view)
        let maxWidth = view.frame.width - (view.frame.width * 0.1)
        
        switch gesture.state {
        case .began, .changed:
            if translation.x < -65 || (100 + translation.x) > maxWidth {
                gesture.state = .ended
                return
            }
            widthConstraint.constant = 100 + translation.x
        case .ended, .cancelled:
            UIView.animate(withDuration: 0.7, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 5, options: [.curveEaseOut, .allowUserInteraction]) {
                self.widthConstraint.constant = 100
                self.view.layoutIfNeeded()
            }
        default:
            break
        }
    }
    
    @objc func handleTapGesture(gesture: UITapGestureRecognizer) {
        shouldExpand.toggle()
        
        UIView.animate(withDuration: 0.7, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 5, options: [.curveEaseOut, .allowUserInteraction]) {
            self.widthConstraint.constant = self.shouldExpand ? (self.view.frame.width - (self.view.frame.width * 0.1)) : 100
            self.view.layoutIfNeeded()
        }
    }
}

修改后，渐变层会完全跟随视图的约束动画，边框与渐变动画完全同步，无卡顿现象。

二、SwiftUI方案修复 #

SwiftUI渐变点击动画失效的原因是UIKit的约束动画未正确传递给SwiftUI视图，需要让SwiftUI视图响应父视图尺寸变化并应用动画。

修改步骤： #

1. 调整SwiftUI视图，让其响应尺寸变化并应用动画：

struct SwiftUIGradientView: View {
    var uiColors: [UIColor]
    
    var body: some View {
        let colors = uiColors.map { Color(uiColor: $0) }
        
        GeometryReader { proxy in
            LinearGradient(colors: colors, startPoint: .leading, endPoint: .trailing)
                .cornerRadius(15)
                // 绑定尺寸变化触发动画
                .animation(.spring(response: 0.7, dampingFraction: 1, blendDuration: 0), value: proxy.size)
        }
    }
}

2. 配置UIHostingController允许传递动画：

func setUpSwiftUIGradient() {
    let host = UIHostingController(rootView: SwiftUIGradientView(uiColors: [.red, .yellow]))
    let uiView = host.view!
    uiView.backgroundColor = .clear
    // 允许host视图传递动画内容
    uiView.allowsAnimatedContent = true
    
    rectangle.addSubview(uiView)
    
    uiView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        uiView.topAnchor.constraint(equalTo: rectangle.topAnchor),
        uiView.leadingAnchor.constraint(equalTo: rectangle.leadingAnchor),
        uiView.trailingAnchor.constraint(equalTo: rectangle.trailingAnchor),
        uiView.bottomAnchor.constraint(equalTo: rectangle.bottomAnchor)
    ])
}

ViewController的手势逻辑保持和UIKit方案一致，仅修改widthConstraint即可。修改后点击触发的动画可正常执行，拖拽操作也保持流畅。

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