Rotation around different anchorPoint and position makes image jump to new position first

Question

I'm doing a rotation animation on a view and want it to rotate around the view's center X and bottom Y. I change the anchorPoint and position of the layer and run the animation. Here's my code:

- (void)viewDidLoad {
  [super viewDidLoad];
  _imageView = [UIImageView newAutoLayoutView];
  _imageView.image = [PCImage imageNamed:@"Umbrella"];
  [self.view addSubview:_imageView];
  [_imageView autoAlignAxisToSuperviewAxis:ALAxisVertical];
  [_imageView autoPinEdgeToSuperviewEdge:ALEdgeBottom];
}

- (void)viewDidAppear:(BOOL)animated {
  [super viewDidAppear:animated];

  CGPoint newPosition = CGPointMake(CGRectGetMidX(_imageView.frame), CGRectGetMaxY(_imageView.frame));
  NSLog(@"frame %@, new position %@", NSStringFromCGRect(_imageView.frame), NSStringFromCGPoint(newPosition));

  _imageView.layer.anchorPoint = CGPointMake(.5, 1.0);
  _imageView.layer.position = newPosition;


  [UIView animateKeyframesWithDuration:2.0 delay:2.0 options:UIViewKeyframeAnimationOptionCalculationModeLinear | UIViewKeyframeAnimationOptionAutoreverse | UIViewKeyframeAnimationOptionRepeat animations:^{
    [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:.1 animations:^{
      _imageView.transform = CGAffineTransformMakeRotation(M_PI / 64);
    }];
  } completion:nil];
}

edit

The rotation is working, but the view 'jumps' upward to a new position first, where the view's bottom is now where the view's center Y was when first laid out. I thought changing the anchorPoint and updating the position would prevent the jumping. The view is pinned to the superview's bottom edge, and center X to the superview's center X in autolayout, if that might matter. Any ideas?

edit2

I've read other good posts on this like the following but I must be missing something..

Scale UIView with the top center as the anchor point?

hi @robmayoff, i read some of your posts regarding the jumps - thanks for those - but still unable to get this working. the view is autolayout, not sure if that's part of the problem. the frames are being animated after layout occurs in viewDidAppear. — 1192805

1192805 1192805 · Accepted Answer · 2015-04-08T18:28:03

I ended up changing the view to not use autolayout after reading this post:

Adjust anchor point of CALayer when autolayout is used

Looks like transforms and autolayout aren't designed to work well together.

_imageView = [UIImageView new];
_imageView.image = [PCImage imageNamed:@"Umbrella"];
_imageView.frame = CGRectMake(0, kScreenHeight - _imageView.image.size.height, _imageView.image.size.width, _imageView.image.size.height);
[self.view addSubview:_imageView];

At some point hoping to experiment with other ideas in that post.

Rotation around different anchorPoint and position makes image jump to new position first

1 Answers