1

I'm running into an issue where animating a closed, filled, and rasterized layer masked by a UIBezierPath sometimes chops off part of one of the arcs during the animation. The chopping seems to be tied to the size of the heart. Any help would be greatly appreciated. Thanks!

a These screenshots are one frame apart in a layer scale animation

I'm creating this with a CALayer (red) masked by CAShapeLayer from UIBezierPath (heart), all added to the layer of MyView

Here's how I create the layer

// MyLayer.m
+ (UIBezierPath *)bezierHeartShapePathWithWidth:(CGFloat)width atPoint:(CGPoint)center
{
    CGFloat w = width / 2.5f;

    UIBezierPath *path = [[UIBezierPath alloc] init];

    //left arc
    [path addArcWithCenter:CGPointMake(center.x - w/2.f, center.y - w/2.f) radius:(w*sqrt(2.f)/2.f) startAngle:[self toRadians:135.f] endAngle:[self toRadians:-45.f] clockwise:YES];

    //right arc
    [path addArcWithCenter:CGPointMake(center.x + w/2.f, center.y - w/2.f) radius:(w*sqrt(2.f)/2.f) startAngle:[self toRadians:-135.f] endAngle:[self toRadians:45.f] clockwise:YES];

    [path addLineToPoint:CGPointMake(center.x, center.y + w)];
    [path addLineToPoint:CGPointMake(center.x - w, center.y)];

    [path closePath];

    return path;
}

self.bezierPath =[UIBezierPath bezierHeartShapePathWithWidth:self.width atPoint:self.relativeCenter];

I then add the layer to my view and add an animation

// MyView.m

// Create a layer to be masked by the heart-shaped layer
maskedLayer = [CALayer layer];
maskedLayer.masksToBounds = YES;
[maskedLayer setFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
maskedLayer.mask  = self.heartLayer;
[self.layer setAnchorPoint:CGPointMake(.5, .5)];
[maskedLayer setAnchorPoint:CGPointMake(.5, .5)];

// Add to the view's root layer
[self.layer addSublayer:maskedLayer];

// Add FB Pop animation for later use    
bounceAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
bounceAnimation.removedOnCompletion = NO;
bounceAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(1,1)];
bounceAnimation.completionBlock = ^(POPAnimation *anim, BOOL completed) {};
// doesn't actually animate until someone taps the view

[maskedLayer pop_addAnimation:bounceAnimation forKey:@"bounceAnimation"];

// Rasterization seems to make the animation way smoother, and my path only gets drawn once. Not sure if all sublayers are rasterized or not.
self.layer.shouldRasterize = YES;
self.layer.rasterizationScale = [[UIScreen mainScreen] scale];
Rob
  • 530
  • 1
  • 5
  • 8
  • Is it just one frame on which you see the chop? – duci9y Jul 28 '14 at 20:32
  • It appears to be one size at which that part of the arc disappears. But because it's a spring animation, it flickers multiple times per animation. – Rob Jul 28 '14 at 20:34
  • Sounds like something fishy with the custom animator you're using. – duci9y Jul 28 '14 at 20:42
  • From what I can understand, FB Pop just directly creates a CAAnimation. I'll try using CAAnimation directly to see if that helps. thanks – Rob Jul 28 '14 at 21:11

0 Answers0