How animate layer.mask changes

Question

I'm creating inside my app this customized view that can be expanded by the user with a drag and has all the animations of the case. Just to be clear, I want to reproduce pretty much the same animation of the control center of IOS. So far I managed to obtain pretty much everything from the animation of the view's expansion when the finger drags it, to the possibility of make the corners rounded.

Now, the fact is that, besides the possibility to drag the view, I want to implement an animation when the user takes off the finger in between the expansion in order to make the view come back to its original height or finish the expansion. To do that I'm using the position of the view when the user stops dragging.

The issues started when I tried to animate the UIView.layer.mask. With some research on the internet, I discovered the CABasicAnimation class and I implemented it inside a function:

func animateExpandableView(withDuration duration: Double) {

    CATransaction.begin()
    CATransaction.setAnimationDuration(duration)
    CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: .easeInEaseOut))

    let maskAnimation = CABasicAnimation(keyPath: "mask")
    maskAnimation.fromValue = profileView.layer.mask

    let bounds = profileView.frame
    let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 8.0, height: 8.0))
    let maskLayer = CAShapeLayer()
    maskLayer.frame = bounds
    maskLayer.path = maskPath.cgPath

    maskAnimation.toValue = maskLayer
    maskAnimation.duration = duration

    profileView.layer.mask = maskLayer
    profileView.layer.add(maskAnimation, forKey: "mask")

    CATransaction.commit()


}

Btw this doesn't work and the change of the mask isn't animated. Where did I make a mistake in the implementation?

Someone suggested to me to check this link from another question; I didn't find it very useful because, despite the fact it didn't work for my case, the answer is written in C and not in Swift.

Animating a CALayer's mask size change

Answer 1

I found a workaround to the fact that the mask property can't be animated by using a timer to recreate the animation. Basically, I divide the animationDuration by 100 and set the result as the timer's interval. Then I do the same with the difference between the finalHeight and the initalHeight dividing it by 100 and assigning it to animationStep. With all of that set up I just run the timer for 100 cycles and during each one add animationStep to the maskHeight property. Here's all the code from my class:

class ExpandableView: UIView {
    //Timer to animate view's mask
    private var animationTimer: Timer? = nil

    //the height of each step for the mask's animation
    private var animationStep: CGFloat? = nil
    private var currentStep: Double = 0

    //Variable responsable to return and set self.mask height.
    private var maskCornerRadii: CGSize? = nil
    private var maskRoundingCorners: UIRectCorner? = nil

    //Variable responsable to return and set self.mask height. it's nil if there isn't any mask
    private var maskHeight: CGFloat? {
        get {return self.layer.mask?.bounds.height}
        set {
            if newValue != nil && maskRoundingCorners != nil && maskCornerRadii != nil {
                let frame = self.bounds
                let bounds = CGRect(x: frame.origin.x, y: frame.origin.y, width: frame.width, height: newValue!)
                let maskPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: maskRoundingCorners!, cornerRadii: maskCornerRadii!)
                let maskLayer = CAShapeLayer()
                maskLayer.frame = bounds
                maskLayer.path = maskPath.cgPath

                self.layer.mask = maskLayer
            }
        }
    }


    //Animation function
    func animateMask(from initialHeight: CGFloat, to finalHeight: CGFloat, withDuration duration: Double) {
        let timerInterval = duration * 0.01
        animationStep = (finalHeight - initialHeight) * 0.01
        animationTimer = Timer.scheduledTimer(withTimeInterval: timerInterval, repeats: true, block: { (timer) in

            if self.currentStep <= 100 {
                guard self.animationStep != nil else {
                    fatalError("animationStep is nil")
                }

                guard self.maskHeight != nil else {
                    fatalError("Mask is nil")
                }

                self.maskHeight! += self.animationStep!
                self.currentStep += 1

            } else {
                self.animationTimer!.invalidate()
                self.currentStep = 0
            }
        })
    }
}