Custom UIView subclass with a pixellated animation inspired by Facebook's Slingshot app.
Objective-C Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
CRPixellatedView
CRPixellatedViewDemo
.gitignore
.travis.yml
CRPixellatedView.podspec
LICENSE
README.md

README.md

CRPixellatedView

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

Platform Version CI License

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

CRPixellatedView-demo1

CRPixellatedView-demo2

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

CRPixellatedView-demo3 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

chroman16@gmail.com

@chroman