title: UIView's layer mask animates setting frame
body: <p>I want to create a UIView subclass that masks itself so that any child view's I add to it are cropped by a circle.  I want this view and it's child views to be defined in IB, so that I can easily define layout constraints to the children.  So far I have the following...</p>
  
  <pre><code>@interface BubbleView ()
  // eg: this is an example of a child view that would be "under" a mask
  @property(weak,nonatomic) IBOutlet UIImageView *imageView;
  @end
  
  @implementation BubbleView
  
  // not really sure if this kind of init is the right pattern, but it seems to work and 
  // I don't think this is my current problem??
  + (instancetype)bubbleViewFromNib {
      BubbleView *view = [[NSBundle mainBundle] loadNibNamed:@"BubbleView" owner:nil options:nil][0];
  
      UIImage *_maskingImage = [UIImage imageNamed:@"circlemask"];
      CALayer *maskingLayer = [CALayer layer];
      [view.layer addSublayer:maskingLayer];
  
      maskingLayer.contents = (__bridge id _Nullable)(_maskingImage.CGImage);
      view.layer.mask = maskingLayer;
  
      return view;
  }
  
  - (void)layoutSubviews {
      self.layer.mask.frame = self.bounds;
  }
  </code></pre>
  
  <p>(note: I give the view a purple color in IB so I can see what's going on)</p>
  
  <p>This almost works, but when the owning view controller resizes this view, like this...</p>
  
  <pre><code>- (void)touchesEnded:(NSSet&lt;UITouch *&gt; *)touches withEvent:(UIEvent *)event {
      BubbleView *b = (BubbleView *)[self.view viewWithTag:222];
      //b.transform = CGAffineTransformScale(b.transform, 1.2, 1.2);
      b.frame = CGRectInset(b.frame, -30,-30);
  }
  </code></pre>
  
  <p>The mask does something weird:  It stays small "jumps" to the upper left corner of the view, then very quickly animates to the correct size (bigger by 30,30).  <strong>Why would it animate?</strong></p>
  
  <p>Before...</p>
  
  <p><a href="https://i.stack.imgur.com/O1rsA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O1rsA.png" alt="enter image description here"></a></p>
  
  <p>Fast animation like this...</p>
  
  <p><a href="https://i.stack.imgur.com/alTfa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/alTfa.png" alt="enter image description here"></a></p>
  
  <p>Placing NSLog in layoutSubviews, I notice it gets called twice, which is strange, but still not enough times to explain the quick animation.</p>
  
  <p>Also, when I change the transform instead of the frame, it resizes perfectly, with no animation.  But I need to do both frame and transform changes.</p>
  
  <p>Can someone tell me where I've gone wrong?</p>