图像拼接成带动画的图块 - iOS

问题描述：

我正在尝试拼接图像，然后转换到下一个像这样的东西？有关从哪里开始的任何建议？是否可以将图像拼接成小块并使用UIView动画制作动画？这是示例。

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.

编辑：

 '#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;
}

答

将此代码用于裁剪（你最好把它添加为 UIImage 类别）：

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;
}

如何使用：
你应该为 UIImage 使用此代码。然后加载图像并将其切成小块：

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;
}

只需将图片切成碎片，然后创建适当数量的 UIImageView 对象并将它们按照正确的顺序放置到您的视图中。现在你可以根据自己的意愿为它们设置动画。

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.

另请注意，DESIRED_WIDTH和DESIRED_HEIGHT必须在没有余数的情况下划分图像的边。

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

对于视频上的动画，你应该使用 UIViewAnimationOptionTransitionFlipFromLeft 选项：

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];

图像拼接成带动画的图块 - iOS

相关推荐