How to rotate an layer at a specific anchor point without a skip?

Question

I want to rotate a layer with an image at the top left corner, and not the center. According to the docs I set the anchorPoint property to [0, 1]. The view rotates in my example by 50°, but before it starts to animate, the view jumps to another point at the screen.

self.shakeTag.layer.anchorPoint = CGPointMake(0.0f, 1.0f);
[UIView beginAnimations:@"rotate" context:nil];
[self.shakeTag.layer setTransform:
  CATransform3DRotate(CATransform3DIdentity,
  radians(50.0), 0.0f, 0.0f, 1.0f)];
[UIView commitAnimations];

radians() is defined like this:

static inline double radians (double degrees) {return degrees * M_PI/180;}

When I use an image that is 4 times the size and has a lot of transparent pixels, I can rotate it at the default anchor point [0.5, 0.5], but I don’t want to waste the space for invisible pixels. Any ideas how I can prevent the layer from jumping before the rotation takes place?

If you think the answer is correct, it would be awesome if you accept. — Krumelur, Aug 08 '13 at 10:32
you need to see my answer here: http://stackoverflow.com/a/22188420/550393 — 2cupsOfTech, Mar 28 '14 at 03:01

score 23 · Accepted Answer · edited May 23 '17 at 11:55

Changing the anchor point affects the positioning of your view. You'll need to change the view's position if you change the anchor point and if you want to keep your view where it currently is. Use something like this (taken from here: Layer Position jumps at start of (Core) Animation) to set your anchor point and compensate position changes:

-(void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
    CGPoint newPoint = CGPointMake(view.bounds.size.width * anchorPoint.x, view.bounds.size.height * anchorPoint.y);
    CGPoint oldPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x, view.bounds.size.height * view.layer.anchorPoint.y);

    newPoint = CGPointApplyAffineTransform(newPoint, view.transform);
    oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform);

    CGPoint position = view.layer.position;

    position.x -= oldPoint.x;
    position.x += newPoint.x;

    position.y -= oldPoint.y;
    position.y += newPoint.y;

    view.layer.position = position;
    view.layer.anchorPoint = anchorPoint;
}

Also see here for more details: Changing my CALayer's anchorPoint moves the view

How to rotate an layer at a specific anchor point without a skip?

1 Answers1

Linked