Swift: UIView.animate works unexpectedly

Question

I'm trying to make a "record button" which is a UIView with a gesture recognizer for my app. Right now I'm implementing the feature that when I click the view, I want to scale down the inner circle (the red one) however it ends up with an unexpected transformation. I use UIView.animate function to do this, and below is my relating code:

import UIKit

@IBDesignable
class RecordView: UIView {

    @IBInspectable
    var borderColor: UIColor = UIColor.clear {
        didSet {
            self.layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable
    var borderWidth: CGFloat = 20 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable
    var cornerRadius: CGFloat = 100 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }

    private var fillView = UIView()

    private func setupFillView() {
        let radius = (self.cornerRadius - self.borderWidth) * 0.95
        fillView.frame = CGRect(origin: CGPoint.zero, size: CGSize(width: radius * 2, height: radius * 2))
        fillView.center = CGPoint(x: self.bounds.midX, y: self.bounds.midY)
        fillView.layer.cornerRadius = radius
        fillView.backgroundColor = UIColor.red
        self.addSubview(fillView)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        setupFillView()
    }

    func didClick() {
        UIView.animate(withDuration: 1.0, animations: {
            self.fillView.transform = CGAffineTransform(scaleX: 0.6, y: 0.6)
        }) { (true) in
            print()
        }
    }

}

In my ViewController, I have:

@IBAction func recoreViewTapped(_ sender: UITapGestureRecognizer) {
        recordView.didClick()
    }

However it ends up with this effect: https://media.giphy.com/media/3ohjUQrWt7vfIxzBrG/giphy.gif. I'm a beginner and really don't know what's wrong with my code?

You have undefined behaviour.. You are applying a transformation to the view.. yet in layout subviews you are modifying its frame through the setupFillView function.. You CANNOT do that. Transformations already modify a view's frame.. For this reason, when using raw BasicAnimation, we always modify bounds and position on layers instead of frames. Next you are adding views in layout subviews.. that will cause recursion because the view will layout again.. — Brandon, Dec 03 '17 at 06:35
@Brandon Thanks for your reply. I still feel confused. I find little resouces about this topic and just assemble code from several tutorial s. Could you please tell me how to correct it? — user8822312, Dec 03 '17 at 06:46

Rob · Accepted Answer · 2017-12-03T22:26:55.177

The issue is that you're applying a transform, which is triggering the layoutSubviews again, so the resetting of the frame of fillView is being applied on the transformed view.

There are at least two options:

You could just transform the whole RecordButton view:

@IBDesignable
class RecordView: UIView {

    @IBInspectable
    var borderColor: UIColor = .clear { didSet { layer.borderColor = borderColor.cgColor } }

    @IBInspectable
    var borderWidth: CGFloat = 20 { didSet { layer.borderWidth = borderWidth; setNeedsLayout() } }

    private var fillView = UIView()

    override init(frame: CGRect) {
        super.init(frame: frame)

        configure()
    }

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

        configure()
    }

    private func configure() {
        fillView.backgroundColor = .red
        self.addSubview(fillView)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let radius = min(bounds.width, bounds.height) / 2  - borderWidth
        fillView.frame = CGRect(origin: CGPoint(x: bounds.midX - radius, y: bounds.midY - radius),
                                size: CGSize(width: radius * 2, height: radius * 2))
        fillView.layer.cornerRadius = radius
    }

    func didClick() {
        UIView.animate(withDuration: 1.0, animations: {
            self.transform = CGAffineTransform(scaleX: 0.6, y: 0.6)
        }, completion: { _ in
            print("completion", #function)
        })
    }

}

Or you could put the fillView inside a container, and then the transform of the fillView won't trigger the layoutSubviews of the RecordView:

@IBDesignable
class RecordView: UIView {

    @IBInspectable
    var borderColor: UIColor = .clear { didSet { layer.borderColor = borderColor.cgColor } }

    @IBInspectable
    var borderWidth: CGFloat = 20 { didSet { layer.borderWidth = borderWidth; setNeedsLayout() } }

    private var fillView = UIView()
    private var containerView = UIView()

    override init(frame: CGRect) {
        super.init(frame: frame)

        configure()
    }

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

        configure()
    }

    private func configure() {
        fillView.backgroundColor = .red
        self.addSubview(containerView)
        containerView.addSubview(fillView)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        containerView.frame = bounds

        let radius = min(bounds.width, bounds.height) / 2  - borderWidth
        fillView.frame = CGRect(origin: CGPoint(x: bounds.midX - radius, y: bounds.midY - radius),
                                size: CGSize(width: radius * 2, height: radius * 2))
        fillView.layer.cornerRadius = radius
    }

    func didClick() {
        UIView.animate(withDuration: 1.0, animations: {
            self.fillView.transform = CGAffineTransform(scaleX: 0.6, y: 0.6)
        }, completion: { _ in
            print("completion", #function)
        })
    }

}

By the way, a few other little things:

As you and I discussed elsewhere, the initial configuration (e.g. adding of the subview) should be called from init. But any frame/bounds contingent stuff should be called from layoutSubviews.
Completely unrelated, but the parameter passed to completion of UIView.animate(withDuration:animations:completion:) is a Boolean indicating whether the animation is finished or not. If you're not going to use that Boolean, you should use _, not (true).

Longer term, I'd suggest moving the "touches"/gesture related stuff into the RecordButton. I can easily imagine you getting fancier: e.g. one animation as you "touch down" (shrink the button to render the "depress" vibe) and another for "lift up" (e.g. unshrink the button and convert the round "record" button to a square "stop" button). You can then have the button inform the view controller when something significant happens (e.g. record or stop recognized), but reduces complexity from the view controller itself.

protocol RecordViewDelegate: class {
    func didTapRecord()
    func didTapStop()
}

@IBDesignable
class RecordView: UIView {

    @IBInspectable
    var borderColor: UIColor = .clear { didSet { layer.borderColor = borderColor.cgColor } }

    @IBInspectable
    var borderWidth: CGFloat = 20 { didSet { layer.borderWidth = borderWidth; setNeedsLayout() } }

    weak var delegate: RecordViewDelegate?

    var isRecordButton = true

    private var fillView = UIView()
    private var containerView = UIView()

    override init(frame: CGRect) {
        super.init(frame: frame)

        configure()
    }

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

        configure()
    }

    private func configure() {
        fillView.backgroundColor = .red
        self.addSubview(containerView)
        containerView.addSubview(fillView)
    }

    private var radius: CGFloat { return min(bounds.width, bounds.height) / 2  - borderWidth }

    override func layoutSubviews() {
        super.layoutSubviews()

        containerView.frame = bounds

        fillView.frame = CGRect(origin: CGPoint(x: bounds.midX - radius, y: bounds.midY - radius),
                                size: CGSize(width: radius * 2, height: radius * 2))
        fillView.layer.cornerRadius = isRecordButton ? radius : 0
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        UIView.animate(withDuration: 0.25) {
            self.fillView.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
            self.fillView.backgroundColor = UIColor(red: 0.75, green: 0, blue: 0, alpha: 1)
        }
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        if let touch = touches.first, containerView.bounds.contains(touch.location(in: containerView)) {
            if isRecordButton {
                delegate?.didTapRecord()
            } else {
                delegate?.didTapStop()
            }
            isRecordButton = !isRecordButton
        }

        UIView.animate(withDuration: 0.25) {
            self.fillView.transform = .identity
            self.fillView.backgroundColor = UIColor.red
            self.fillView.layer.cornerRadius = self.isRecordButton ? self.radius : 0
        }

    }
}

That yields:

when I implement it and even copy the code directly, I can't see layer.cornerRadius get animated. Then in [another thread](https://stackoverflow.com/questions/5948167/uiview-animatewithduration-doesnt-animate-cornerradius-variation), someone says core animation should be used to in order to animate cornerRadius. How could you realize this with UIKit? Or something else missed in my code? — user8822312, Dec 05 '17 at 06:07
It's animatable in iOS 11, but in earlier versions, you have to use CoreAnimation or other techniques. — Rob, Dec 05 '17 at 06:27

Swift: UIView.animate works unexpectedly

1 Answers1

Linked