Create a porthole animation transition on the iPhone?

Question

Can anyone recommend how I might be able to create a view transition that looks like a circle expanding from the center of the view?

Any pointers would be helpful, or maybe a link to some similar code, even in a different language.

Answer 1

Perhaps fill the screen with black, and then remove the black using a EllipseInRect that starts at the center point of the animation, and slowly increases in size and then deletes another segment, which loops until it's completed or hits an upper limit.

The smoothness of the animation would be controlled by how much the size of the Rect (which the Ellipse is then created inside of) increases every x amount of time.

The speed of the animation would be controlled by how often you increase the size of the rect.

Check out CoreGraphics if you haven't already. It's pretty powerful.

Answer 2

If you want to do that for images.. then you could use a mask and then make it bigger Here is how you do it for images

   CGRect bounds = CGRectMake(0.0f, 0.0f, 100, 100);

    // Create a new path
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGMutablePathRef path = CGPathCreateMutable();

    // Add circle to path
    CGPathAddEllipseInRect(path, NULL, bounds);
    CGContextAddPath(context, path);
    // Clip to the circle and draw the image
    CGContextClip(context);
    [image drawInRect:bounds];  //HOW WOULD YOU CLIP A VIEW INSTEAD OF AN IMAGE?
    CFRelease(path);