I am trying to do a very simple animation, but it is giving me much grief… I must be doing some simple thing wrong and just missing by a bit my desired result.
As posted here: Rotating around a diagonal axis
I was trying to re-create a “Reversi” piece – a square which when activated would rotate about the axis Y=X, and change color to give the illusion that it was rotating to reveal its back. So, blue on one side, red on the other.
In order to make this work I had to break the animation up into 4 parts:
1) Rotate 90 degrees about Y=X
2) Change color from oldColor to 0.5*oldColor (giving the illusion of dimming)
3) Rotate 90 degrees about Y=X (bring the “back” side around to face front)
4) Change color from 0.5*newColor to newColor (giving the illusion of illumination as the piece comes more into the light)
This works just fine… in theory. The problem is, the first two steps execute wonderfully, but I cannot get the second two to fire.
I tried doing it in a CAAnimationGroup but the problem with that is, I need to explicitly set the color to the new color, or else when the step 3&4 animation begins, there is a flash to the original color. I could not figure out how to do that within the group, so I broke them out into separate animation and just chained them as follows:
1) Fire 1&2
2) Catch the animationDidStop:finished: event and set the color, then fire 3&4
Doing this, 3&4 never fire. It just hangs.
So I tried changing the timeOffset on 3&4 to be the duration of the 1&2 animations. This resulted in 1&2 not firing but 3&4 working beautifully… ARG!
Here is the code broken out as individual animations:
<pre><code>
- (IBAction)handleButtonClick {
FlipLayer3View *v = (FlipLayer3View *)[self view];
col = ctr % 2 ? [UIColor blueColor].CGColor : [UIColor redColor].CGColor;
[self aniFromColor:v.theSquare.backgroundColor toColor:col];
ctr++;
}
- (void)aniFromColor:(CGColorRef)fromCol toColor:(CGColorRef)toCol {
FlipLayer3View *v = (FlipLayer3View *)[self view];
const CGFloat *fromColors = CGColorGetComponents(fromCol);
const CGFloat *toColors = CGColorGetComponents(toCol);
v.theSquare.backgroundColor = fromCol;
ani1 = [[CABasicAnimation animationWithKeyPath:@"transform"] retain];
[ani1 setDuration:dur];
[ani1 setToValue:[NSValue valueWithCATransform3D:CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))]];
[ani1 setValue:@"shrink" forKey:@"name"];
[ani1 setDelegate:self];
[ani1 setFillMode:kCAFillModeForwards];
[ani1 setRemovedOnCompletion:NO];
ani2 = [[CABasicAnimation animationWithKeyPath:@"backgroundColor"] retain];
UIColor *c1 = [UIColor colorWithRed:(fromColors[0]/2.0f) green:(fromColors[1]/2.0f) blue:(fromColors[2]/2.0f) alpha:1.0f];
const float *cgCol1 = CGColorGetComponents(fromCol);
const float *cgCol2 = CGColorGetComponents(c1.CGColor);
NSLog(@"Setting color FROM R:%f G:%f B:%f", cgCol1[0], cgCol1[1], cgCol1[2]);
NSLog(@"Setting color TO R:%f G:%f B:%f", cgCol2[0], cgCol2[1], cgCol2[2]);
[ani2 setDuration:dur];
[ani2 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[ani2 setFromValue:(id)fromCol];
[ani2 setToValue:(id)c1.CGColor];
[ani2 setValue:@"dim" forKey:@"name"];
[ani2 setDelegate:self];
[ani2 setFillMode:kCAFillModeForwards];
[ani2 setRemovedOnCompletion:NO];
ani3 = [[CABasicAnimation animationWithKeyPath:@"transform"] retain];
[ani3 setDuration:dur];
[ani3 setFromValue:[NSValue valueWithCATransform3D:CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))]];
[ani3 setToValue:[NSValue valueWithCATransform3D:v.theSquare.transform]];
[ani3 setValue:@"grow" forKey:@"name"];
[ani3 setTimeOffset:dur];
[ani3 setDelegate:self];
[ani3 setFillMode:kCAFillModeForwards];
[ani3 setRemovedOnCompletion:NO];
ani4 = [[CABasicAnimation animationWithKeyPath:@"backgroundColor"] retain];
UIColor *c2 = [UIColor colorWithRed:(toColors[0]/2.0f) green:(toColors[1]/2.0f) blue:(toColors[2]/2.0f) alpha:1.0f];
cgCol1 = CGColorGetComponents(c2.CGColor);
cgCol2 = CGColorGetComponents(toCol);
NSLog(@"Setting color FROM R:%f G:%f B:%f", cgCol1[0], cgCol1[1], cgCol1[2]);
NSLog(@"Setting color TO R:%f G:%f B:%f", cgCol2[0], cgCol2[1], cgCol2[2]);
[ani4 setDuration:dur];
[ani4 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
[ani4 setFromValue:(id)c2.CGColor];
[ani4 setToValue:(id)toCol];
[ani4 setValue:@"glow" forKey:@"name"];
[ani4 setTimeOffset:dur];
[ani4 setDelegate:self];
[ani4 setFillMode:kCAFillModeForwards];
[ani4 setRemovedOnCompletion:NO];
[v.theSquare addAnimation:ani1 forKey:@"rotate1"];
[v.theSquare addAnimation:ani2 forKey:@"fadeout"];
[v.theSquare addAnimation:ani3 forKey:@"rotate2"];
[v.theSquare addAnimation:ani4 forKey:@"fadein"];
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
if (flag) {
NSString *str = [anim valueForKey:@"name"];
if ([str isEqual:@"shrink"]) {
NSLog(@"SHRINK complete...");
}
else if ([str isEqual:@"dim"]) {
NSLog(@"DIM complete...");
FlipLayer3View *theView = (FlipLayer3View *)[self view];
theView.theSquare.backgroundColor = col;
}
else if ([str isEqual:@"grow"]) {
NSLog(@"GROW complete...");
}
else if ([str isEqual:@"glow"]) {
NSLog(@"GLOW complete...");
}
}
}
</code></pre>
and here, FWIW is the code I used with the CAAnimationGroup solution:
<pre><code>
- (IBAction)handleButtonClick {
FlipLayer3View *v = (FlipLayer3View *)[self view];
CGColorRef c = ctr % 2 ? [UIColor redColor].CGColor : [UIColor blueColor].CGColor;
aniGroup = [self aniFromColor:v.theSquare.backgroundColor toColor:c];
[v.theSquare addAnimation:aniGroup forKey:@"rotate"];
ctr++;
}
- (CAAnimationGroup *)aniFromColor:(CGColorRef)fromCol toColor:(CGColorRef)toCol {
FlipLayer3View *v = (FlipLayer3View *)[self view];
const CGFloat *fromColors = CGColorGetComponents(fromCol);
const CGFloat *toColors = CGColorGetComponents(toCol);
ani1 = [CABasicAnimation animationWithKeyPath:@"transform"];
[ani1 setDuration:dur];
[ani1 setToValue:[NSValue valueWithCATransform3D:CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))]];
[ani1 setValue:@"shrink" forKey:@"name"];
ani2 = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
UIColor *c1 = [UIColor colorWithRed:(fromColors[0]/2.0f) green:(fromColors[1]/2.0f) blue:(fromColors[2]/2.0f) alpha:1.0f];
[ani2 setDuration:dur];
[ani2 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[ani2 setToValue:(id)c1.CGColor];
[ani2 setValue:@"dim" forKey:@"name"];
ani3 = [CABasicAnimation animationWithKeyPath:@"transform"];
[ani3 setDuration:dur];
[ani3 setFromValue:[NSValue valueWithCATransform3D:CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))]];
[ani3 setToValue:[NSValue valueWithCATransform3D:v.theSquare.transform]];
[ani3 setValue:@"grow" forKey:@"name"];
[ani3 setBeginTime:dur];
ani4 = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
UIColor *c2 = [UIColor colorWithRed:(toColors[0]/2.0f) green:(toColors[1]/2.0f) blue:(toColors[2]/2.0f) alpha:1.0f];
[ani4 setDuration:dur];
[ani4 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
[ani4 setFromValue:(id)c2.CGColor];
[ani4 setToValue:(id)toCol];
[ani4 setValue:@"glow" forKey:@"name"];
[ani4 setBeginTime:dur];
aniGroup = [CAAnimationGroup animation];
[aniGroup setDuration:dur*2];
[aniGroup setAnimations:[NSArray arrayWithObjects:ani1, ani2, ani3, ani4, nil]];
[aniGroup setFillMode:kCAFillModeForwards];
[aniGroup setRemovedOnCompletion:NO];
return aniGroup;
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
if (flag) {
NSString *str = [anim valueForKey:@"name"];
if ([str isEqual:@"shrink"]) {
NSLog(@"SHRINK complete...");
}
else if ([str isEqual:@"dim"]) {
NSLog(@"DIM complete...");
}
else if ([str isEqual:@"grow"]) {
NSLog(@"GROW complete...");
}
else if ([str isEqual:@"glow"]) {
NSLog(@"GLOW complete...");
}
}
}
</code></pre>
Someone PLEASE tell me what bonehead thing I am missing… this is killing me!
Thanks!
Chris
Ok, so let me be the first to call me an idiot… In the Group version, which I tried first, I had a beginTime set, but must not have removed it when I converted to individual animations, causing the second-half of the animation sequence to fail. That made me try setting the timeOffset, which gave the odd result of not firing the first half, but firing the second.
I just went in and removed all of that, beginTime, timeOffset, etc. Then fired the first two animations. Then in the animationDidStop:finished: method, I change the color of the layer being animation to avoid the flash back to the original color, and finally launch the second set of animations. Et Viola!!!
For reference, here is the working code:
If anyone sees problems or know a better way, I’d love to hear!!
Thanks,
Chris