Group animation on multiple objects

Question

I'm trying to animate many bubbles coming out of a machine. I'm using a basic animation to scale the bubbles from a small bubble to a large one and a keyframe animation to send the bubble in a curve across the screen. These are combined into a group animation.

I have read through just about all I can to try to get this to work, but I have the following two problems.

1. I can't get the scale animation to work together with the keyframe animation when I try to animate each bubble.
2. The animation happens to them all at the same time. I'd like to see them animated one after the other, but they all animate together.

here is the animation code I have.

-(void)EmitBubbles:(UIButton*)bubblename :(CGRect)RectPassed
{
bubblename.hidden = NO;
 // Set position and size of each bubble to be at head of bubble machine and size (0,0)
CGPoint point = (RectPassed.origin);
CGRect ButtonFrame;
ButtonFrame = bubblename.bounds;
ButtonFrame.size = CGSizeMake(0, 0);
bubblename.bounds = ButtonFrame;
CGRect OldButtonBounds = bubblename.bounds;
CGRect NewButtonBounds = OldButtonBounds;
NewButtonBounds.size = RectPassed.size;

CGFloat animationDuration = 0.8f;

// Set up scaling
CABasicAnimation *resizeAnimation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
resizeAnimation.fillMode = kCAFillModeForwards;
resizeAnimation.duration = animationDuration;
resizeAnimation.fromValue = [NSValue valueWithCGSize:OldButtonBounds.size]; 
resizeAnimation.toValue = [NSValue valueWithCGSize:NewButtonBounds.size]; 

// Set Actual bubble size after animation 
bubblename.bounds = NewButtonBounds;

// Setup Path
CGPoint MidPoint = CGPointMake(500,50);
CGPoint EndPoint = CGPointMake(RectPassed.origin.x, RectPassed.origin.y); 
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, nil, bubblename.bounds.origin.x, bubblename.bounds.origin.y);
CGPoint NewLoc = CGPointMake(745, 200);
CGPathMoveToPoint(curvedPath, NULL, NewLoc.x,NewLoc.y); 
CGPathAddCurveToPoint(curvedPath, NULL, 745,200,MidPoint.x,MidPoint.y, EndPoint.x, EndPoint.y);
pathAnimation.path = curvedPath;

// Set Bubble action position after animation
bubblename.layer.position = point;

// Add scale and path to animation group
CAAnimationGroup *group = [CAAnimationGroup animation];
group.removedOnCompletion = YES;
[group setAnimations:[NSArray arrayWithObjects:pathAnimation, resizeAnimation, nil]];
group.duration = animationDuration;

[bubblename.layer addAnimation:group forKey:@"nil"]; //savingAnimation


CGPathRelease(curvedPath);

}

I call the animation for each bubble using

[self EmitBubbles:btnbubble1 :CGRectMake(200, 500, 84, 88)];
[self EmitBubbles:btnbubble2 :CGRectMake(200, 500, 84, 88)];

I have 20 bubbles on screen. The size of the rect passed is the final size I want the bubbles to be.

Can I can get each bubble to animate separately using a scale and keyframe path, without having to write the above code for each bubble?

Thanks

Answer 1

OK. I think I did it.After hours of looking around Stackoverflow and other places I found that to bhave the objects animate one after the other. I had to calculate the time according to the app time. I used.

group.beginTime = CACurrentMediaTime() + AnimationDelay

To stop the animation momentarily appearing at its final position before continuing with the animation. I had to use

group.fillMode = kCAFillModeBackwards;