Search code examples
iosswift

Make circular UIView bigger


I'm trying to make a circular UIView bigger. How can I do that using swift? Here's my code.

import Foundation
import UIKit


class FirstViewController: UIViewController {
    private let circleView: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor(red: 0.63, green: 0.14, blue: 0.92, alpha: 1.00)
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()
    
    private let imageView: UIImageView = {
        let imageView = UIImageView()
        imageView.image = UIImage(named: "logo-purple") // Example image
        imageView.contentMode = .scaleAspectFit
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        setupViews()
        animateCircleView()
    }
    
    private func setupViews() {
        view.addSubview(circleView)
        
        view.addSubview(imageView)
        
        // Constraints for the circleView (start small in the center)
        NSLayoutConstraint.activate([
            circleView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            circleView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            circleView.widthAnchor.constraint(equalToConstant: 100),
            circleView.heightAnchor.constraint(equalToConstant: 100)
        ])
        
        // Constraints for the imageView (centered in the screen)
        NSLayoutConstraint.activate([
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            imageView.widthAnchor.constraint(equalToConstant: 128),
            imageView.heightAnchor.constraint(equalToConstant: 128)
        ])
        circleView.clipsToBounds = true
    }
    
    private func animateCircleView() {
        // Trigger the animation after the view has appeared
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            UIView.animate(withDuration: 2.0, delay: 0, options: .curveEaseOut, animations: {
                // Update the circleView to grow larger than the screen
                self.circleView.layer.cornerRadius = self.circleView.frame.size.width/2
                self.circleView.transform = CGAffineTransform(scaleX: 10, y: 10)
            }, completion: { _ in
                self.performSegue(withIdentifier: "toWelcome", sender: self)
            })
        }
    }
}

Solution

  • You don't need to animate the .cornerRadius

    In viewDidLoad() you're constraining the width/height of circleView to 100.0, so set the corner-radius to 1/2 of that:

    circleView.layer.cornerRadius = 50.0
    

    Now the animation block consists only of the layer scale:

            UIView.animate(withDuration: 2.0, delay: 0, options: .curveEaseOut, animations: {
                self.circleView.transform = CGAffineTransform(scaleX: 10, y: 10)
            }, completion: { _ in
                print("animation done!")
                self.performSegue(withIdentifier: "toWelcome", sender: self)
            })