翻转圆形UIView

我正在研究一个具有翻转的圆形视图的项目。翻转圆形UIView

到目前为止，我已经试过一对夫妇在这里提供SOflow的解决方案：

简单地舍入视图的层的角落。
创建自定义CircleView，将backgroundColor设置为[UIColor clearColor]，然后手动绘制圆圈drawRect。

在每种情况下，当视图翻转到新视图时，它是翻转屏幕的矩形部分，而不仅仅是圆形。我希望翻转成为圈子，但我不确定下一步该去哪里。

下面是我使用翻转当前视图的方法：

-(void)changeSpotToView:(SpotView *)toView { 
    [UIView transitionFromView:self.activeView 
         toView:toView 
         duration:1.0 
         options:UIViewAnimationOptionTransitionFlipFromTop 
        completion:^(BOOL finished) { 
         self.activeView = toView; 
        }]; 

}

容器中的SpotView s为中也是SpotView，所以它应该只是一个圆也。

任何指导将不胜感激！

来源

2012-11-20 Tim Sullivan

后的代码。 –

完成，但我怀疑它会专门为此提供很多帮助。问题似乎是，UIKit将整个框架视为视图，而不仅仅是可见部分，所以它是一个矩形翻转，而不是一个圆形翻转。 –

@CodaFi Views可以有透明的部分。期望这些部分在动画期间保持透明是合理的。 –

问题是transitionFromView:toView:…动画fromView的超级视图。通过简单地用一个明确的背景容器视图嵌入我的fromView和toView

enter image description here

我能解决它在我的测试案例：

我转载的问题。这是我的工作版本：

working flip

我的笔尖是这样的：

nib

我已经启用边界矩形（编辑>画布>显示边界矩形），所以你可以看到大纲容器视图的大小比子视图大。

我有一个红色视图和一个蓝色视图作为容器视图的子视图。蓝色视图位于红色视图的后面，并具有相同的框架。我用代码将圆形面具应用于他们。

这里是我的代码：

该动画翻转

- (void)viewDidLoad { 
    [super viewDidLoad]; 
    self.blueView.hidden = YES; 
} 

- (void)viewDidLayoutSubviews { 
    [super viewDidLayoutSubviews]; 
    [self addCircleMaskToView:self.blueView]; 
    [self addCircleMaskToView:self.redView]; 
} 

- (void)addCircleMaskToView:(UIView *)view { 
    CAShapeLayer *maskLayer = [CAShapeLayer layer]; 
    maskLayer.frame = view.bounds; 
    maskLayer.path = [UIBezierPath bezierPathWithOvalInRect:view.bounds].CGPath; 
    maskLayer.fillColor = [UIColor whiteColor].CGColor; 
    view.layer.mask = maskLayer; 
} 

- (IBAction)buttonWasTapped:(id)sender { 
    [UIView transitionFromView:self.redView toView:self.blueView 
     duration:1.0 options:UIViewAnimationOptionTransitionFlipFromTop 
     | UIViewAnimationOptionShowHideTransitionViews 
     completion:nil]; 
}

来源

2012-11-20 07:42:05

谢谢，罗布，这看起来不错！今天我会试一试。 –

你能告诉我你是如何从iOS模拟器中创建这些gif的吗？ – singingAtom

我使用Snapz Pro X将屏幕录制到电影文件。然后，我将这些电影帧作为Photoshop中的图层导入，删除了不需要的帧，并使用Save For Web进行保存。 –

翻转圆形UIView

回答

相关问题