Линейная анимация при редактировании UITextField

Question

Я пытаюсь добавить анимацию к границе 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


}

}

И вот результат, который я получаю:

И вот что мне нужно увидеть: