Search code examples
iosobjective-ciphoneuiviewcalayer

UIView's layer mask animates setting frame

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...

@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;
}

(note: I give the view a purple color in IB so I can see what's going on)

This almost works, but when the owning view controller resizes this view, like this...

- (void)touchesEnded:(NSSet<UITouch *> *)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);
}

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). Why would it animate?

Before...

enter image description here

Fast animation like this...

enter image description here

Placing NSLog in layoutSubviews, I notice it gets called twice, which is strange, but still not enough times to explain the quick animation.

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.

Can someone tell me where I've gone wrong?

Solution

  • When setting an animatable property of a layer, unless that layer is a UIView's primary layer, implicit animation is the default. Moreover, the frame property is merely a facade for the bounds and position properties. For this reason, you should never set a layer's frame directly; always set the bounds and position yourself. If you don't want animation, you'll need to turn off implicit animation for these properties; the simplest way is to turn it off entirely for the current CATransaction (setDisableActions to true), but there are more subtle and precise ways to accomplish the same thing.