CALayer opacity animation

Question

I want to create a CALayer animation that gives sort of a 'flashy' effect. For that I'm trying to animate the 'opacity' property, but my problem is that I have no idea where to start and how to do it.

Here is a graphical explanation of the animation:

opacity
   |    ___
1  |   |   |
   |   |   |    * repeatCount
0  |___|   |_ . . .
   -------------------------> time
    |______|
    duration

The opacity starts at 0, then animates to 1, then to 0 again (this 0-to-1-to-0 animation takes a number of seconds equal to duration). Then this process is repeated 'repeatCount' times.

Here's some background on the code:

float duration = ...; // 0.2 secs, 1 sec, 3 secs, etc
int repeactCount = ...; // 1, 2, 5, 6, ect

CALayer* layer = ...; // I have a CALayer from another part of the code
layer.opacity = 0;

// Animation here

done = YES; // IN THE END of the animation set this ivar to yes

What is the best way to accomplish this? I have never used CALayers before, so this is also a good opportunity to learn how their animation system works. By the way, I have searched the docs and I understand how you add one or two simple animations, but I have no idea how to do this particular one.

trojanfoe · Accepted Answer · 2019-04-29T08:01:35.277

48

The best way to accomplish this is to use an explicit animation (see guide) by creating an instance of CABasicAnimation and adding it to the layer.

The code would look something like this:

CABasicAnimation *flash = [CABasicAnimation animationWithKeyPath:@"opacity"];
flash.fromValue = [NSNumber numberWithFloat:0.0];
flash.toValue = [NSNumber numberWithFloat:1.0];
flash.duration = 1.0;        // 1 second
flash.autoreverses = YES;    // Back
flash.repeatCount = 3;       // Or whatever

[layer addAnimation:flash forKey:@"flashAnimation"];

If you want to know when the animation is done you can set a delegate and implement the animationDidStop:finished: method, however it's best to use a completion block as that allows all the code to be in the same place. If you are writing for iOS 4 or OS X then you can use the excellent CAAnimationBlocks category to accomplish this.

edited Apr 29 '19 at 08:01

answered Sep 16 '12 at 17:10

trojanfoe

120,358
21
212
242

Thank you! That works perfectly. Just one thing: it's 'animationWithKeyPath:' – Alex Sep 16 '12 at 17:15
@Alex OK, I'll update the answer (it was from memory - not always the most reliable source...) – trojanfoe Sep 16 '12 at 17:37
I don't understand. It fades in and then it immediately disappears. – Iulian Onofrei May 26 '15 at 11:51
@trojanfoe was "guide" supposed to link here? https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/CreatingBasicAnimations/CreatingBasicAnimations.html#//apple_ref/doc/uid/TP40004514-CH3-SW1 – Ky - Apr 28 '19 at 07:34

score 2 · Answer 2 · answered Sep 16 '12 at 17:20

Trojanfoe's answer is excellent. I just want to add that if you want more control over the "timeline" (how long should it take to fade out? how long should we then wait? then how long should it take to fade in? and so on) you're going to want to combine multiple CABasicAnimations into a CAAnimationGroup.

You might want to read my book chapter on this topic, the last part of which constitutes a tutorial on CAAnimation and its offspring:

http://www.apeth.com/iOSBook/ch17.html#_core_animation

Note that my discussion is directed at iOS; on Mac OS X, if that's where you are, the view/layer architecture is a little different, but what it says about CAAnimation is still correct.

CALayer opacity animation

2 Answers2

Linked