UIView animate usingSpringWithDamping - core-animation

Question

i created a shaperLayer, and the layer's path is provided by a bezierPath. the code as follow:
let shapeLayer = CAShapeLayer()
let bezierPath = UIBezierPath()
let bezierPath1 = UIBezierPath()
shapeLayer.fillColor = UIColor.cyan.cgColor
bezierPath.move(to: CGPoint.zero)
bezierPath.addLine(to: CGPoint(x: 0, y: 50))
bezierPath.addCurve(to: CGPoint(x: 140.935, y: 50), controlPoint1: CGPoint(x: 0, y: 50), controlPoint2: CGPoint(x: 87.340, y: 50))
bezierPath.addCurve(to: CGPoint(x: 250.578, y: 50), controlPoint1: CGPoint(x: 198.5, y: 50), controlPoint2: CGPoint(x: 250.578, y: 50))
bezierPath.addCurve(to: CGPoint(x: 375, y: 50), controlPoint1: CGPoint(x: 250.57, y: 50), controlPoint2: CGPoint(x: 299.064, y: 50))
bezierPath.addLine(to: CGPoint(x: 375, y: 0))
bezierPath.close()
bezierPath1.move(to: CGPoint.zero)
bezierPath1.addLine(to: CGPoint(x: 0, y: 81.5))
bezierPath1.addCurve(to: CGPoint(x: 140.935, y: 139.099), controlPoint1: CGPoint(x: 0, y: 81.5), controlPoint2: CGPoint(x: 87.340, y: 81.5))
bezierPath1.addCurve(to: CGPoint(x: 250.578, y: 139.09), controlPoint1: CGPoint(x: 198.5, y: 203.90), controlPoint2: CGPoint(x: 250.578, y: 139.09))
bezierPath1.addCurve(to: CGPoint(x: 375, y: 81.5), controlPoint1: CGPoint(x: 250.57, y: 139.09), controlPoint2: CGPoint(x: 299.064, y: 81.5))
bezierPath1.addLine(to: CGPoint(x: 375, y: 0))
bezierPath1.close()
shapeLayer.path = bezierPath1.cgPath
self.view.layer.addSublayer(shapeLayer)
DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0, options: [], animations: {
shapeLayer.path = bezierPath.cgPath
}) { (finish) in
}
}
but the animation is not my wanted. i expected effect is like this:
good effect
the actual effect is like this :
real effect
i don't know why. it did not have bounce effect. i thik i missing something important, and Is there anyone could help me?

Answer 1

You need to animate the path using Core Animation, not the UIView animation block you used. The other issue, is you can't do spring animations for CALayer path value.. so, you'll have to either use keyframe animation (approximate the bounce with keyframes), or accept a normal easing type.
Example:
class ViewController: UIViewController {
let shapeLayer = CAShapeLayer()
let bezierPath = UIBezierPath()
let bezierPath1 = UIBezierPath()
override func viewDidLoad() {
super.viewDidLoad()
shapeLayer.fillColor = UIColor.cyan.cgColor
bezierPath.move(to: CGPoint.zero)
bezierPath.addLine(to: CGPoint(x: 0, y: 50))
bezierPath.addCurve(to: CGPoint(x: 140.935, y: 50), controlPoint1: CGPoint(x: 0, y: 50), controlPoint2: CGPoint(x: 87.340, y: 50))
bezierPath.addCurve(to: CGPoint(x: 250.578, y: 50), controlPoint1: CGPoint(x: 198.5, y: 50), controlPoint2: CGPoint(x: 250.578, y: 50))
bezierPath.addCurve(to: CGPoint(x: 375, y: 50), controlPoint1: CGPoint(x: 250.57, y: 50), controlPoint2: CGPoint(x: 299.064, y: 50))
bezierPath.addLine(to: CGPoint(x: 375, y: 0))
bezierPath.close()
bezierPath1.move(to: CGPoint.zero)
bezierPath1.addLine(to: CGPoint(x: 0, y: 81.5))
bezierPath1.addCurve(to: CGPoint(x: 140.935, y: 139.099), controlPoint1: CGPoint(x: 0, y: 81.5), controlPoint2: CGPoint(x: 87.340, y: 81.5))
bezierPath1.addCurve(to: CGPoint(x: 250.578, y: 139.09), controlPoint1: CGPoint(x: 198.5, y: 203.90), controlPoint2: CGPoint(x: 250.578, y: 139.09))
bezierPath1.addCurve(to: CGPoint(x: 375, y: 81.5), controlPoint1: CGPoint(x: 250.57, y: 139.09), controlPoint2: CGPoint(x: 299.064, y: 81.5))
bezierPath1.addLine(to: CGPoint(x: 375, y: 0))
bezierPath1.close()
shapeLayer.path = bezierPath1.cgPath
view.layer.addSublayer(shapeLayer)
animateThing()
}
func animateThing() {
guard shapeLayer.animation(forKey: "path") == nil else {
return
}
let myAnimation = CABasicAnimation(keyPath: "path")
myAnimation.duration = 0.5
myAnimation.fromValue = bezierPath1.cgPath
myAnimation.toValue = bezierPath.cgPath
myAnimation.isRemovedOnCompletion = true
myAnimation.fillMode = kCAFillModeBoth
shapeLayer.add(myAnimation, forKey: "path")
shapeLayer.path = bezierPath.cgPath
}
}