Question

I’ve used CAKeyframeAnimations to animate a layer’s transform.rotation and transform.translation.x properties, but I’m having trouble animating the transform property implicitly. I have a layer that must animate between two states and CABasicAnimation’s default interpolation is totally incorrect and doesn’t follow the path I want. CAKeyframeAnimation to the rescue, or so I thought. Any attempt to animate transform using a CAKeyframeAnimation results in the view immediately snapping to the final transform while the other animations run. If I remove the first half of the following function and let my “transform” events use the CABasicAnimation on the bottom, it animates just fine – albeit with incorrectly interpolated transforms along the way.

My layer delegate has implemented the following:

- (id <CAAction>) actionForLayer:(CALayer *)layer forKey:(NSString *)event
{    
    if ([event isEqualToString:@"transform"])
    {
        CGSize startSize = ((CALayer *)self.layer.presentationLayer).bounds.size;
        CGSize endSize = self.layer.bounds.size;

        CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:event];
        animation.duration = 0.25;

        NSMutableArray *values = [NSMutableArray array];

        int stepCount = 10;
        for (int i = 0; i < stepCount; i++)
        {
            CGFloat p = i / (float)(stepCount - 1);
            CGSize size = [self interpolateBetweenSize:startSize andSize:endSize percentage:p];
            CATransform3D transform = [self transformForSize:size];
            [values addObject:[NSValue valueWithCATransform3D:transform]];
        }

        animation.values = values;
        return animation;
    }

    // All other animations use this basic animation
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:event];
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.removedOnCompletion = YES;
    animation.fillMode = kCAFillModeForwards;
    animation.duration = 0.25;
    return animation;
}

My transform is a translation followed by a rotate, but I think a group animation with separate keyframe animations animating through a translation AND a rotate would result in crazy town. I’ve confirmed that size & transform are correct for all values of p that I pass though, and p strictly ranges from 0 to 1.

I’ve tried setting a non-default timing function, I’ve tried setting an array of timing functions, I’ve omitted the keyTImes, I’ve set a repeatCount of 0, removedOnCompletion=YES, and a fillMode of forwards and that had no effect. Am I not creating the transform keyframe animation correctly?

Answer 1

This technique worked back in iOS 3 but seemed to be broken in iOS 5.0.

5.1 ‘magically’ fixed this, it seemed to be a bug in iOS 5.0. I’d file a radar, but it is now working in 5.1.

@Gsnyder: Some background: I am experimenting with Clear-like UI (for something completely unrelated to Clear) and came up with this: http://blog.massivehealth.com/post/18563684407/clear. That should explain the need for a rotate & translate.

I’ve since created a shutter transition that subdivides a view into N layers (instead of just 2) that looks like this when viewed from the side: /////.

My code is not animating the bounds, it is using the size at each step to determine the necessary transform.

@Paul.s: Implicit allows me to keep this abstraction within the layer class itself without polluting the view controller that owns it. The view controller should just be changing the bounds around and the layer should move appropriately. I’m not a fan of view controllers having dozens of custom animations when the views themselves can handle it.

I need to use a keyframe animation because the default animation between layer transforms / and _ animate through incorrect angles so the ///\ layers do not line up throughout the transform. The keyframe animations ensure the edges all line up correctly while they all animate.

I’m considering this closed, this seems to be a bug in iOS 5.0 and has since been fixed. Thanks everyone.