Image Spliced into tiles with animation - iOS

Question

I'm trying to splice an image and then have a transition to next one something like this? Any suggestions on where to start from? Is it possible to splice the images into small tiles and animate them with UIView animations? Here is a sample.

EDIT:

 '#define DESIRED_WIDTH 40

 '#define DESIRED_HEIGHT 60


 - (void)viewDidLoad
{
[super viewDidLoad];

  UIImage *bigImage = [UIImage imageNamed:@"background_for_Manager_App.png"];
  CGRect frame = CGRectMake(0.0, 0.0, DESIRED_WIDTH, DESIRED_HEIGHT);
  int widthCount = (bigImage.size.width / DESIRED_WIDTH);
  int heightCount = (bigImage.size.height / DESIRED_HEIGHT);
  NSLog(@"height width %i %i",heightCount,widthCount);
  for (int i = 0; i <heightCount; i++) {
    for (int j = 0; j < widthCount; j++) {
        UIImage *piece = [self imageCroppedWithRect:frame];
        UIImageView *view = [[UIImageView alloc] initWithImage:piece];
        view.frame = frame;
        [self.view addSubview:view];

        frame.origin.x += frame.size.width;
        NSLog(@"x value %f",frame.origin.x);

       }
    frame.origin.x = 0.0;

    frame.origin.y += frame.size.height;
     NSLog(@"y value %f",frame.origin.y);
   }

//[UIView beginAnimations:nil context:12    // Do any additional setup after loading the view, typically from a nib.

}

- (UIImage *)imageCroppedWithRect:(CGRect)rect
  {
    CGFloat scale = [UIImage imageNamed:@"background_for_Manager_App.png"].scale;
    NSLog(@"scale value%f",scale);
    if (scale > 1.0f) 
    {    // this is for Retina display capability
         rect = CGRectMake(rect.origin.x * scale,
                      rect.origin.y * scale,
                      rect.size.width * scale,
                      rect.size.height * scale);

    }

    CGImageRef imageRef = CGImageCreateWithImageInRect([UIImage imageNamed:@"background_for_Manager_App.png"].CGImage, rect);
    UIImage *result = [UIImage imageWithCGImage:imageRef scale:scale orientation:self.splicedImageView.image.imageOrientation];
    CGImageRelease(imageRef);
    return result;
}

Answer 1

Use this code for crop (you'd better add this as UIImage category):

- (UIImage *)imageCroppedWithRect:(CGRect)rect
{
    if (self.scale > 1.0f) {    // this is for Retina display capability
        rect = CGRectMake(rect.origin.x * self.scale,
                          rect.origin.y * self.scale,
                          rect.size.width * self.scale,
                          rect.size.height * self.scale);
    }

    CGImageRef imageRef = CGImageCreateWithImageInRect(self.CGImage, rect);
    UIImage *result = [UIImage imageWithCGImage:imageRef scale:self.scale orientation:self.imageOrientation];
    CGImageRelease(imageRef);
    return result;
}

How to use: You should create a category for UIImage with this code. Then load image and slice it inot pieces:

UIImage *bigImage = [UIImage imageNamed:@"big_image"];
CGRect frame = CGRectMake(0.0, 0.0, DESIRED_WIDTH, DESIRED_HEIGHT);
for (int i = 0; i < bigImage.size.height / DESIRED_HEIGHT; i++) {
    for (int j = 0; i < bigImage.size.width / DESIRED_WIDTH; j++) {
        UIImage *piece = [bigImage imageCroppedWithRect:frame];
        UIImageView *view = [[UIImageView alloc] initWithImage:piece];
        view.frame = frame;
        [self.view addSubview:view];
        [view release];
        frame.origin.x += frame.size.width;
    }
    frame.origin.x = 0.0;
    frame.origin.y += frame.size.height;
}

Just slice your image into pieces then create appropriate amount of UIImageView objects and place them in the proper order to your view. And now you could animate them as you wish.

Also note that DESIRED_WIDTH and DESIRED_HEIGHT must divide your image's sides without remainder.

For animation like on the video you should use UIViewAnimationOptionTransitionFlipFromLeft option:

[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
    // hide your image here
} completion:nil];