Transform UIView within bounds

Question

I am trying to make a view transform and kind of have a circle effect until it reaches certain points then it just fills a rectangle. This is for a material design project I am working on. All the code is in Swift 2.0 on an iOS 8 or above device.

func helloWorld(sender: UIButton) {
    let point = sender.frame.origin
    let rippleViewInitFrame: CGRect = CGRect(x: point.x, y: point.y, width: 4, height: 4)
    let rippleView: UIView = UIView(frame: rippleViewInitFrame)
    rippleView.backgroundColor = UIColor.MDColor.blue
    let bounds: CGRect = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height)
    rippleView.layer.masksToBounds = true
    rippleView.layer.cornerRadius = 2
    self.view.addSubview(rippleView)
    UIView.animateWithDuration(0.5, delay: 0.0, options: .CurveEaseInOut, animations: {
        rippleView.transform = CGAffineTransformMakeScale(200.0, 200.0)
        rippleView.bounds = bounds

        }, completion: {
            finished in
            print(rippleView.frame.origin.x)
    })

}

Currently the view just grows beyond the size of the screen.

The print statement returns -37176 instead of say 0. I want it to fill the screen and nothing more.

Answer 1

If you want it to fill a rectangle.

1) create a rectangular container UIView.

2) add your rippleView as a subview to this rectangular uiview.

set the clipsToBounds property to yes of your container view. and just do the animation.

let rectView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100));
rectView.backgroundColor = UIColor.redColor()

// initialRippleView
let rippleView = UIView(frame: CGRect(x: 15, y: 15, width: 2, height: 2));
rippleView.backgroundColor = UIColor.whiteColor()
rippleView.cornerRadius = rippleView.width / 2;

rectView.addSubview(rippleView);

rectView.clipsToBounds = true;
UIView.animateWithDuration(5) { () -> Void in
    rippleView.transform = CGAffineTransformMakeScale(100, 100);
}

Try in playground.

import UIKit
import XCPlayground


// the main View
let iPhone = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 568));
iPhone.backgroundColor = UIColor.greenColor();

// the rect View that will be the bounds of the animation
let rectView = UIView(frame: CGRect(x: 0, y: 0, width: 150, height: 150));
rectView.backgroundColor = UIColor.redColor()
rectView.center = iPhone.center;
// initialRippleView
let rippleView = UIView(frame: CGRect(x: 15, y: 15, width: 2, height: 2));
rippleView.layer.cornerRadius = 1;

rippleView.backgroundColor = UIColor.whiteColor()

iPhone.addSubview(rectView);
rectView.addSubview(rippleView);
// this property clips the drawings of subview to be clipped to the bounds of rectView. 
rectView.clipsToBounds = true;
UIView.animateWithDuration(5) { () -> Void in
    // you may need to calculate the right scale factor
    rippleView.transform = CGAffineTransformMakeScale(200, 200);
}

// Playground stuff
XCPShowView("Container View", view: iPhone);

• Copy this code in a playground File
• Show the Assistant editor
• Press play (in the left bottom corner)