翻转受自动布局约束的圆形UIView

Question

我有一个观点，我已经以以下方式发出通知。

view.layer.cornerRadius = view.frame.size.width / 2;
view.clipsToBounds = YES;

我在填充视图的视图中有一个UIImageView。

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, view.frame.size.width, view.frame.size.height)];
imageView.contentMode = UIViewContentModeScaleAspectFill;
[view addSubview: imageView];

该视图具有以下约束：

• 水平居中

我想通过翻转视图来设置视图的动画。我尝试了两种方法来做到这一点。

方法1：使用视图转换

这将导致在动画翻转时显示完整图像（图像丢失纵横比填充，看起来像是在视图中而不是视图本身翻转图像）。

[UIView transitionWithView:view duration:1.0 options:UIViewAnimationOptionTransitionFlipFromRight | UIViewAnimationOptionShowHideTransitionViews animations:^{
} completion:nil];

方法2：应用层变换

这会导致一个非常糟糕的动画，其中视图控制器的一半被切断。我相信这可能是由于自动布局的限制。

[UIView animateWithDuration:1.0 animations:^{
    view.layer.transform = CATransform3DMakeRotation(M_PI,0.0,1.0,0.0);
}];

如何实现视图的平滑翻转动画，同时牢记视图的约束和图像子视图？

使用方法1的截图

这是原始视图和子视图

下面是翻转动画中间的样子

使用方法2的截图

图像内部视图被切成两半，仍然可见的一半翻转。

UIView和UIImageView的约束

Answer 1

这对我有用。确保在viewDidLayoutSubviews中调用它。

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    [self makeImageRound]; // call it here to make perfect circle
}


- (void)makeImageRound
{
    self.profileView.layer.cornerRadius = self.profileView.frame.size.width / 2;
    self.profileView.layer.borderWidth = 0.0f;
    self.profileView.layer.borderColor = [UIColor whiteColor].CGColor;
    self.profileView.clipsToBounds = YES;
    self.profileView.layer.masksToBounds = true;
}

Answer 2

UIImageView约束有问题。为了在UIView中获得完整的UIImageView，您需要设置以下约束。

输出为：

希望这对你有帮助。