Labelの下段にアニメーションさせながら下線を引きたい

Question

Labelの下段にアニメーションさせながら下線を引きたい

以下のソースコードでLabelの下段に左端から右端までアニメーションさせながら下線を引いており、ここまで実装できています。

ただその後で、今度は逆に右端から左端まで同じくアニメーションさせながら下線を縮小させていき、最後は線が消えるような処理をしたいのですが、この実装方法がわからず困っております。

ちなみに最初の左端から右端へアニメーションさせながら下線を引く処理は、以下のように実装しています。

該当のソースコード

let uiPath = UIBezierPath()
uiPath.move(to: CGPoint(x: 0, y: labelView.frame.height))
uiPath.addLine(to: CGPoint(x: labelView.frame.width, y: view.frame.height))
        
let shapeLayer = CAShapeLayer()
shapeLayer.strokeColor = UIColor.green.cgColor
shapeLayer.path = uiPath.cgPath
shapeLayer.lineWidth = 3.0
        
let anim = CABasicAnimation(keyPath: "strokeEnd")
anim.duration = 0.1
anim.fromValue = 0.0
anim.toValue = 1.0
shapeLayer.add(anim, forKey: "strokeEnd")
        
labelView.layer.addSublayer(shapeLayer)

補足情報

実現したい動きは以下のイメージになります。

よろしくお願いします。

Answer 1

右端まで行ったらすぐにそのまま左端まで戻って消える、ということですね？
CABasicAnimationをCAKeyframeAnimationに置き換えたらいいと思います。

let anim  = CAKeyframeAnimation(keyPath: "strokeEnd")
anim.values = [0.0, 1.0, 0.0]
anim.keyTimes = [0, 0.5, 1]
anim.duration = 0.2
shapeLayer.add(anim, forKey: "strokeEnd")

Comments

[Pooh7]

回答いただきありがとうございます！少し説明不足でした、申し訳ありません。
正確には、左から右、右から左が連続して起こるわけではなく、
あるボタンを押下したら左から右に線が引かれて、次に他のボタンを押下したら今度は同じ線を右から左に戻すという処理のイメージになります。