自动布局违反平移旋转动画

Question

我有 UIView，我想用旋转动画它。我也想使用自动布局。我已经看到了很多stackoverflow的常见问题，但是我没有找到任何适用的解决方案。 那么，让我们从我的界面和动画代码开始吧；我有一个带有图像的 UIView，它必须被旋转。现在我有按钮，可以激活旋转。在截图中你可以看到红叉，这一定是旋转中心（现在它在图像上，但我想在旋转的 UIView 之外制作旋转中心，我知道这可以用 AnchorPoint 存档）。

这是我的旋转动画代码：

#define ROTATE_DURATION 3.0

- (IBAction)rotateArrow {

CGAffineTransform transform = self.hand.transform;

NSLog(@"layer possition before animation x: %f; y: %f",self.hand.layer.position.x,self.hand.layer.position.y);

[UIView animateWithDuration:ROTATE_DURATION/3 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{

        self.hand.transform = CGAffineTransformRotate(transform, 2*M_PI/3) ;
        [self.hand layoutIfNeeded];

        NSLog(@"layer possition after animation 1 x: %f; y: %f",self.hand.layer.position.x,self.hand.layer.position.y);
     }
    completion:^(BOOL finished) {
        [UIView animateWithDuration:ROTATE_DURATION/3 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{

            self.hand.transform = CGAffineTransformRotate(transform, -2*M_PI/3) ;
            [self.hand layoutIfNeeded];

            NSLog(@"layer possition after animation 2 x: %f; y: %f",self.hand.layer.position.x,self.hand.layer.position.y);
        }
    completion:^(BOOL finished) {
        [UIView animateWithDuration:ROTATE_DURATION/3 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{

            self.hand.transform = CGAffineTransformRotate(transform, 0) ;
            [self.hand layoutIfNeeded];

            NSLog(@"layer possition after animation 3 x: %f; y: %f",self.hand.layer.position.x,self.hand.layer.position.y);
        }
        completion:^(BOOL finished) {

        }];
    }];
}];



} 

那么，有什么问题： 当旋转正在进行时，UIView 会更改 center 和 layer.position 属性，这就是为什么我的 UIView 在动画时会“跳跃”。如果关闭自动布局，动画就可以了。我观看了 WWDC 2012 “Auto Layout by Example”，发现我会使用 [self.hand layoutIfNeeded]; 一切都很好，但根本不是。动画变得更流畅了，但我看到了这个“跳跃”。所以，这是我的“输出”。

当它动画时，UIView 向右移动，就像你在图像上看到的那样，然后回到正常位置。我该如何解决这个“跳跃”？

这是一个日志：

 layer possition before animation x: 160.000000; y: 99.500000
 layer possition after animation 1 x: 197.349030; y: 114.309601
 layer possition after animation 2 x: 197.349030; y: 114.309601
 layer possition after animation 3 x: 160.000000; y: 99.500000

谢谢。

Answer 1

解决办法是：

1. 创建一个使用自动布局的容器视图。
2. 旋转视图（应用了变换）应该使用自动 调整大小。
3. 将旋转视图添加到容器视图中。

创建视图：

// Create container view
{
    self.mContainerView = [[UIView alloc] init];
    self.mContainerView.translatesAutoresizingMaskIntoConstraints = NO;
}

// Create view who will have the transform 
{
    self.mRotateView = [UIButton buttonWithType:UIButtonTypeCustom];
    self.mRotateView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;        
        [self.mContainerView addSubview:self.mRotateView];
}

处理转换：

{
    CGFloat lAngle = 180.0;    
    [UIView animateWithDuration:0.5 delay:0.0 options: UIViewAnimationOptionAllowUserInteraction |UIViewAnimationOptionCurveLinear animations:^{
            CGAffineTransform transform = CGAffineTransformMakeRotation(lAngle);
            self.mRotateView.transform = transform;
        } completion:NULL];
}

Answer 2

当我布局视图时，一切都开始正常工作。当您进行转换时，请务必记住，自动布局始终根据您设置的约束计算您的视图边界和框架。所以，在我的例子中，我只是在我的旋转视图中添加了中心垂直和水平对齐、宽度和高度，所以自动布局机制知道我的视图到底是什么时候。一切顺利。这是一个很好的自动布局教程：

http://www.raywenderlich.com/50319/beginning-auto-layout-tutorial-in-ios-7-part-1

Answer 3

您可能遇到了general incompatibility between autolayout and transforms。看看那里了解更多细节，但简短的故事是您可能不想在正在转换的同一视图上使用自动布局。