Swift 编辑UITextField时的线条动画

我试图在用户编辑时将动画添加到UITextField的边框。其想法是在编辑第一个文本字段后，在登录页面中显示线条动画，然后在用户切换到下一个文本字段后，线条应移动到下面的文本字段。我做了一次尝试，但没有达到我预期的效果。以下是我正在使用的代码：

class ViewController: UIViewController, UITextFieldDelegate {

@IBOutlet weak var verticSpace: NSLayoutConstraint!
@IBOutlet weak var usernameTxtField: UITextField!
@IBOutlet weak var passwordTxtField: UITextField!

weak var shapeLayer: CAShapeLayer?

let path = UIBezierPath()

let shapeLayerNew = CAShapeLayer()

override func viewDidLoad() {
    super.viewDidLoad()

    usernameTxtField.delegate = self

    passwordTxtField.delegate = self

}



func textFieldDidBeginEditing(_ textField: UITextField) {
    let path = UIBezierPath()

    if textField == usernameTxtField {
        if textField.text == "" {

            self.startMyLine()
        }

    }

    if passwordTxtField.isFirstResponder {


        let path2 = UIBezierPath()


        path2.move(to: CGPoint(x: usernameTxtField.frame.width, y: usernameTxtField.frame.height - shapeLayerNew.lineWidth))
        path2.addLine(to: CGPoint(x: usernameTxtField.frame.width, y: (usernameTxtField.frame.height - shapeLayerNew.lineWidth) + passwordTxtField.frame.height + verticSpace.constant))
        path2.addLine(to: CGPoint(x: 0, y: (usernameTxtField.frame.height - shapeLayerNew.lineWidth) + passwordTxtField.frame.height + verticSpace.constant))


        let combinedPath = path.cgPath.mutableCopy()
        combinedPath?.addPath(path2.cgPath)
        shapeLayerNew.path = path2.cgPath


        let startAnimation = CABasicAnimation(keyPath: "strokeStart")
        startAnimation.fromValue = 0
        startAnimation.toValue = 0.8

        let endAnimation = CABasicAnimation(keyPath: "strokeEnd")
        endAnimation.fromValue = 0.2
        endAnimation.toValue = 1.0

        let animation = CAAnimationGroup()
        animation.animations = [startAnimation, endAnimation]
        animation.duration = 2
        shapeLayerNew.add(animation, forKey: "MyAnimation")


    }



}

func startMyLine() {

    self.shapeLayer?.removeFromSuperlayer()

    // create whatever path you want


    shapeLayerNew.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
    shapeLayerNew.strokeColor = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1).cgColor
    shapeLayerNew.lineWidth = 4


    path.move(to: CGPoint(x: 0, y: usernameTxtField.frame.height - shapeLayerNew.lineWidth))
    path.addLine(to: CGPoint(x: usernameTxtField.frame.width, y: usernameTxtField.frame.height - shapeLayerNew.lineWidth))



    // create shape layer for that path



    shapeLayerNew.path = path.cgPath

    // animate it

    usernameTxtField.layer.addSublayer(shapeLayerNew)

    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.duration = 2
    shapeLayerNew.add(animation, forKey: "MyAnimation")

    // save shape layer

    self.shapeLayer = shapeLayerNew


}

}

这就是我得到的结果：

这就是我需要看到的：

---

第二张照片来自苹果商店的哪个应用程序，或者这是你的原型这是我在Behance上找到的一位了不起的设计师的作品。他的名字叫雅库布·安塔利克。如果你能帮助我工作，我将不胜感激。你会尽快为我更新吗？