CAKeyframeAnimation using UIImages not working

Question

I am setting up the animation as so:

self.testAnimation = [CAKeyframeAnimation animationWithKeyPath:@"TestAnimation"];

[self.animationImagesAsCGImages addObject:( id )[UIImage imageNamed:@"c1.png"].CGImage];
[self.animationImagesAsCGImages addObject:( id )[UIImage imageNamed:@"c2.png"].CGImage];
[self.animationImagesAsCGImages addObject:( id )[UIImage imageNamed:@"c3.png"].CGImage];
[self.animationImagesAsCGImages addObject:( id )[UIImage imageNamed:@"c4.png"].CGImage];

[self.animationKeyframeTimings addObject:[NSNumber numberWithFloat:0.0f]];
[self.animationKeyframeTimings addObject:[NSNumber numberWithFloat:0.25f]];
[self.animationKeyframeTimings addObject:[NSNumber numberWithFloat:0.5f]];
[self.animationKeyframeTimings addObject:[NSNumber numberWithFloat:0.75f]];

self.testAnimation.values          = self.animationImagesAsCGImages;
self.testAnimation.keyTimes        = self.animationKeyframeTimings;

self.testAnimation.repeatCount     = HUGE_VALF;
self.testAnimation.autoreverses    = NO;
self.testAnimation.calculationMode = kCAAnimationDiscrete;
self.testAnimation.duration        = 2.0f;

And then calling it as so:

[self.layer addAnimation:self.testAnimation forKey:@"TestAnimation"];

but nothing is displaying.

I've seen several other Stack posts about the kCAAnimationDiscrete needing the first timing to be 0.0f, which as you can see it is.

Please advise?

Answer 1

tl;dr: Change the animation key path to contents, like this:

self.testAnimation = [CAKeyframeAnimation animationWithKeyPath:@"contents"];

---

Why it isn't working

When you are writing [CAKeyframeAnimation animationWithKeyPath:@"TestAnimation"]; you are trying to animate the TestAnimation property on the layer which doesn't exist. Thus, any changes to that property has no visual effect.

animationWithKeyPath: vs addAnimation:forKey:

It is not uncommon to miss the difference between the keyPath when creating an animation and the key when adding the animation to a layer.

When creating a new animation you can specify the keyPath to the property that should be animated. If you create your animation without a keyPath you can set it using the keyPath property on the animation.

When adding an animation to a layer you can specify a key. This key is only used to access the animation using the animationForKey: method on CALayer.

How to make it work

Since you are adding images to your values I'm assuming that you want to animate between the images in which case you should instead use the contents property as the key path.

From the documentation of the contents property:

An object that provides the contents of the layer. Animatable.

...

You can set this property to a CGImageRef to present the contents of the image in place of the layer’s contents.