How can I animate the height of a CALayer with the origin coming from the bottom instead of the top?

Question

I want to animate a simple CALayer to move up and down in response to incoming data (bars on a graphic equaliser)

The CALayer should remain fixed along the bottom and move up and down as the height is animated.

Can anybody advise on the best way to achieve this without having to animate the origin y coord as well as the height?

Answer 1

If you want the layer to always grow and shrink from the bottom, then you should set your own anchorPoint on the layer that is the bottom. The anchor point is specified in the layers unit coordinate space so both X and Y range from 0 to 1 inside of the bounds, no matter the size.

yourLayer.anchorPoint = CGPointMake(0.5, 1.0);

Then for the animation, you simply animate the bounds (or even better, you can animate "bounds.size.height", since only the height is changing):

// set the new bounds of yourLayer here...

CABasicAnimation *grow = [CABasicAnimation animationWithKeyPath:@"bounds.size.height"];
grow.fromValue = @0;   // from no height
grow.toValue   = @200; // to a height of 200
grow.duration  = 0.5;
// add any additional animation configuration here...
[yourLayer addAnimation:grow forKey:@"grow the height of the layer"];

---

• You can read more about the anchor point in this article I wrote a couple of years ago.
• You can read more about the Key-Value Coding extensions for Core Animation in the documentation.