Search code examples
macoscalayernsbuttoncaanimation

NSButton being clipped with CAAnimation

So I'm doing a simple animation on an NSButton that I found here

button.wantsLayer = YES;
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position.x";
animation.values = @[ @0, @10, @-10, @10, @0 ];
animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ];
animation.duration = 0.5;
animation.additive = YES;
[button.layer addAnimation:animation forKey:@"shake"];

Except, when it does wiggle side to side, it gets clipped (this is kinda hard to screenshot so here goes)

enter image description here

You can see, on the right side of the "2" button (the one that is being animated), the shadow/bevel is being clipped/cut off.

I thought this might be a clipsToBounds thing, but neither the button or the layer has such a property (maybe its an iOS only thing, where my background is)?

Any ideas/solutions would be appreciated :)

Solution

  • I was able to solve this issue in my project by giving the button super view its own CALayer by selecting the view in IB then going to the "View Effects Inspector" and checking the tick box under "Core Animation Layer". I'm sure you could do this programmatically, but I'm unsure if that layer is "backed" or "hosted". Edit: according to this post it is layer backed FYI.

    There may be some other key differences between our setups so if this doenst workout you let me know and I'll look into it.

    It's probably irrelevant, but I'm using CABasicAnimation instead of CAKeyFrameAnimation