Auto Resizing CAShapeLayer while Animating UIView

Question

Apologies, if this question has already been answered elsewhere. I tried searching in multiple places but could not find a good solution. I am a beginner to Swift development.

As per the code below, I am creating a SubView, adding an oval ShapeLayer to it and then animating the SubView by moving its center and increasing its size.

The SubView is animating correctly, however the ShapeLayer inside the SubView is not changing size. I would like the Red Oval to increase in size, similar to the SubView. I would really appreciate it if could let me know what I am missing.

class playGroundView: UIView {



override func draw(_ rect: CGRect) {
    // Add a blue rectangle as subview
    let startFrame = CGRect(x: self.frame.midX, y: self.frame.midY, width: 10, height: 20)
    self.addSubview(UIView(frame: startFrame))
    self.subviews[0].backgroundColor = UIColor.blue

    // Create red oval shape that is bounded by blue rectangle
    // Add red oval shape as sub-layer to blue rectangle view
    let subView = self.subviews[0]
    let ovalSymbol = UIBezierPath(ovalIn: subView.bounds)
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = ovalSymbol.cgPath
    shapeLayer.fillColor = UIColor.red.cgColor
    shapeLayer.strokeColor = UIColor.red.cgColor
    subView.layer.addSublayer(shapeLayer)

    // Animate movement and increase in size of blue rectangle view
    UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 3, delay: 0, options: [], animations: {
        let endFrame = CGRect(x:self.frame.midX - 50, y:self.frame.midY - 50, width: 20, height: 40)
        self.subviews[0].frame = endFrame
        self.setNeedsLayout()
        self.layoutIfNeeded()
    })

}
}

Image of Incorrect Output

Answer 1

Ok, after spending more time researching and getting a better understanding of what goes inside a ViewController and UIView class, entering the following in those classes works for me:

Inside class ViewController: UIViewController

override func viewDidLoad() {
    super.viewDidLoad()
    let startFrame = CGRect(x: playGround.frame.midX, y: playGround.frame.midY, width: 30, height: 60)
    cardSubView = cardView(frame: startFrame)
    playGround.addSubview(cardSubView!)

    let endFrame = CGRect(x: playGround.frame.midX - 100, y: playGround.frame.midY - 100, width: 60, height: 120)
    UIViewPropertyAnimator.runningPropertyAnimator(withDuration: 10, delay: 0, options: [], animations: {
        self.cardSubView?.frame = endFrame
        self.cardSubView?.layoutIfNeeded()
    })
}

Inside a UIView class:

class cardView: UIView {

override func draw(_ rect: CGRect) {

    let backGroundPath = UIBezierPath(rect: rect)
    UIColor.blue.setFill()
    backGroundPath.fill()

    let ovalSymbol = UIBezierPath(ovalIn: rect)
    UIColor.red.setFill()
    ovalSymbol.fill()

}    

}

This still results in a weird frame shadowing towards the end of the animation in my iPhone simulator, however when running on device there is no issue.