How to crossfade between 2 images on iPhone using Core Animation

iphone core-animation
willc2 picture willc2 · Oct 11, 2009 · Viewed 25.4k times · Source

I'm doing this to learn how to work with Core Animation animatable properties on iPhone (not to learn how to crossfade images, per se).

Reading similar questions on SO leads me to believe it can be done by animating the .contents property of the UIImageView's layer like so:

UIImage *image1 = [UIImage imageNamed:@"someImage1.png"];
UIImage *image2 = [UIImage imageNamed:@"someImage2.png"];

self.imageView.image = image1;
[self.view addSubview:self.imageView];

CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:@"contents"];
crossFade.duration = 5.0;
self.imageView.layer.contents = image2;
[self.imageView.layer addAnimation:crossFade forKey:@"animateContents"];

Did I get a detail wrong or is this not possible.

Update: the above code produces a blank UIImageView. When I change this line:

self.imageView.layer.contents = image2.CGImage;

...I can see the image now but it does not fade in, it just appears instantly.

Answer

Glen Low picture Glen Low · Oct 15, 2009

You were almost there.

CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:@"contents"];
crossFade.duration = 5.0;
crossFade.fromValue = image1.CGImage;
crossFade.toValue = image2.CGImage;
[self.imageView.layer addAnimation:crossFade forKey:@"animateContents"];

Note that the animation is independent of the actual values/contents of the UIImageView. Therefore you'll need to

self.imageView.image = image2;

... to set the final result for your image.

Related questions

iPhone UIView Animation Best Practice

What is considered best practice for animating view transitions on the iPhone? For example, the ViewTransitions sample project from apple uses code like: CATransition *applicationLoadViewIn = [CATransition animation]; [applicationLoadViewIn setDuration:1]; [applicationLoadViewIn setType:kCATransitionReveal]; [applicationLoadViewIn setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [[myview layer] addAnimation:…

Read More
CALayer: add a border only at one side

I can add a border to a CALayer in this way: [webView.layer setBorderColor: [[UIColor colorWithRed:0.6 green:0.7 blue:0.2 alpha:1] CGColor]]; [webView.layer setBorderWidth: 2.75]; But is it possible to add a border only at one side? I only need a border …

Read More
Animation End Callback for CALayer?

I'm wondering where the callbacks are (or if there are anything) for animations in a CALayer. Specifically, for implied animations like altering the frame, position, etc. In a UIView, you could do something like this: [UIView beginAnimations:@"SlideOut" context:nil]; […

Read More