4

我有 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

谢谢。

4

3 回答 3

5

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

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

于 2013-11-17T18:10:31.657 回答
2

您可能会遇到 autolayout 和 transforms 之间的普遍不兼容问题。在那里查看更多详细信息，但简短的故事是您可能不想在正在转换的同一视图上使用自动布局。

于 2013-11-11T22:56:21.010 回答
2

解决方案是：

  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];
}
于 2015-04-28T07:35:33.137 回答