Swift实现圆形按钮边框颜色渐变过渡动画方案求助

嘿，我完全懂你想要的那种效果——不是边框整体瞬间变色，而是新颜色像画进度条一样逐步覆盖旧边框，你的第二种思路用CAShapeLayer找对方向了，不过可以再优化一下，让效果更贴合需求，同时避免重复代码的问题。

先给你说清楚为什么第一种方法不行：直接给borderColor加CABasicAnimation，本质是对图层的borderColor属性做插值动画，它会让整个边框的颜色同时从黑变到红，做不到“逐步绘制覆盖”的效果，这就是你看到瞬间切换的原因。

下面是优化后的完整实现方案，用两个CAShapeLayer来分别承载旧颜色边框和动画的新颜色边框：

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var myButton: UIButton!
    
    // 底层固定显示的旧颜色边框
    private let baseBorderLayer = CAShapeLayer()
    // 上层用于动画的新颜色边框
    private let animatedBorderLayer = CAShapeLayer()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupBorderLayers()
    }
    
    private func setupBorderLayers() {
        // 配置底层黑色边框
        baseBorderLayer.fillColor = UIColor.clear.cgColor
        baseBorderLayer.strokeColor = UIColor.black.cgColor
        baseBorderLayer.lineWidth = 2
        baseBorderLayer.path = createButtonRoundedPath()
        myButton.layer.addSublayer(baseBorderLayer)
        
        // 配置上层红色动画边框，初始完全隐藏（strokeEnd = 0）
        animatedBorderLayer.fillColor = UIColor.clear.cgColor
        animatedBorderLayer.strokeColor = UIColor.red.cgColor
        animatedBorderLayer.lineWidth = 2
        animatedBorderLayer.path = createButtonRoundedPath()
        animatedBorderLayer.strokeEnd = 0.0
        myButton.layer.addSublayer(animatedBorderLayer)
    }
    
    // 复用创建按钮圆角路径的方法，避免重复代码
    private func createButtonRoundedPath() -> CGPath {
        let buttonBounds = myButton.bounds
        return CGPath(roundedRect: buttonBounds,
                      cornerWidth: buttonBounds.width / 2,
                      cornerHeight: buttonBounds.height / 2,
                      transform: nil)
    }

    @IBAction func buttonTapped(_ sender: UIButton) {
        // 先重置动画状态，防止重复点击导致动画混乱
        animatedBorderLayer.removeAllAnimations()
        animatedBorderLayer.strokeEnd = 0.0
        
        // 创建strokeEnd动画，实现逐步绘制效果
        let strokeAnimation = CABasicAnimation(keyPath: "strokeEnd")
        strokeAnimation.fromValue = 0.0
        strokeAnimation.toValue = 1.0
        strokeAnimation.duration = 1.0
        strokeAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        
        // 让动画结束后保持最终状态，不会跳回初始值
        strokeAnimation.fillMode = .forwards
        strokeAnimation.isRemovedOnCompletion = false
        
        animatedBorderLayer.add(strokeAnimation, forKey: "borderStrokeAnimation")
    }
}

关键细节说明： #

• 双图层设计：底层图层固定显示旧颜色边框，上层图层负责新颜色的绘制动画，这样看起来就是新颜色逐步覆盖旧边框，完全符合你想要的进度条式效果。
• 避免重复操作：把图层初始化和路径创建都放在viewDidLoad里完成，点击事件只负责触发动画，不会重复添加图层或设置路径，避免性能问题。
• 动画状态重置：每次点击按钮先移除旧动画并重置strokeEnd，防止重复点击时动画叠加导致的异常。
• 保持动画结果：设置isRemovedOnCompletion = false和fillMode = .forwards，确保动画结束后上层边框保持完全显示的状态，不会消失。

如果之后想要实现反向动画（红色边框变回黑色），只需要把动画的fromValue设为1.0，toValue设为0.0就可以啦。

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