Question

I have a round image that I want to “squish” vertically so that it looks more like a horizontal line, then expand it back to the original shape. I thought this would work by setting the layer’s anchor point to the center and then animating the frame via UIViewAnimation with the height of the frame = 1.

[self.imageToSquish.layer setAnchorPoint:CGPointMake(0.5, 0.5)];

CGRect newFrame = CGRectMake(self.imageToSquish.frame.origin.x, self.imageToSquish.frame.origin.y, self.imageToSquish.frame.size.width, 1 );
[UIView animateWithDuration:3
                 animations:^{self.imageToSquish.frame = newFrame;}
                 completion:nil];

But the image shrinks toward the top instead of around the center.

Answer 1

You’re giving it a frame that has its origin—at the top left—in the same position as it started. You probably want to do something more like this, adding half the image’s height:

CGRect newFrame = CGRectMake(self.imageToSquish.frame.origin.x, self.imageToSquish.frame.origin.y + self.imageToSquish.frame.size.height / 2, self.imageToSquish.frame.size.width, 1);

Alternatively—and more efficiently—you could set the image view’s transform property to, say, CGAffineTransformMakeScale(1, 0.01) instead of messing with its frame. That’ll be centered on the middle of the image, and you can easily undo it by setting the transform to CGAffineTransformIdentity.