Question

I have two animations that I’m trying to perform on a UILabel on the iPhone with OS 3.1.2. The first rocks the UILabel back and forth:

CAKeyframeAnimation *rock;
rock = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
[rock setBeginTime:0.0f];
[rock setDuration:5.0];
[rock setRepeatCount:10000];

NSMutableArray *values = [NSMutableArray array];
MovingMath *math = [[MovingMath alloc] init];

// Center start position
[values addObject:[math DegreesToNumber:0]];

// Turn right
[values addObject:[math DegreesToNumber:-10]];

// Turn left
[values addObject:[math DegreesToNumber:10]];

// Re-center
[values addObject:[math DegreesToNumber:0]];

// Set the values for the animation
[rock setValues:values];

[math release];

The second zooms the UILabel so that it becomes larger:

NSValue *value = nil;
CABasicAnimation *animation = nil;
CATransform3D transform;
animation = [CABasicAnimation animationWithKeyPath:@"transform"];
transform = CATransform3DMakeScale(3.5f, 3.5f, 1.0f);
value = [NSValue valueWithCATransform3D:transform];
[animation setToValue:value];
transform = CATransform3DMakeScale(1.0f, 1.0f, 1.0f);
value = [NSValue valueWithCATransform3D:transform];
[animation setFromValue:value];
[animation setAutoreverses:YES];
[animation setDuration:30.0f];
[animation setRepeatCount:10000];
[animation setBeginTime:0.0f];

Adding either one of these animations directly to the UILabel’s layer works as expected.

However, if I try to group the animations together, the first “rocking” animation does not function:

CAAnimationGroup *theGroup = [CAAnimationGroup animation];

theGroup.duration = 5.0;
theGroup.repeatCount = 10000;
theGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
theGroup.animations = [NSArray arrayWithObjects:[self rockAnimation], [self zoomAnimation], nil]; // you can add more

// Add the animation group to the layer
[[self layer] addAnimation:theGroup forKey:@"zoomAndRotate"];

The order of adding the animations to the group does not matter. Instead of zooming, in the manner above, I tried changing the bounds, but that was unsuccessful as well. Any insight would be greatly appreciated. Thank you.

Answer 1

You are attempting to simultaneously animate two changes to one property, your CALayer’s transform. In the first animation, you are using a helper keypath to change the transform to produce a rotation, and in the second you are changing the transform directly to produce a scaling. The second animation is overwriting the first, because you are constructing whole transforms that are only scaled and animating between them.

It appears that you can cause both scaling and rotation of your layer to occur by using helper keypaths for both animations. If you change your code on the scaling animation to read

CABasicAnimation *animation = nil;
animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[animation setToValue:[NSNumber numberWithDouble:3.5]];
[animation setFromValue:[NSNumber numberWithDouble:1.0]];
[animation setAutoreverses:YES];
[animation setDuration:30.0f];
[animation setRepeatCount:10000];
[animation setBeginTime:0.0f];

you should be able to have both rocking and scaling on your layer.