带有动画的文本字段四边形边框

Question

我想在用户单击内部时突出显示文本字段的四边边框，并在用户编辑结束时恢复原状。为了实现这一点，我在我的文本字段的 editingDidBegin 函数中有以下代码片段。

func pulseBorderColor() {
    let pulseAnimation = CABasicAnimation(keyPath: "borderColor")
    pulseAnimation.duration = 0.35
    pulseAnimation.fromValue = UIColor.green.cgColor
    pulseAnimation.toValue = UIColor(red: 252/255, green: 180/255, blue: 29/255, alpha: 1.0).cgColor
    pulseAnimation.fillMode = kCAFillModeForwards
    pulseAnimation.isRemovedOnCompletion = false
    pulseAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    nationalIdentityTextField.layer.sublayers![0].add(pulseAnimation,forKey: nil)
}

为了恢复我的文本字段颜色，我在文本字段 editingDidEnd 函数中有以下代码

func reversePulseBorderColor() {
    let pulseAnimation = CABasicAnimation(keyPath: "borderColor")
    pulseAnimation.duration = 0.35
    pulseAnimation.fromValue = UIColor(red: 252/255, green: 180/255, blue: 29/255, alpha: 1.0).cgColor
    pulseAnimation.toValue = UIColor.green.cgColor
    pulseAnimation.fillMode = kCAFillModeForwards
    pulseAnimation.isRemovedOnCompletion = false
    pulseAnimation.timingFunction = CAMediaTimingFunction(name:  kCAMediaTimingFunctionEaseInEaseOut)
    nationalIdentityTextField.layer.sublayers![0].add(pulseAnimation,forKey: nil)
}

然而，它并没有达到我想要的效果。可能是什么原因，我该如何解决？

Answer 1

我认为您应该将 keyPath 设置为相关文本字段的层，而不是 CABasicAnimation 并且您还需要将 borderWidth 设置为至少 1 才能使颜色可见。

下面是我尝试修改上面的代码并让它工作的方法

 func pulseBorderColor() {
        let pulseAnimation = CABasicAnimation(keyPath: nil)
        pulseAnimation.duration = 0.35
        pulseAnimation.fromValue = UIColor.green.cgColor
        pulseAnimation.toValue = UIColor(red: 252/255, green: 180/255, blue: 29/255, alpha: 1.0).cgColor
        pulseAnimation.fillMode = CAMediaTimingFillMode.forwards
        pulseAnimation.isRemovedOnCompletion = false
        pulseAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
        txtInput.layer.add(pulseAnimation, forKey: "borderColor")
    }

 func reversePulseBorderColor() {
        let pulseAnimation = CABasicAnimation(keyPath: nil)
        pulseAnimation.duration = 0.35
        pulseAnimation.fromValue = UIColor(red: 252/255, green: 180/255, blue: 29/255, alpha: 1.0).cgColor
        pulseAnimation.toValue = UIColor.green.cgColor
        pulseAnimation.fillMode = CAMediaTimingFillMode.forwards
        pulseAnimation.isRemovedOnCompletion = false
        pulseAnimation.timingFunction = CAMediaTimingFunction(name:  CAMediaTimingFunctionName.easeInEaseOut)
        txtInput.layer.add(pulseAnimation, forKey: "borderColor")
    }

要设置 borderWidth，您可以像这样在代码中设置它

txtInput.layer.borderWidth = 1

或在身份检查器中的用户定义的运行时属性中。

希望对您有所帮助。

带有动画的文本字段四边形边框

Text field four-sided border with animation

uitextfield

cabasicanimation

swift