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

Question

我有UIView，我想用旋转来制作动画。我也想使用自动布局。我已经看到了很多常见的问题，但我没有找到任何适用的解决方案。那么，让我们从我的界面和动画代码开始；我有一个带图像的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“自动布局示例”，发现我会使用[self.handlayoutIfNeed]；都很好，但一点也不好。动画变得更流畅了一点，但我看到了这个“跳转”。所以，这是我的“输出”。

当它是动画时，UIView会像你在图像上看到的那样向右转，然后回到正常位置。我如何修复这个“跳跃”？

这是一份日志：

 layer possition before animation x: 160.000000; y: 99.500000
 layer possition after animation 1 x: 197.349030; y: 114.309601
 layer possithtml" target="_blank">ion 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

您可能会遇到autolayout和transforms之间的一般不兼容问题。查看这里的更多细节，但简单的说，您可能不想在正在转换的同一个视图上使用autolayout。

Answer 3

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

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