Question

I have a UIButton of the custom button type, where I just set a background and border color on the underlying CALayer of the button. I then applied a mask to this underlying layer composed of a CAShapeLayer (to get two rounded corners) as described in this post.

So far so good. I animate the UIButton to grow in size. So far so good. See below (everything in the image is the _fusedBar, save the x-axis line snippet you see below it and the dollar amount text).

When I go to animate the UIButton to shrink using the same animation routine but different parameter values (affine translation with simultaneous frame height change), none of the UIButton (save for a sliver) is visible as the shrinking is taking place.

I’ve tried to have the CAShapeLayer that is the mask remove itself from its super layer, I’ve tried to set the mask property on the UIButton’s layer to nil, etc., but none of these remove the mask such that I can see the UIButton animate (shrinking with affine translation and frame height change).

Here’s the relevant animation code:

// Stackoverflow readers: Assume 'duration', 'scaledHeight' and 'delay' 
// already defined.

void (^fusedBarChange)(void) = ^{    
    _fusedBar.transform = CGAffineTransformMakeTranslation(0, -scaledHeight);
    [_fusedBar nd_setNewSizeHeight:scaledHeight];
};

[UIView animateWithDuration:duration
                      delay:delay
                    options:UIViewAnimationCurveEaseOut 
                 animations:^(void) {
                     fusedBarChange();
                 }
                 completion:^(BOOL finished) {
                     // Other stuff not relevant to _fusedBar animation
                 }];

Before this animation gets called, I have the mask setup per the post cited above. That code is below. Note that ‘_fusedBar’ is the UIButton at the heart of this discussion.

- (void)configureRoundedTop {
    // YES: Start by creating the path (with only the top-left corner rounded)
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:_fusedBar.bounds 
                                                   byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                                         cornerRadii:CGSizeMake(4.0, 4.0)];

    // Create the shape layer and set its path
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = _fusedBar.bounds;
    maskLayer.path = maskPath.CGPath;

    // Set the newly created shape layer as the mask for the image view's layer
    _fusedBar.layer.mask = maskLayer;
}

When growing the _fusedBar from a sliver to a few hundred points, the growth is animated, and you can see it.

Prior to using this CAShapeLayer mask, when shrinking the _fusedBar back to a sliver, I could see the animation (same code above, just a different value for ‘scaledHeight’). Now, I cannot see the shrinking animation.

So, I know I need to somehow shake-off the effects of the masking layer before animating the shrinking operation, but the obvious things (to me) haven’t worked. Here’s an example of various things I’ve tried:

// None of these do the trick. I call them just before 
// the shrinking animation is invoked:
[_fusedBar setNeedsLayout];
[_fusedBar setNeedsDisplay];
[_fusedBar.layer.mask removeFromSuperlayer];
_fusedBar.layer.mask = nil;

Clearly, I’m missing some nugget of CALayers, masking and perhaps even presentationLayer semantics.

Any guidance much appreciated!

Answer 1

Coming back to it after a couple of days, I saw my mistake (not visible from the extracts posted above).

Essentially, after the animation to grow or shrink the “fusedBar”, I was reapplying a mask based on the view’s frame. Since this would effectively execute in concert with the animation block, it was going to have a mask that the view was shrinking into.

I needed to put that re-apply mask code in my animation completion block or suppress it if the fusedBar was shrinking.

Thanks to all those who took a look to help out!