Issues with animation in swift - ios

Question

I am trying to make some buttons look like they are growing. Could anybody tell my why this code only makes the buttons appear after the while loop completes?
var size = CGFloat(5)
let b1 = UIButton()
b1.backgroundColor = UIColor(red: 200, green: 0, blue: 0, alpha: 100)
b1.setTitle("", forState: .Normal)
b1.setTitleColor(UIColor(red: 255, green: 255, blue: 255, alpha: 100), forState: .Normal)
b1.frame = CGRectMake((view.frame.width/2)-105, (view.frame.height/2-105), CGFloat(size), CGFloat(size))
b1.titleLabel?.font = UIFont(name: "Helvetica", size: 24)
let b2 = UIButton()
b2.backgroundColor = UIColor(red: 0, green: 0, blue: 200, alpha: 100)
b2.setTitle("", forState: .Normal)
b2.setTitleColor(UIColor(red: 255, green: 255, blue: 255, alpha: 100), forState: .Normal)
b2.frame = CGRectMake((view.frame.width/2)+5, (view.frame.height/2)-105, CGFloat(size), CGFloat(size))
b2.titleLabel?.font = UIFont(name: "Helvetica", size: 24)
let b3 = UIButton()
b3.backgroundColor = UIColor(red: 0, green: 200, blue: 0, alpha: 100)
b3.setTitle("", forState: .Normal)
b3.setTitleColor(UIColor(red: 255, green: 255, blue: 255, alpha: 100), forState: .Normal)
b3.frame = CGRectMake((view.frame.width/2)-105, view.frame.height/2+5, CGFloat(size), CGFloat(size))
b3.titleLabel?.font = UIFont(name: "Helvetica", size: 24)
let b4 = UIButton()
b4.backgroundColor = UIColor(red: 200, green: 200, blue: 0, alpha: 100)
b4.setTitle("", forState: .Normal)
b4.setTitleColor(UIColor(red: 255, green: 255, blue: 255, alpha: 100), forState: .Normal)
b4.frame = CGRectMake((view.frame.width/2)+5, view.frame.height/2+5, CGFloat(size), CGFloat(size))
b4.titleLabel?.font = UIFont(name: "Helvetica", size: 24)
while (size < 100) {
size+=1
b1.frame = CGRectMake(CGFloat(view.frame.width/2)-105/*+CGFloat(100-size)*/, CGFloat(view.frame.height/2-105)+CGFloat(100-size), CGFloat(size), CGFloat(size))
b2.frame = CGRectMake(CGFloat(view.frame.width/2)+5/*+CGFloat(100-size)*/, (view.frame.height/2)-105+(100-size), CGFloat(size), CGFloat(size))
b3.frame = CGRectMake(CGFloat(view.frame.width/2)-105/*+CGFloat(100-size)*/, view.frame.height/2+5+(100-size), CGFloat(size), CGFloat(size))
b4.frame = CGRectMake(CGFloat(view.frame.width/2)+5/*+CGFloat(100-size)*/, view.frame.height/2+5+(100-size), CGFloat(size), CGFloat(size))
view.addSubview(b1)
view.addSubview(b2)
view.addSubview(b3)
view.addSubview(b4)
}'

Answer 1

UI Changes don't take effect until after your code returns and the program visits the event loop. All the UI changes you make in a function call get saved up and then applied on the next pass through the event loop.
Your while loop runs all the way to the end, and THEN the view changes are rendered to the screen, all at once.
As JYeh says in his answer, you should use UIView animation methods in the family animateWithDuration.

Answer 2

I suggest reading up on how to use a UIView Animation: https://www.raywenderlich.com/76200/basic-uiview-animation-swift-tutorial
Instead of the while loop, use a UIView.animateWithDuration function call. The reason the buttons are just appearing is because the while loop finishes so fast that you can't see anything happening, and while loops shouldn't be used to do animation.

Answer 3

How about this?
// make an array containing 4 CGRect values:
var frames = Array<CGRect>(count: 4, repeatedValue: CGRectNull)
// divide view into 4 parts: left and right, then divide left and right into 2 parts each, top and bottom
let (left, right) = view.bounds.divide( view.bounds.width * 0.5, fromEdge: .MinXEdge )
(frames[0], frames[2]) = left.divide( view.bounds.height * 0.5, fromEdge:.MinYEdge)
(frames[1], frames[3]) = right.divide( view.bounds.height * 0.5, fromEdge:.MinYEdge)
// iterate over the range 0 to 3
(0...3).forEach { // this block (function) has the current number as its input
// I didn't name the input, so Swift names it $0
let b = UIButton( type: .System ) // make a standard button
b.frame = frames[ $0 ] // give the button a frame
/*
...Add code to customize your button `b` here
*/
view.addSubview( b ) // add button to our view
b.layer.addAnimation({ // add an animation to the button's layer.
// We will scale to current size from 5% size:
let anim = CABasicAnimation( keyPath: "transform" )
anim.fromValue = NSValue( CATransform3D: CATransform3DMakeScale( 0.05, 0.05, 1.0))
anim.duration = 5.0 // animation takes 5.0 s, just for demo purposes
return anim // the created animation, to be added
}(), forKey: nil)
}