翻轉圓形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

回答

相關問題