用 Core Animation 实现图片的碎片化
参考书籍:
效果如下:
原理其实非常简单哦:)。
1. 创建一个CALayer,使用其 contents 属性来装载一张图片(获取图片的CGImage)
2. 根据frame值裁剪图片,然后将裁剪的图片赋给你创建的更小的CALayer
3. 实现这些更小的CALayer的动画
4. 剩下的该干嘛干嘛,比如使用 Core Image 滤镜什么的,就靠你创造了:)
核心代码:
源码(书中提供,并非本人所写):
/***
* Excerpted from "Core Animation for Mac OS X and the iPhone",
* published by The Pragmatic Bookshelf.
* Copyrights apply to this code. It may not be used to create training material,
* courses, books, articles, and the like. Contact us if you are in doubt.
* We make no guarantees that this code is fit for any purpose.
* Visit http://www.pragmaticprogrammer.com/titles/bdcora for more book information.
***/
//
// RootController.m
// Confetti
//
// Created by Bill Dudney on 5/21/08.
// Copyright 2008 Gala Factory. All rights reserved.
//
#import "RootController.h"
#import <QuartzCore/QuartzCore.h>
// location of layer to start
static CGFloat kMaxWidth = 300.0f;
static CGFloat kMaxHeight = 380.0f;
static CGFloat kMinX = 10.0f;
static CGFloat kMinY = 20.0f;
static CGFloat kXSlices = 6.0f;
static CGFloat kYSlices = 8.0f;
@implementation RootController
@synthesize image;
@synthesize imageLayer;
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
self.title = @"Confetti";
}
return self;
}
- (void)loadView {
[super loadView];
self.navigationItem.leftBarButtonItem = [[[UIBarButtonItem alloc] initWithTitle:@"Pop" style:UIBarButtonItemStyleBordered target:self action:@selector(pop:)] autorelease];
self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(photo:)] autorelease];
self.imageLayer = [CALayer layer];
self.imageLayer.frame = CGRectMake(kMinX, kMinY, kMaxWidth, kMaxHeight);
self.imageLayer.contentsGravity = kCAGravityResizeAspectFill;
self.imageLayer.masksToBounds = YES;
[self.view.layer addSublayer:self.imageLayer];
}
- (void)photo:(id)sender {
if([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary]) {
UIImagePickerController* picker = [[UIImagePickerController alloc] init];
picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
picker.delegate = self;
picker.allowsImageEditing = NO;
// Picker is displayed asynchronously.
[self presentModalViewController:picker animated:YES];
} else {
// pop up an alert
}
}
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
imageLayer.contents = (id)drawnImage;
// remove all sublayers from imageLayer
NSArray *sublayers = [NSArray arrayWithArray:[imageLayer sublayers]];
for(CALayer *layer in sublayers) {
[layer removeFromSuperlayer];
}
}
- (CGPoint)randomDestinationX:(CGFloat)x Y:(CGFloat)y imageSize:(CGSize)size {
CGPoint destination;
if((x <= (kXSlices / 2.0f)) && (y <= (kYSlices / 2.0f))) { // top left quadrant
destination.x = -50.0f * ((CGFloat)(random() % 10000)) / 2000.0f;
destination.y = -50.0f * ((CGFloat)(random() % 10000)) / 2000.0f;
} else if((x > (kXSlices / 2.0f)) && (y <= (kYSlices / 2.0f))) { // top right quadrant
destination.x = size.width + (50.0f * ((CGFloat)(random() % 10000)) / 2000.0f);
destination.y = -50.0f * ((CGFloat)(random() % 10000)) / 2000.0f;
} else if((x > (kXSlices / 2.0f)) && (y > (kYSlices / 2.0f))) { // bottom right quadrant
destination.x = size.width + (50.0f * ((CGFloat)(random() % 10000)) / 2000.0f);
destination.y = size.height + (50.0f * ((CGFloat)(random() % 10000)) / 2000.0f);
} else if((x <= (kXSlices / 2.0f)) && (y > (kYSlices / 2.0f))) { // bottom right quadrant
destination.x = -50.0f * ((CGFloat)(random() % 10000)) / 2000.0f;
destination.y = size.height + (50.0f * ((CGFloat)(random() % 10000)) / 2000.0f);
}
return destination;
}
- (CAAnimation *)animationForX:(NSInteger)x Y:(NSInteger)y
imageSize:(CGSize)size {
// return a group animation, one for opacity from 1 to zero and a keyframe
// with a path appropriate for the x and y coords
CAAnimationGroup *group = [CAAnimationGroup animation];
group.delegate = self;
group.duration = 2.0f;
CABasicAnimation *opacity = [CABasicAnimation
animationWithKeyPath:@"opacity"];
opacity.fromValue = [NSNumber numberWithDouble:1.0f];
opacity.toValue = [NSNumber numberWithDouble:0.0f];
CABasicAnimation *position = [CABasicAnimation
animationWithKeyPath:@"position"];
position.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn];
CGPoint dest = [self randomDestinationX:x Y:y imageSize:size];
position.toValue = [NSValue valueWithCGPoint:dest];
group.animations = [NSArray arrayWithObjects:opacity, position, nil];
return group;
}
- (void)pop:(id)sender {
if(nil != imageLayer.contents) {
CGSize imageSize = CGSizeMake(CGImageGetWidth(drawnImage),
CGImageGetHeight(drawnImage));
NSMutableArray *layers = [NSMutableArray array];
for(int x = 0;x < kXSlices;x++) {
for(int y = 0;y < kYSlices;y++) {
CGRect frame = CGRectMake((imageSize.width / kXSlices) * x,
(imageSize.height / kYSlices) * y,
imageSize.width / kXSlices,
imageSize.height / kYSlices);
CALayer *layer = [CALayer layer];
layer.frame = frame;
layer.actions = [NSDictionary dictionaryWithObject:
[self animationForX:x Y:y imageSize:imageSize]
forKey:@"opacity"];
CGImageRef subimage = CGImageCreateWithImageInRect(drawnImage, frame);
layer.contents = (id)subimage;
CFRelease(subimage);
[layers addObject:layer];
}
}
for(CALayer *layer in layers) {
[imageLayer addSublayer:layer];
layer.opacity = 0.0f;
}
imageLayer.contents = nil;
}
}
- (CGImageRef)scaleAndCropImage:(UIImage *)fullImage {
CGSize imageSize = fullImage.size;
CGFloat scale = 1.0f;
CGImageRef subimage = NULL;
if(imageSize.width > imageSize.height) {
// image height is smallest
scale = kMaxHeight / imageSize.height;
CGFloat offsetX = ((scale * imageSize.width - kMaxWidth) / 2.0f) / scale;
CGRect subRect = CGRectMake(offsetX, 0.0f,
imageSize.width - (2.0f * offsetX),
imageSize.height);
subimage = CGImageCreateWithImageInRect([fullImage CGImage], subRect);
} else {
// image width is smallest
scale = kMaxWidth / imageSize.width;
CGFloat offsetY = ((scale * imageSize.height - kMaxHeight) / 2.0f) / scale;
CGRect subRect = CGRectMake(0.0f, offsetY, imageSize.width,
imageSize.height - (2.0f * offsetY));
subimage = CGImageCreateWithImageInRect([fullImage CGImage], subRect);
}
// scale the image
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, kMaxWidth,
kMaxHeight, 8, 0, colorSpace,
kCGImageAlphaPremultipliedFirst);
CGContextSetInterpolationQuality(context, kCGInterpolationHigh);
CGRect rect = CGRectMake(0.0f, 0.0f, kMaxWidth, kMaxHeight);
CGContextDrawImage(context, rect, subimage);
CGContextFlush(context);
// get the scaled image
CGImageRef scaledImage = CGBitmapContextCreateImage(context);
CGContextRelease (context);
CGImageRelease(subimage);
subimage = NULL;
subimage = scaledImage;
return subimage;
}
- (void)imagePickerController:(UIImagePickerController *)picker
didFinishPickingImage:(UIImage *)newImage
editingInfo:(NSDictionary *)editingInfo {
self.image = newImage;
drawnImage = [self scaleAndCropImage:self.image];
imageLayer.contents = (id)drawnImage;
[[picker parentViewController] dismissModalViewControllerAnimated:YES];
}
- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker {
[[picker parentViewController] dismissModalViewControllerAnimated:YES];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
- (void)dealloc {
[super dealloc];
}
@end