Why can't I set the opacity of a layer after a CABasicAnimation finished?

Question

I have a view with a sublayer called specialLayer. Implicit animations for opacity are disabled like this:

self.specialLayer.actions = [NSDictionary dictionaryWithObjectsAndKeys:
                                            [NSNull null], @"opacity", nil];

There are only two methods which access this sublayer.

- (void)touchDown {
    self.specialLayer.opacity = 0.25f;
}

- (void)touchUp {
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.fromValue = [NSNumber numberWithFloat:self.specialLayer.opacity];
    animation.toValue = [NSNumber numberWithFloat:1.0];
    animation.duration = 0.5;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [self.specialLayer addAnimation:animation forKey:@"opacity"];
}

This happens:

1) User presses a button down (holding) and -touchDown gets called. specialLayer's opacity instantly becomes 0.25

2) User releases button and -touchUp gets called. specialLayer's opacity animates back to 1.0

This sequence only works ONCE!

3) User presses a button down again (holding) and -touchDown gets called. But specialLayer's opacity does not change on screen! Nothing happens even though self.specialLayer.opacity = 0.25f; gets called. Opacity appears to remain 1.0f.

4) User lifts finger up and -touchUp gets called. specialLayer's opacity JUMPS to 0.25 and from there animates to 1.0f.

I checked with NSLog to make sure the methods get called in this order. They do.

When I uncomment the animation code and set the opacity directly to 1.0, subsequent direct opacity changes are effective immediately. It is definitely the CABasicAnimation which causes problems. Removing the code that disables implicit animations has no effect on this problem.

I can't for the life of me figure out what is happening here. Why does CALayer not reflect the opacity value I set to it some time later after I added a CABasicAnimation for opacity? Is this a bug?

What am I doing wrong?

what do you mean by layer opacity is broken ? You need to set the final value of layer opacity before adding animation. Like layer.opacity = 1.0 — msk
@ProudMember: Have you read my answer? The very first sentence explains your fundamental issue. Please let me know if you have any questions. — Lily Ballard

Lily Ballard Lily Ballard · Accepted Answer · 2012-09-13T19:46:01

You set the animation's removedOnCompletion to NO. This means that when the animation completes, it still stays on the layer and still controls the value of opacity for the purposes of rendering. When you call this code a second time, the new animation replaces the old, which causes the jump (as it's now using the newly-set 0.25f as the start point).

The solution is to just stop setting removedOnCompletion to NO. Instead, you should just set the actual opacity of the layer to the same value as the endpoint of the animation., at the same time as you add the animation.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
// you can omit fromValue since you're setting it to the layer's opacity
// by omitting fromValue, it uses the current value instead. Just remember
// to not change layer.opacity until after you add the animation to the layer
animation.toValue = [NSNumber numberWithFloat:1];
animation.duration = 0.5;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[layer addAnimation:animation forKey:@"opacity"];
layer.opacity = 1; // or layer.opacity = [animation.toValue floatValue];

The reason for this is because of the way layer rendering works. When CoreAnimation renders a layer tree to the screen, it copies the model tree and produces what's called the presentation tree. It does this by copying all the layers, and then applying all the animations. So it goes over each animation on the layer, plugs the time into the timing function, plugs the resulting progress into the interpolation between the from/to values, and applies that final value back onto the presentation layer's property.

So when you leave an animation on the layer permanently, this animation will always override whatever the actual model value is for the key. It doesn't matter how many times you change layer.opacity, the animation that controls opacity will always overwrite the value for presentation purposes.

This same reason is also why you can set the layer.opacity to whatever you want after adding the animation, because the animation will take precedence. Only when the animation is removed (which happens by default when the animation completes) will the model value for that property get used again.

Why can't I set the opacity of a layer after a CABasicAnimation finished?

1 Answers