Using a UIButton to mask a moving UIView

Question

I want to bind two views to a button's border like a mask. The effect I want is seen in the image below

So I have a custom controller that uses a PageViewController to swipe between two UIViewControllers. I also have two views (the red one and the blue one). I can track the direction and degree of the page turning, so I can link that to the movement of the two views. All I need to do is apply a mask to the moving boxes so that all the movement stays within the button.

If anyone knows how to do this, I'd be eternally grateful for the information!

Answer 1

My understanding is that you have a view, then you want to transition between its two subviews with a sliding animation. This is fairly straight forward.

First set "Clip Subviews" to true (either in storyboard editor or setting view.clipToBounds=true). If you want a sphere like you show then set layer.cornerRadius = view.frame.size.width/2

The you can just set the frames of your subviews- either animating them with UIView animateWithDuration or setting the frames yourself in your animation loop.

The former in code (for sliding the first element to the left and right element in):

[UIView animateWithDuration:duration animations:^{
    [subview1 setFrame:CGRectMake(-subview1.frame.size.width, 0, subview1.frame.size.width, subview1.frame.size.height)];
    [subview2 setFrame:CGRectMake(0, 0, subview2.frame.size.width, subview2.frame.size.height)];
}];

The reverse animation is similar. If you're doing it in your own animation loop (which sounds like what you want) then you can do the interpolation yourself pretty easily.

If you want to be more advanced with your mask (i.e. based on an image) then look at something like this: How to mask UIViews in iOS

Answer 2

This solution may not be the optimized one, but do the trick you want. First i wanna make sure that i understand your requirement. I understand that you wanna go away to left the red image & bring in the right blue image in the button with the sliding effect.

If my understanding meet your requirement,Here is the trick

• First decide which portion of red & blue image you needed. That must be easy as you know the direction & degree of the turning the UIPageViewController.
• Then Crop that decided portions from the red & blue image using the code here.
• Now draw both resulted cropped image on the coreGraphics side by side (red on the left & blue on the right) & retrieve the final resulted image.
• set the image to the UIButton.
• Finally to acquire the round shape you can set the radius property of layer property of the button.

For the third step, how you can you draw image on coreGraphics & retrieve apple give a detail explanation here

You have to do all these steps each time you wanna update the image of the UIButton. There may be a other good way to do this :)

Answer 3

You can use corner radious on the button layer

    CGPoint saveCenter = roundedView.center;
    CGRect newFrame = CGRectMake(roundedView.frame.origin.x, roundedView.frame.origin.y, newSize, newSize);
    button.frame = newFrame;
    button.layer.cornerRadius = newSize / 2.0;
    button.center = saveCenter;