CABasicAnimation using CAAnimationGroup to scale and fade is not centering

Question

So I am trying to make a class that can draw expanding and fading bubbles on a given view. (It will look similar to dynmaic wallpaper but in my app). I have a pretty good feeling these problem pertains to either the anchorPoint or frame of my shape layer, but I cannot for the life of me get this code to work. function newBubble is supposed to draw a circle and set it up so that it will scale up to 1.0 and fade opacity to 0.0 over 4.0 seconds. everything works perfect EXCEPT the circles are being scaled relative to 0,0. (It,s as if someone has put a pin at 0,0 and is stretching from the bottom right of the circle.)

I set the anchor to (0.5, 0.5) and many other things, nonthing worked. I set the frame to the one it was drawn in, then I set the frame to the entire view, nothing worked. I have been dubbing for hours and I cannot seem to figure this out. The newBubble function where all of the animating happens is below and you can find the entire xcodeproj (just a timer that fires every half second and a stop/start button) at this link. I know this is something really simple so thanks in advance!

- (void) newBubble {
    int x = arc4random() % (int) (bubblesView.frame.size.width-100);
    int y = arc4random() % (int) (bubblesView.frame.size.height-100);

    CGRect circleFrame = CGRectMake(x, y, 100, 100);
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:circleFrame];

    CAShapeLayer *bubble = [CAShapeLayer layer];
    bubble.path = path.CGPath;
    bubble.anchorPoint = CGPointMake(0.5f, 0.5f);
    bubble.frame = circleFrame;
    bubble.fillColor = [UIColor whiteColor].CGColor;

    CABasicAnimation *bubbleFadeIn = [CABasicAnimation animationWithKeyPath:@"opacity"];
    bubbleFadeIn.fromValue = [NSNumber numberWithFloat:1.0f];
    bubbleFadeIn.toValue = [NSNumber numberWithFloat:0.0f];

    CABasicAnimation *bubbleExplode = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    bubbleExplode.fromValue = [NSNumber numberWithFloat:0.0f];
    bubbleExplode.toValue = [NSNumber numberWithFloat:1.0f];

    CAAnimationGroup *bubbleAnims = [CAAnimationGroup animation];
    [bubbleAnims setAnimations:[NSArray arrayWithObjects:bubbleFadeIn, bubbleExplode, nil]];
    [bubbleAnims setDuration:4.0];
    [bubbleAnims setRemovedOnCompletion:NO];
    [bubbleAnims setFillMode:kCAFillModeForwards];
    [bubble addAnimation:bubbleAnims forKey:nil];

    [bubblesView.layer addSublayer:bubble];
}

Note: bubblesView is a property of the class, and it is set to self.view by the view controller that initiates it. If you are still confused, I encourage you to open the xcode file.

Answer 1

Figured it out...

    CGRect circleFrame = CGRectMake(x, y, 100, 100);
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:circleFrame];
    CGPoint circleAnchor = CGPointMake((x+50)/ bubblesView.frame.size.width, (y+50)/ bubblesView.frame.size.height);

    CAShapeLayer *bubble = [CAShapeLayer layer];
    bubble.path = path.CGPath;
    bubble.anchorPoint = circleAnchor;
    bubble.frame = bubblesView.frame;
    bubble.fillColor = [UIColor whiteColor].CGColor;