CODEWITHSUNDEEP
iosswiftuiviewanimation
KarlHarnois
KarlHarnois

Reputation: 125

CGAffineTransformMakeScale on circular UIView animate as a square

PopUpMask is a circular UIView. I use it to mask a menu. When the user clicks on a button the menu "pop" aka become a bigger circle. When the user close it, the menu scale down to a smaller circle. The animation works when I scale it up but when I want to scale it down it transform to a square during animation. How can it scale down as a circle?

Here's the UIView scaled:

class PopUpMask: UIView {

    override init(frame: CGRect) {
        super.init(frame: CGRectMake(0, 0, 40, 40))
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func drawRect(rect: CGRect) {
        self.layer.cornerRadius = 20
    }
}

These are the methods called:

func unmaskToolbarBackground() {
    UIView.animateWithDuration(0.3, delay: 0.3, options: .CurveEaseOut, animations: {
        self.popUpMask.transform = CGAffineTransformMakeScale(12, 12)
        self.toolbarView.maskView? = self.popUpMask
        }, completion: nil)
  }

func maskToolbarBackground() {
    UIView.animateWithDuration(0.4, delay: 0, options: .CurveEaseOut, animations: {
        self.popUpMask.transform = CGAffineTransformMakeScale(0.02, 0.02)
        self.toolbarView.maskView? = self.popUpMask
        }, completion: nil)
}

Upvotes: 1

Views: 496

Answers (1)

Arthur Gevorkyan
Arthur Gevorkyan

Reputation: 2107

If I got it right, you should modify this:

override func drawRect(rect: CGRect) {
        self.layer.cornerRadius = 20
    }

to be like this:

override func drawRect(rect: CGRect) {
        self.layer.cornerRadius = 20
        self.layer.masksToBounds = true
    }

P.S. A little bit off the record: you no longer have to use self to access "own" methods in the Obj-C way unless you have a name collision.

Upvotes: 2

Related Questions