Unable to minimize subview alongside mainView during animation

Question

I have two views, videoView (which is the mainView) and subVideoView (which is the subView of mainView).

I am trying to minimize both views using animation at the same time, as shown in the below code. I am able to minimize the videoView (i.e mainView) and not the subVideoView.

However, when I hide code for minimising videoView (i.e mainView), I am able to minimise the subVideoView.

I believe it has to do something with the way I am animating.

Can some one please advice how I can minimise both views (proportionally) with animation at the same time and end up with the below result.

RESULTS OF EXISTING CODE

func minimiseOrMaximiseViews(animationType: String){


        UIView.animate(withDuration: 0.5, delay: 0, options: [],

            animations: { [unowned self] in  
                switch animationType {
                case "minimiseView" :

                    // Minimising subVideoView

                    self.subVideoView.frame =   CGRect(x:       self.mainScreenWidth - self.minSubVideoViewWidth - self.padding,
                                                       y:       self.mainScreenHeight - self.minSubVideoViewHeight - self.padding,
                                                       width:   self.minSubVideoViewWidth,
                                                       height:  self.minSubVideoViewHeight)

                    // Minimising self i.e videoView

                    self.frame = CGRect(x:      self.mainScreenWidth - self.videoViewWidth - self.padding,
                                        y:      self.mainScreenHeight - self.videoViewHeight - self.padding,
                                        width:  self.videoViewWidth,
                                        height: self.videoViewHeight)

                    self.layoutIfNeeded()

                case "maximiseView":

                    // Maximising videoView

                    self.frame = CGRect(x: 0, y: 0, width: self.mainScreenSize.width, height: self.mainScreenSize.height)

                    // Maximising subVideoView

                    self.subVideoView.frame =   CGRect(x:       self.mainScreenWidth - self.maxSubVideoViewWidth - self.padding,
                                                       y:       self.mainScreenHeight - self.maxSubVideoViewHeight - self.padding - self.buttonStackViewBottomPadding - buttonStackViewHeight,
                                                       width:   self.maxSubVideoViewWidth,
                                                       height:  self.maxSubVideoViewHeight) 
                default:
                    break
}

Answer 1

As per your requirement add subViews in mainView and set

mainView.clipsToBounds = true

and In the minimiseOrMaximiseViews method you just need to manage Y axis of mainView for show and hide.

Answer 2

I could minimise both views simultaneously using animation, when I've set both views (videoView and subVideoView) as subViews of window i.e UIApplication.shared.keywindow.

Answer 3

Unless I'm missing something, this kind of animation is much more easily achieved by animating the transform property of the videoView (the main view). You will need to concatenate scaling and translation transforms for that, because scaling is by default applied to a view's center.

The trick is that applying a transform to a view affects all its subviews automatically, e.g. applying a scaling transform to a view scales both the view and all its subviews.

To make a reverse animation just set videoView.transform = CGAffineTransformIdentity inside an animation block.

Caveat: You should be careful, though, with the frame property of a transformed view. The frame property is synthetic and is derived from bounds, center and transform. This means that setting a view's frame resets its transform property. In other words, if you manipulate your views using transform, you most likely want to avoid setting their frames directly.