Circular UIView scale animation goes back to square sometimes

Question

I put a UIView on center of the screen with Autolayout. This UIView is a square sized to be 15% of screen width. Then on my controller I add the cornerRadius :

override func viewDidLayoutSubviews() {
    circle.layer.cornerRadius = circle.frame.size.width / 2.0
}

Then when user click on a button, the circular view is scaling down with a first animation.

UIView.animateWithDuration(0.4, delay: 0.1, options: .CurveEaseIn, animations: { () -> Void in
    self.circle.alpha = 0.0
    self.circle.transform = CGAffineTransformMakeScale(0.01, 0.01)
}) { (finished) -> Void in
    scaleUp()
}

private func scaleUp() {
    UIView.animateWithDuration(0.5, delay: 0.0, options: .CurveEaseInOut, animations: { () -> Void in
        self.circle.alpha = 1.0
        self.circle.transform = CGAffineTransformIdentity
    }) { (finished) -> Void in

    }
}

Sometimes the scale down animation doesn't work properly. Before starting the cornerRadius is removed and my UIView become a square. But sometimes my animation works well and the circle scale down animation is OK.

Moreover the scale up animation seems to work well all the time.

I don't understand why the scale down animation isn't working all the time.

Any idea?

Thanks

vacawama vacawama · Accepted Answer · 2016-07-17T10:07:18

When animating with Auto Layout enabled, it is usually a good idea to call layoutIfNeeded on your view before starting the animation and again in the loop.

override func viewDidLayoutSubviews() {
    circle.layer.cornerRadius = circle.frame.size.width / 2.0
}

@IBAction func scaleDownUp(sender: AnyObject) {
    self.circle.layoutIfNeeded()
    UIView.animateWithDuration(0.4, delay: 0.1, options: .CurveEaseIn, animations: { () -> Void in
        self.circle.alpha = 0.0
        self.circle.transform = CGAffineTransformMakeScale(0.01, 0.01)
        self.circle.layoutIfNeeded()
    }) { (finished) -> Void in
        self.scaleUp()
    }
}

private func scaleUp() {
    self.circle.layoutIfNeeded()
    UIView.animateWithDuration(0.5, delay: 0.0, options: .CurveEaseInOut, animations: {
        self.circle.alpha = 1.0
        self.circle.transform = CGAffineTransformIdentity
        self.circle.layoutIfNeeded()
    }) { (finished) -> Void in

    }
}

Circular UIView scale animation goes back to square sometimes

2 Answers