快速使用动画更改圆形边框颜色

Question

我使用swift创建了一个圆形按钮，我想做的是通过动画更改边框颜色

我使用以下代码：

let color = CABasicAnimation(keyPath: "borderColor")
color.fromValue = UIColor.black.cgColor
color.toValue = UIColor.red.cgColor
color.duration = 1
color.repeatCount = 1
sender.layer.add(color, forKey: "color and width")

边框颜色在变化，但没有获得期望的效果，它会立即更改边框颜色。 我想要的效果就像您在旧颜色上绘制一样，使其保持简单==>就像进度条一样，您会看到旧颜色逐渐消失并被新颜色替换。

有什么办法吗？

感谢您的帮助。

更新代码

var storkeLayer = CAShapeLayer()

@IBOutlet weak var Mybut: UIButton!
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    storkeLayer.fillColor = UIColor.clear.cgColor
    storkeLayer.strokeColor = UIColor.black.cgColor
    storkeLayer.lineWidth = 2

    // Create a rounded rect path using button's bounds.

    storkeLayer.path = CGPath.init(roundedRect: Mybut.bounds, cornerWidth: Mybut.frame.width / 2 , cornerHeight: Mybut.frame.height / 2, transform: nil)


    // Add layer to the button
    Mybut.layer.addSublayer(storkeLayer)
}


 @IBAction func bytton(_ sender: UIButton) {

    storkeLayer.fillColor = UIColor.clear.cgColor
    storkeLayer.strokeColor = UIColor.red.cgColor
    storkeLayer.lineWidth = 2

    // Create a rounded rect path using button's bounds.

    storkeLayer.path = CGPath.init(roundedRect: Mybut.bounds, cornerWidth: Mybut.frame.width / 2 , cornerHeight: Mybut.frame.height / 2, transform: nil)


    // Add layer to the button
    sender.layer.addSublayer(storkeLayer)

    // Create animation layer and add it to the stroke layer.
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = CGFloat(0.0)
    animation.toValue = CGFloat(1.0)
    animation.duration = 1
   animation.fillMode = kCAFillModeForwards

   // animation.fillMode = kCAFillModeBackwards
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    storkeLayer.add(animation, forKey: "circleAnimation")



}

Answer 1

您可以使用以下代码段敲击按钮的路径。

@IBAction func buttonTapped(_ sender: UIButton) {
    let storkeLayer = CAShapeLayer()
    storkeLayer.fillColor = UIColor.clear.cgColor
    storkeLayer.strokeColor = UIColor.red.cgColor
    storkeLayer.lineWidth = 2

    // Create a rounded rect path using button's bounds.
    storkeLayer.path = CGPath.init(roundedRect: sender.bounds, cornerWidth: 5, cornerHeight: 5, transform: nil) // same path like the empty one ...
    // Add layer to the button
    sender.layer.addSublayer(storkeLayer)

    // Create animation layer and add it to the stroke layer.
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = CGFloat(0.0)
    animation.toValue = CGFloat(1.0)
    animation.duration = 1
    animation.fillMode = kCAFillModeForwards
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    storkeLayer.add(animation, forKey: "circleAnimation")
}

此代码段创建了以下内容：