image disappears after keyframe animation

Question

I have an animation where a line is drawn and then with that another image moves. The animation works good but as the animation completes the image disappears from the view. The image should stay after completion of the animation. My code for the animation:

private func addPlaneAnimation() {
    let image = UIImageView(frame: CGRect(x: -30, y: view.height*0.8, width: 30, height: 30))
    image.image = R.image.plane()
    view.addSubview(image)
    
    let path = UIBezierPath()
    path.move(to: image.center)
    path.addLine(to: CGPoint(x: (view.width*0.85), y: (view.height*0.40)))
    
    let shapeLayer = CAShapeLayer()
    shapeLayer.fillColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0).cgColor
    shapeLayer.strokeColor = R.color.Purple()?.cgColor
    shapeLayer.lineWidth = 3
    shapeLayer.path = path.cgPath
    view.layer.addSublayer(shapeLayer)
    
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.duration = 4
    animation.beginTime = CACurrentMediaTime() + 0.2
    animation.isRemovedOnCompletion = false
    
    let pathAnimation = CAKeyframeAnimation(keyPath: "position")
    pathAnimation.path = path.cgPath
    pathAnimation.duration = 4
    pathAnimation.autoreverses = false
    pathAnimation.isRemovedOnCompletion = false
    
    shapeLayer.add(animation, forKey: "MyAnimation")
    image.layer.add(pathAnimation, forKey: "position")
    view.bringSubviewToFront(cardBarcode)
}

Can someone please help me here?

Answer 1

Just add two more properties.

For strokeEnd animation

animation.fillMode = CAMediaTimingFillMode.backwards

and for pathAnimation

pathAnimation.fillMode = CAMediaTimingFillMode.forwards