Animate maskedCorners in Swift when some corners are always rounded?

Question

I have a rect. Top corners are always rounded. Bottom corners have animation - rounded or not.

Previous my solution was to split this rect into top and bottom rects (top one is constant, bottom one is animated). The reason is maskedCorners is not animated - you can animate cornerRadius only.

But now I need to add a colored border around the rect which should be animated too. So my solution is not suitable anymore. How to solve this issue?

Answer 1

You can do this by animating a CGPath for the view's layer, and constructing the path by adding arcs at the corners for individual radii.

Here's an example class:

class AnimCornerView: UIView  {
    
    public var fillColor: UIColor = .white
    public var borderColor: UIColor = .clear
    public var borderWidth: CGFloat = 0.0

    private var _tl: CGFloat = 0
    private var _tr: CGFloat = 0
    private var _bl: CGFloat = 0
    private var _br: CGFloat = 0

    private var theShapeLayer: CAShapeLayer!
    
    override class var layerClass: AnyClass {
        return CAShapeLayer.self
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() -> Void {
        backgroundColor = .clear
        theShapeLayer = self.layer as? CAShapeLayer
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        setCorners(topLeft: _tl, topRight: _tr, botLeft: _bl, botRight: _br, animated: false)
    }

    public func setCorners(topLeft tl: CGFloat, topRight tr: CGFloat, botLeft bl: CGFloat, botRight br: CGFloat, animated: Bool, duration: CFTimeInterval = 0.3) -> Void {
        
        _tl = tl
        _tr = tr
        _bl = bl
        _br = br
        
        theShapeLayer.fillColor = fillColor.cgColor
        theShapeLayer.strokeColor = borderColor.cgColor
        theShapeLayer.lineWidth = borderWidth
        
        let newPath: CGPath = getPath(topLeft: tl, topRight: tr, botLeft: bl, botRight: br)
        
        if animated {
            
            CATransaction.begin()
            
            let animation = CABasicAnimation(keyPath: "path")
            animation.duration = duration
            animation.toValue = newPath
            animation.fillMode = .forwards
            animation.isRemovedOnCompletion = false
            
            CATransaction.setCompletionBlock({
                self.theShapeLayer.path = newPath
                self.theShapeLayer.removeAllAnimations()
            })
            
            self.theShapeLayer.add(animation, forKey: "path")
            
            CATransaction.commit()
            
        } else {
            
            theShapeLayer.path = newPath
            
        }
        
    }
    
    private func getPath(topLeft tl: CGFloat, topRight tr: CGFloat, botLeft bl: CGFloat, botRight br: CGFloat) -> CGPath {
        
        var pt = CGPoint.zero
        
        let myBezier = UIBezierPath()
        
        // top-left corner plus top-left radius
        pt.x = tl
        pt.y = 0
        
        myBezier.move(to: pt)
        
        pt.x = bounds.maxX - tr
        pt.y = 0
        
        // add "top line"
        myBezier.addLine(to: pt)
        
        pt.x = bounds.maxX - tr
        pt.y = tr

        // add "top-right corner"
        myBezier.addArc(withCenter: pt, radius: tr, startAngle: .pi * 1.5, endAngle: 0, clockwise: true)
        
        pt.x = bounds.maxX
        pt.y = bounds.maxY - br
        
        // add "right-side line"
        myBezier.addLine(to: pt)
        
        pt.x = bounds.maxX - br
        pt.y = bounds.maxY - br
        
        // add "bottom-right corner"
        myBezier.addArc(withCenter: pt, radius: br, startAngle: 0, endAngle: .pi * 0.5, clockwise: true)
        
        pt.x = bl
        pt.y = bounds.maxY
        
        // add "bottom line"
        myBezier.addLine(to: pt)
        
        pt.x = bl
        pt.y = bounds.maxY - bl
        
        // add "bottom-left corner"
        myBezier.addArc(withCenter: pt, radius: bl, startAngle: .pi * 0.5, endAngle: .pi, clockwise: true)
        
        pt.x = 0
        pt.y = tl
        
        // add "left-side line"
        myBezier.addLine(to: pt)
        
        pt.x = tl
        pt.y = tl
        
        // add "top-left corner"
        myBezier.addArc(withCenter: pt, radius: tl, startAngle: .pi, endAngle: .pi * 1.5, clockwise: true)
        
        myBezier.close()
        
        return myBezier.cgPath
        
    }
    
}

You can specify different radii for each corner, and tell it to animate to the new settings (or not).

For example, you could start with:

testView.setCorners(topLeft: 40, topRight: 40, botLeft: 0, botRight: 0, animated: false)

to round the top-left and top-right corners, then later call:

testView.setCorners(topLeft: 40, topRight: 40, botLeft: 40, botRight: 40, animated: true)

to animate the bottom corners.

Here's a sample controller class to demonstrate. Each time you tap, the bottom corners will animate between rounded and non-rounded:

class AnimCornersViewController : UIViewController {

    let testView: AnimCornerView = {
        let v = AnimCornerView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.fillColor = .green
        v.borderColor = .blue
        v.borderWidth = 2
        v.setCorners(topLeft: 40, topRight: 40, botLeft: 0, botRight: 0, animated: false)
        return v
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(testView)
        
        // respect safe area
        let g = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            
            testView.widthAnchor.constraint(equalTo: g.widthAnchor, multiplier: 0.8),
            testView.heightAnchor.constraint(equalTo: g.heightAnchor, multiplier: 0.6),
            testView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
            testView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
            
        ])
        
        let t = UITapGestureRecognizer(target: self, action: #selector(gotTap(_:)))
        view.addGestureRecognizer(t)
        
    }

    var shouldRoundBottom: Bool = false
    
    @objc func gotTap(_ g: UITapGestureRecognizer?) {
        
        shouldRoundBottom.toggle()
        
        if shouldRoundBottom {
            testView.setCorners(topLeft: 40, topRight: 40, botLeft: 40, botRight: 40, animated: true)
        } else {
            testView.setCorners(topLeft: 40, topRight: 40, botLeft: 0, botRight: 0, animated: true)
        }
        
    }
    
}

Note: this is example code only!!!