如何在swift中为边框颜色变化设置动画

Posted 2023-03-11

【中文标题】如何在swift中为边框颜色变化设置动画

【英文标题】：How to animate borderColor change in swift

【发布时间】：2015-03-09 03:46:55

【问题描述】：

由于某种原因，这对我不起作用：

let color = CABasicAnimation(keyPath: "borderColor")
color.fromValue = sender.layer.borderColor;
color.toValue = UIColor.redColor().CGColor;
color.duration = 2;
color.repeatCount = 1;
sender.layer.addAnimation(color, forKey: "color and width");

我没有让任何动画发生。

【问题讨论】：

这段代码给出了什么结果？

什么不起作用？在编辑您的问题时包含错误消息和预期结果（不要评论 cmets，也不要在您的阐述中包含 Edit 或 Update，我们可以看看编辑历史发生了什么变化）。

【参考方案1】：

Swift 4 UIView 扩展：

extension UIView 
  func animateBorderColor(toColor: UIColor, duration: Double) 
    let animation = CABasicAnimation(keyPath: "borderColor")
    animation.fromValue = layer.borderColor
    animation.toValue = toColor.cgColor
    animation.duration = duration
    layer.add(animation, forKey: "borderColor")
    layer.borderColor = toColor.cgColor
  

然后直接写就用：

myView.animateBorderColor(toColor: .red, duration: 0.5)

【参考方案2】：

您必须使用相同的键名。您还忘记在为图层设置动画之前为其添加边框宽度和颜色。试试这样：

let color = CABasicAnimation(keyPath: "borderColor")

@IBAction func animateBorder(sender: AnyObject) 
    color.fromValue = UIColor.greenColor().CGColor
    color.toValue = UIColor.redColor().CGColor
    color.duration = 2
    color.repeatCount = 1
    sender.layer.borderWidth = 2
    sender.layer.borderColor = UIColor.greenColor().CGColor
    sender.layer.addAnimation(color, forKey: "borderColor")

【讨论】：

玩了一会儿。我认为问题在于fromColor。它没有读取 sender.layer.borderColor。

color.fromValue = sender.layer.borderColor 在这里也适用于我

问题出在键名 forKey：“颜色和宽度”。如果要为颜色和边框设置动画，则需要为每个属性（borderColor 和 borderWidth）创建一个 CABasicAnimation

调用 sender.layer.addAnimation(color, forKey: "color") 有效。当我将它更改为 color.fromValue = sender.layer.borderColor 时，事情就会中断。我不明白，但这就是正在发生的事情。

【参考方案3】：

（Swift 5、Xcode 11、iOS 13）

对于任何想要同时更改边框颜色和宽度的人，以下代码对我有用，动画看起来非常流畅。也许其他人知道将两者合二为一的方法？

let borderColorAnimation: CABasicAnimation = CABasicAnimation(keyPath: "borderColor")
borderColorAnimation.fromValue = layer.borderColor
borderColorAnimation.toValue = toColor.cgColor
borderColorAnimation.duration = animationDuration
layer.add(borderColorAnimation, forKey: "borderColor")
layer.borderColor = toColor.cgColor

let borderWidthAnimation: CABasicAnimation = CABasicAnimation(keyPath: "borderWidth")
borderWidthAnimation.fromValue = layer.borderWidth
borderWidthAnimation.toValue = toWidth
borderWidthAnimation.duration = animationDuration
layer.add(borderWidthAnimation, forKey: "borderWidth")
layer.borderWidth = toWidth

【讨论】：

我们可以使用 CAAnimationGroup 来组合动画。 let animationGroup = CAAnimationGroup() animationGroup.animations = [colorsAnimation] animationGroup.duration = duration layer.add(animationGroup, forKey: "animation-group")

【参考方案4】：

为此，我为CALayer 创建了一个Swift 4 函数扩展，您可以将UIColors 的开始和结束以及动画的持续时间传递给它：

extension CALayer 

func animateBorderColor(from startColor: UIColor, to endColor: UIColor, withDuration duration: Double) 
    let colorAnimation = CABasicAnimation(keyPath: "borderColor")
    colorAnimation.fromValue = startColor.cgColor
    colorAnimation.toValue = endColor.cgColor
    colorAnimation.duration = duration
    self.borderColor = endColor.cgColor
    self.add(colorAnimation, forKey: "borderColor")

请注意，要使其正常工作，您应该已经设置了borderWidth，然后调用animateBorderColor：

yourView.layer.borderWidth = 1.5
yourView.layer.animateBorderColor(from: UIColor.green, to: UIColor.red, withDuration: 2.0)

【参考方案5】：

我不知道为什么，但出于某种原因打电话：

color.fromValue = sender.layer.borderColor

不起作用。颜色没有被正确读取或什么的。我把它改成：

let color = CABasicAnimation(keyPath: "borderColor");
color.fromValue = UIColor.greenColor().CGColor;
color.toValue = UIColor.redColor().CGColor;
color.duration = 2;
color.repeatCount = 1;
sender.layer.addAnimation(color, forKey: "color and width");

然后事情开始按预期工作。