christianroman / crpixellatedview

Custom UIView subclass with a pixellated animation inspired by Facebook's Slingshot app.

CRPixellatedView

Custom UIView subclass with a pixellated animation inspired by Facebook's Slingshot app.

Installation

There are two options:

CocoaPods

• Add the dependency to your Podfile:

platform :ios
pod 'CRPixellatedView'
...

• Run pod install to install the dependencies.

Source files

• Just clone this repository or download it in zip-file.
• Then you will find source files under CRPixellatedView directory.
• Copy them to your project.

Usage

To use CRPixellatedView, create a CRPixellatedView, configure and animate!

An example of making a CRPixellatedView:

CRPixellatedView *pixellatedView = [[CRPixellatedView alloc] initWithFrame:CGRectMake(0, 0, 320, 320)];
pixellatedView.image = [UIImage imageNamed:@"Image"];
[self.view addSubview:pixellatedView]; // Add to your view
[pixellatedView animate];

You can configure this settings, customizable example:

CRPixellatedView *pixellatedView = [[CRPixellatedView alloc] initWithFrame:CGRectMake(0, 0, 320, 320)];
pixellatedView.image = [UIImage imageNamed:@"Image"];
pixellatedView.pixelScale = 20.0f;
pixellatedView.animationDuration = 0.8f;
[self.view addSubview:pixellatedView]; // Add to your view
[pixellatedView animateWithCompletion:^(BOOL finished) {
	NSLog(@"completed");
}];

Also, you can customize the animation effect using the reverse property:

CRPixellatedView *pixellatedView = [[CRPixellatedView alloc] initWithFrame:CGRectMake(0, 0, 320, 320)];
pixellatedView.image = [UIImage imageNamed:@"Image"];
pixellatedView.pixelScale = 20.0f;
pixellatedView.animationDuration = 0.8f;
pixellatedView.reverse = YES; // Reverse effect
[self.view addSubview:pixellatedView]; // Add to your view
[pixellatedView animateWithCompletion:^(BOOL finished) {
	NSLog(@"completed");
}];

Examples

pixellatedView.reverse = YES; // Reverse effect

pixellatedView.reverse = NO; // (default)
pixellatedView.pixelScale = 30.0f;

Demo

See CRPixelledViewDemo Xcode project.

Requirements

• iOS 6.0 or higher.

Bugs

• It works well just with square images (CIFilter related bug) :(

Contributing

Anyone who would like to contribute to the project is more than welcome.

• Fork this repo
• Make your changes
• Submit a pull request

License

CRPixellatedView is released under the MIT license. See LICENSE.

Contact

Christian Roman

http://chroman.me

[email protected]

@chroman

crpixellatedview's Issues

Initialize to pixellated view

Is it possible to have the image be pre-pixellated when it is added to the view rather than having to be animated? It would be great to be able to start from both a pixelated and non pixelated state.

CRMotionView

Is it possible to use CRPixellatedView inside a CRMotionView?
This is what I am doing right now, is there a better way?

pixellatedView.image = image;
[pixellatedView animateWithCompletion:^(BOOL finished) {
        [motionView setImage:image];
        [pixellatedView removeFromSuperview];
}];

Reverse effect keeps image pixelated

Hello

I have a problem with this code:

    self.pictureView.reverse = YES;
    self.pictureView.animationDuration = 0.5;
    self.pictureView.imageContentMode = UIViewContentModeScaleAspectFill;

At the end of the animation, my images are still pixelated as shown below:

I didn't investigate in your code, maybe you already have an idea why.

Thanks!