Question

I would like to animate a radial gradient to shrink and grow the inner radius, as if it were pulsing.

Right now I’m rendering the gradient with CGGradient, but I’m not sure how to animate it. I’ve seen this topic

Can you animate gradients using Quartz in an iPhone?

Which explains how animate a linear gradient with CAGradientLayer, but it doesn’t seem like this will draw a radial gradient.

Is there an easy way to animate a CGGradient, or some way to create a radial gradient CAGradientLayer?

Any thoughts are appreciated.

Answer 1

If only Core Image was on the phone, this would be trivial. An animatable filter is what you need. 😉

The CAGradientLayer does allow for animating its properties, however, it currently only supports linear gradients.

The only thing I can think of if you’re wanting to animate using Core Animation is to animate the transform of the view into which you’re drawing your gradient.

You can animate any view’s transform pretty simply. Just draw your gradient in the view as you’re probably already doing and then animate the transform using scaling. Using explicit animation, it would be something like:

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
[anim setFromValue:[NSValue valueWithCATransform3D:CATransform3DIdentity]];
// Scale x and y up
[anim setToValue:[NSValue valueWithCATransform3D:
                CATransform3DMakeScale (1.0f, 1.0f,0.0f)]];
[anim setAutoreverses:YES];
[anim setRepeatCount:HUGE_VALF];

[[gradientView layer] addAnimation:anim];

Unfortunately this would look like expanding and contracting more than pulsing, I think (though I haven’t tried it).

I think if you want a true pulsing with your gradient at this point, you probably have to do the animation manually using your own timer. Just re-draw periodically changing your inner radius value as you go. Ugh. I’m not absolutely sure that’s the only way, but I have yet to see a compelling pulse animation on the phone with a gradient as you’re wanting.

There is one other idea I would like to try at some point. Core Animation now allows animating arbitrary properties/values. You could theoretically set up an animation using some arbitrary keypath that you name (say innerRadius, for example) and override the -drawLayerInContext delegate method. Then you could grab the current value from the presentationLayer while it’s in mid-flight and re-draw your gradient there instead. This is just theoretical as I haven’t tried it, but it seems like it might be worth looking into.

Best regards.