Custom UIView class is not animating as expected

Question

I have a custom UIView class that creates a square with a red background and I'm trying to get a green square slide on top of it from the left. I have a button from the main view that brings me to the screen above but the green screen doesn't animate over it. It just appears at the end result. I do know that I am creating these shapes when I change the initial width of the green square but no indication of an animation.

MainViewController.swift

private func configureAnimatedButton() {
    //let sampleAnimatedButton
    let sampleAnimatedButton = AnimatedButtonView()
    sampleAnimatedButton.center = CGPoint(x: self.view.frame.size.width  / 2,
                                          y: self.view.frame.size.height / 2)
    self.view.addSubview(sampleAnimatedButton)
    sampleAnimatedButton.animateMiddleLayer() 
}

AnimatedButton.swift

import Foundation
import UIKit

public class AnimatedButtonView: UIView {
      //initWithFrame to init view from code
    let movingLayer = UIView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    //initWithCode to init view from xib or storyboard
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
    
    //common func to init our view
    private func setupView() {
        //backgroundColor = .red
        self.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
        self.backgroundColor = .red
        movingLayer.frame = CGRect(x: self.frame.maxX, y: self.frame.minY, width: 0, height: 300)
        movingLayer.backgroundColor = .green
        self.addSubview(movingLayer)
    }
    
    public func animateMiddleLayer() {
        UIView.animate(withDuration: 10.0, delay: 1.2, options: .curveEaseOut, animations: {
            self.layoutIfNeeded()
            var grayLayerTopFrame = self.movingLayer.frame
            grayLayerTopFrame.origin.x = 0
            grayLayerTopFrame.size.width += 300
            self.movingLayer.frame = grayLayerTopFrame
            self.layoutIfNeeded()
        }, completion: { finished in
            print("animated")
        })
    }
}

Answer 1

You should move grayLayerTopFrame outside the UIView.animate() , before it starts. Also, you don't need layoutIfNeeded if you're just animating the frame (you use it when you have constraints).

var grayLayerTopFrame = self.movingLayer.frame
grayLayerTopFrame.origin.x = 0
grayLayerTopFrame.size.width += 300
UIView.animate(withDuration: 10.0, delay: 1.2, options: .curveEaseOut, animations: {
    self.layoutIfNeeded()
    self.movingLayer.frame = grayLayerTopFrame
    self.layoutIfNeeded()
}, completion: { finished in
    print("animated")
})

Also, make sure you don't call it in viewDidLoad() -- at that time, the views aren't laid out yet.