title: Removing a CAShapeLayer mask on a UIButton layer so that animating UIButton size change is unmasked
body: <p>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 <a href="https://stackoverflow.com/questions/2264083/rounded-uiview-using-calayers-only-some-corners-how">this post</a>.</p>
  
  <p>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).</p>
  
  <p><img src="https://i.stack.imgur.com/3eoht.jpg" alt="fully grown UIButton referred to in code as _fusedBar"></p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>Here's the relevant animation code:</p>
  
  <pre><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
                   }];
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>- (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;
  }
  </code></pre>
  
  <p>When growing the _fusedBar from a sliver to a few hundred points, the growth is animated, and you can see it. </p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>// 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;
  </code></pre>
  
  <p>Clearly, I'm missing some nugget of CALayers, masking and perhaps even presentationLayer semantics.</p>
  
  <p>Any guidance much appreciated!</p>