Flipping a circular UIView

Question

I'm working on a project that has circular views that flip over.

So far, I've tried a couple of the solutions provided here on SOflow:

• simply rounding the corners of the view's layer.
• creating a custom CircleView that sets backgroundColor to [UIColor clearColor] and manually drawing the circle on in drawRect.

In each case, when the view flips to the new view, it's a rectangular portion of the screen that flips, not just the circle. I'd like the flip to just be the circle, but I'm not sure where to go next.

Here's the method I'm using to flip the view currently:

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

}

The container the SpotViews are in is also a SpotView, so it should be just a circle as well.

Any guidance would be appreciated!

Answer 1

The problem is transitionFromView:toView:… animates the superview of the fromView.

I reproduced the problem:

I was able to fix it in my test case simply by embedding my fromView and toView in a container view with a clear background. Here's my working version:

My nib looks like this:

I have bounds rectangles enabled (Editor > Canvas > Show Bounds Rectangles), so you can see the outline of the container view, which is bigger than its subviews.

I have a red view and a blue view as subviews of the container view. The blue view is behind the red view and has the same frame. I apply circular masks to them in code.

Here's my code:

- (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];
}