Pixel Transition in iOS

Question

How do you implement a pixel transition like this (animated gif) in iOS?

Is it possible to implement using Core Animation?

Answer 1

C4 - Travis's comment is more correct, your best option is probably to animate the animation. You will want to take the QA1703 code to capture the screen, but adjust the size of the context you are creating in UIGraphicsBeginImageContextWithOptions and change (CTM) accordingly immediately after calling UIGraphicsGetCurrentContext . So, just by typing as I write this, your adjustments will lead to something like:

 - (UIImage*)screenshotWithScale:(CGFloat)scale { // Create a graphics context with the target size // On iOS 4 and later, use UIGraphicsBeginImageContextWithOptions to take the scale into consideration // On iOS prior to 4, fall back to use UIGraphicsBeginImageContext CGSize imageSize = [[UIScreen mainScreen] bounds].size; /* YOU'VE ADDED: */ imageSize.width *= scale; imageSize.height *= scale; if (NULL != UIGraphicsBeginImageContextWithOptions) /* ... then stuff as per the original, down to ... */ CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSaveGState(context); CGContextScaleCTM(context, scale, scale); // Iterate over every window from back to front for (UIWindow *window in [[UIApplication sharedApplication] windows]) /* etc, etc, down to... */ // Retrieve the screenshot image UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); CGContextRestoreGState(context); UIGraphicsEndImageContext(); return image; } 

With scale = 1.0 you will return a UIImage exactly equal to the screen. With scale = 0.5 you get one and a half the number of pixels back and forth, with scale = 0.25 you get a quarter of the number of pixels back and forth, etc.

You can then put this UIImage into a UIImageView and set its level-up filter to kCAFilterNearest . Showing that the presentation of the image should give you a thoughtful pixelated version of the original. Then you can either be lazy, or simply perform a half-sized rendering of what is already on the screen (so that viewing in real time for the first time, viewing the image afterwards) or adapt the code not for rendering from the main window, but rather from viewing the nominated view and redraw from the original view hierarchy as needed (which will work if you want to do something else, except that divide the scale by an integer).

Answer 2

There are CIPixellate and CIHexagonalPixellate filters documented in the Master Image Filter Reference, but they are currently only available for OSX ... unfortunately not iOS.

http://developer.apple.com/library/mac/#documentation/graphicsimaging/reference/CoreImageFilterReference/Reference/reference.html

Answer 3

I don’t know about a good way to use this in the transition, but if you could capture a still image of your content (like UIImage), you should be able to create an animated pixel filter to create the aforementioned effect.

I am showing an example of my GPUImagePixellateFilter in this answer , which can cause this effect if you set the fractionalWidthOfAPixel property to a timer.

For a still image, you need to pull your UIImage as a GPUImagePicture file and link it using a pixel filter with GPUImageView. For each pixel width update, you want to call -processImage on the image source to update the image on the screen. After the initial setup and image upload, this animation should run at 60 FPS on every iOS device that supports OpenGL ES 2.0.