Removing the CAShapeLayer mask at the UIButton level so that the UIButton sizing animation is exposed

Question

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

So far so good. I am increasing the size of UIButton. So far, so good. See below (everything in the image is _fusedBar, save the fragment of the x-axis line that you see below, and the text of the amount in dollars).

When I go to animate UIButton to be compressed using the same animation procedure, but with different parameter values ​​(affine translation while changing the frame height), none of the UIButton (save for tape) is displayed, as compression occurs.

I tried using CAShapeLayer, which is a mask that removes itself from its super layer, I tried to set the mask property at the UIButton level to zero, etc., but none of them remove the mask in such a way that I see the UIButton animation (short for affine translation and change the height of the frame).

Here is the corresponding 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 is called up, I have a mask setting for the above record. This 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 layer _fusedBar.layer.mask = maskLayer; } 

When growing _fusedBar from chips to several hundred points, the growth is animated, and you can see it.

Before using this CAShapeLayer mask when compressing _fusedBar back to the tape, I could see the animation (the same code above, just a different value for 'scaledHeight'). Now I do not see the cutting animation.

So, I know, I need to somehow shake up the effects of the masking layer before revitalizing the reduction operation, but the obvious things (for me) did not work. Here is an example of various things I 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 am missing some CALayers nugget, masking and possibly even the semantics of presentationLayer.

Any directions that are much appreciated!

Answer 1

Returning to him after a couple of days, I saw my mistake (not visible from the excerpts published above).

Essentially, after the animation grows or shrinks "fusedBar", I reapplied the mask based on the view frame. Since this would be effectively done in conjunction with the animation block, it should have a mask in which the view was compressed.

I needed to put this mask reuse code in my animation completion block or suppress it if the compressed bit was reduced.

Thanks to everyone who looked to help!