iOS图片倒影效果的2种实现

实现一
使用一个继承自UIView的类来包含要实现倒影效果的图片，重写这个UIView子类的绘图方法，以实现图片于倒影，
然后把这个View 添加到相应的地方显示。
代码：
CKReflectionImage.h
[cpp]
#import <UIKit/UIKit.h>

@interface CKReflectionImage : UIView {
@private

UIImage *image_;

/**
* Value of gradient start. This value is divided to height of image.
*/
CGFloat visibleReflectionHeight_;

/**
* Padding to top image.
*/
CGFloat paddingToTopImage_;
}

@property (nonatomic, readwrite, retain) UIImage *image;
@property (nonatomic, readwrite, assign) CGFloat visibleReflectionHeight;
@property (nonatomic, readwrite, assign) CGFloat paddingToTopImage;

@end
CKReflectionImage.h
[cpp
#import "CKReflectionImage.h"

@implementation CKReflectionImage

#pragma mark -
#pragma mark Properties

@synthesize image = image_;
@synthesize visibleReflectionHeight = visibleReflectionHeight_;
@synthesize paddingToTopImage = paddingToTopImage_;

#pragma mark -
#pragma mark Memory management

- (void)dealloc {

[image_ release];
image_ = nil;

visibleReflectionHeight_ = 0.0f;

paddingToTopImage_ = 0.0f;

[super dealloc];

}

#pragma mark -
#pragma mark Draw methods

/**
* Draws the receiver’s image within the passed-in rectangle.
*
* @param rect: The portion of the view’s bounds that needs to be updated.
*/
- (void)drawRect:(CGRect)rect {

[super drawRect:rect];

if (image_ != nil) {

// Get current context to draw.
CGContextRef context = UIGraphicsGetCurrentContext();

// Reflection image references
CGImageRef reflectionImage = NULL;
CGImageRef gradientImage = NULL;

// Frame of image
CGRect frame = [self frame];
frame.origin.x = 0.0f;
frame.origin.y = 0.0f;
frame.size.width = CGRectGetWidth(frame);
frame.size.height = image_.size.height * CGRectGetWidth(frame) / image_.size.width;

// Draw initial image in context
CGContextSaveGState(context);
{

// Draw image in context, commented but the image show in reverse.
// CGContextDrawImage(context, frame, [image_ CGImage]);

// Push context to draw image.
UIGraphicsPushContext(context);

// Draw original image in top
[image_ drawInRect:frame];

// Pop to context
UIGraphicsPopContext();

}
CGContextRestoreGState(context);

// Create gradient bitmap
CGContextSaveGState(context);
{

// Gradient is always black-white and the mask must be in the gray colorspace.
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();

// Create a bitmap context
CGContextRef gradientContext = CGBitmapContextCreate(NULL, CGRectGetWidth(frame), CGRectGetHeight(frame), 8, 0, colorSpace, kCGImageAlphaNone);

// Define the start and the end grayscale values (with the alpha, even though our
// bitmap context doesn't support alpha gradient requieres it).
CGFloat colors[] = {0.0f, 1.0f, 1.0f, 1.0f};

// Creates the CGGradient
CGGradientRef grayScaleGradient = CGGradientCreateWithColorComponents(colorSpace, colors, NULL, 2);

// Release colorSpace reference
CGColorSpaceRelease(colorSpace);

// Create the start and end points for the gradient vector (straight down).
CGPoint gradientStartPoint = CGPointMake(0, (CGRectGetHeight(frame) - visibleReflectionHeight_));
CGPoint gradientEndPoint = CGPointMake(0, ((CGRectGetHeight(frame) * 2) - visibleReflectionHeight_));

// Draw gradient into gradient context.
CGContextDrawLinearGradient(gradientContext, grayScaleGradient, gradientStartPoint, gradientEndPoint, kCGGradientDrawsAfterEndLocation);

// Release Gradient reference.
CGGradientRelease(grayScaleGradient);

// Convert the gradient context to image.
gradientImage = CGBitmapContextCreateImage(gradientContext);

// Release gradient context
CGContextRelease(gradientContext);

}
CGContextRestoreGState(context);

// Apply gradient bitmap to new context that contains image.
CGContextSaveGState(context);
{

// Create a RGB color space
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

// Create bitmap context to join image and gradient context.
CGContextRef reflectionContext = CGBitmapContextCreate(NULL, CGRectGetWidth(frame), CGRectGetHeight(frame), 8, 0, colorSpace, (kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedLast));

// Release color space
CGColorSpaceRelease(colorSpace);

// First clip mask to context
CGContextSaveGState(context);
{

// Clip gradient mask to reflection context.
CGContextClipToMask(reflectionContext, frame, gradientImage);

}
CGContextRestoreGState(context);

// Second draw image to context
CGContextSaveGState(reflectionContext);
{

// Push context to draw image.
UIGraphicsPushContext(reflectionContext);

// Draw original image in top
[image_ drawInRect:frame];

// Pop to context
UIGraphicsPopContext();

}
CGContextRestoreGState(reflectionContext);

// Delete gradient image mask
CGImageRelease(gradientImage);

// Convert reflection context to image.
reflectionImage = CGBitmapContextCreateImage(reflectionContext);

// Release reflection context
CGContextRelease(reflectionContext);

}
CGContextRestoreGState(context);

// Transform matrix and draw reflection bitmap.
CGContextSaveGState(context);
{

// Translate context matrix to height * 2 but next scale and sum 1.0f of image and padding.
CGContextTranslateCTM(context, CGRectGetMinX(frame), (CGRectGetHeight(frame) * 2) + paddingToTopImage_);

// Flip vertical image in context.
CGContextScaleCTM(context, 1.0f, -1.0f);

// Draw reflection image in context.
CGContextDrawImage(context, frame, reflectionImage);

// Release reflectio image.
CGImageRelease(reflectionImage);

}
CGContextRestoreGState(context);

}

}

/**
* Set current image to another image.
*
* @param image: Another image to set.
*/
- (void)setImage:(UIImage *)image {

if (image_ != image) {

[image_ release];
image_ = [image retain];

}

[self setNeedsDisplay];

}

/**
* Set current visibleReflectioHeight_ value to another.
*
* @param gradientStart: Another value to visible reflectio height variable.
*/
- (void)setVisibleReflectionHeight:(CGFloat)visibleReflectioHeight {

if (visibleReflectionHeight_ != visibleReflectioHeight) {

visibleReflectionHeight_ = visibleReflectioHeight;

}

[self setNeedsDisplay];

}

/**
* Set current paddingToTopImage variable to another value.
*
* @param paddingToTopImage: Another value to padding to top image.
*/
- (void)setPaddingToTopImage:(CGFloat)paddingToTopImage {

if (paddingToTopImage_ != paddingToTopImage) {

paddingToTopImage_ = paddingToTopImage;

}

[self setNeedsDisplay];

}

@end
使用：
[cpp] www.2cto.com
CKReflectionImage *reflectionImage = [[CKReflectionImage alloc] initWithFrame:CGRectMake(96, 20, 128, 460)];

[reflectionImage setBackgroundColor:[UIColor clearColor]];

//set the padding of top image and its reflected image
[reflectionImage setPaddingToTopImage:5.0f];

// Hide 1/4 parts of image. show 3/4
[reflectionImage setVisibleReflectionHeight:(CGRectGetWidth([reflectionImage frame]) / 4 * 3)];

[reflectionImage setImage:[UIImage imageNamed:@"1.png"]];

[[self view] addSubview:reflectionImage];
实现效果



实现二
为UIImage添加一个关于倒影的category，以实现返回这个图片，
[cpp]
#import <UIKit/UIKit.h>

@interface UIImage (Reflection)

- (UIImage *)reflectionWithHeight:(int)height;
- (UIImage *)reflectionWithAlpha:(float)pcnt;
- (UIImage *)reflectionRotatedWithAlpha:(float)pcnt;

@end
UIImage+Reflection.h
[cpp]
#import "UIImage+Reflection.h"

#ifndef UIImageReflectionMethods
#define UIImageReflectionMethods

CGImageRef CreateGradientImage (int pixelsWide, int pixelsHigh, CGFloat endPoint) {
CGImageRef theCGImage = NULL;

// gradient is always black-white and the mask must be in the gray colorspace
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();

// create the bitmap context
CGContextRef gradientBitmapContext = CGBitmapContextCreate(NULL, pixelsWide, pixelsHigh, 8, 0, colorSpace, kCGImageAlphaNone);

// define the start and end grayscale values (with the alpha, even though
// our bitmap context doesn't support alpha the gradient requires it)
CGFloat colors[] = {0.0, 1.0, 1, 1.0};

// create the CGGradient and then release the gray color space
CGGradientRef grayScaleGradient = CGGradientCreateWithColorComponents(colorSpace, colors, NULL, 2);
CGColorSpaceRelease(colorSpace);

// create the start and end points for the gradient vector (straight down)
CGPoint gradientStartPoint = CGPointZero;
CGPoint gradientEndPoint = CGPointMake(0, endPoint);

if (endPoint < 0) {
gradientEndPoint = CGPointMake(0, -endPoint);
}

// draw the gradient into the gray bitmap context
CGContextDrawLinearGradient(gradientBitmapContext, grayScaleGradient, gradientStartPoint, gradientEndPoint, kCGGradientDrawsAfterEndLocation);
CGGradientRelease(grayScaleGradient);

// convert the context into a CGImageRef and release the context
theCGImage = CGBitmapContextCreateImage(gradientBitmapContext);

if (endPoint < 0) {
// rotate
CGContextClearRect(gradientBitmapContext, CGRectMake(0, 0, pixelsWide, pixelsHigh));
CGContextTranslateCTM(gradientBitmapContext, 0.0, pixelsHigh);
CGContextScaleCTM(gradientBitmapContext, 1.0, -1.0);
CGContextDrawImage(gradientBitmapContext, CGRectMake(0, 0, pixelsWide, pixelsHigh), theCGImage);
CGImageRelease(theCGImage);
theCGImage = CGBitmapContextCreateImage(gradientBitmapContext);
}

CGContextRelease(gradientBitmapContext);

// return the imageref containing the gradient
return theCGImage;
}

static CGContextRef MyCreateBitmapContext (int pixelsWide, int pixelsHigh) {
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

// create the bitmap context
CGContextRef bitmapContext = CGBitmapContextCreate (NULL, pixelsWide, pixelsHigh, 8, 0, colorSpace, (kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst));
CGColorSpaceRelease(colorSpace);

return bitmapContext;
}

#endif

@implementation UIImage (Reflection)

- (UIImage *)reflectionRotatedWithAlpha:(float)pcnt {
int height = self.size.height;
UIImage * fromImage = self;
pcnt = 1.0 / pcnt;

// create a bitmap graphics context the size of the image
CGContextRef mainViewContentContext = MyCreateBitmapContext(fromImage.size.width, height);

// create a 2 bit CGImage containing a gradient that will be used for masking the
// main view content to create the 'fade' of the reflection. The CGImageCreateWithMask
// function will stretch the bitmap image as required, so we can create a 1 pixel wide gradient
CGImageRef gradientMaskImage = CreateGradientImage(1, height, -(height * pcnt));

// create an image by masking the bitmap of the mainView content with the gradient view
// then release the pre-masked content bitmap and the gradient bitmap
CGContextClipToMask(mainViewContentContext, CGRectMake(0.0, 0.0, fromImage.size.width, height), gradientMaskImage);
CGImageRelease(gradientMaskImage);

// In order to grab the part of the image that we want to render, we move the context origin to the
// height of the image that we want to capture, then we flip the context so that the image draws upside down.
// CGContextTranslateCTM(mainViewContentContext, 0.0, height);
// CGContextScaleCTM(mainViewContentContext, 1.0, -1.0);

// draw the image into the bitmap context
CGContextDrawImage(mainViewContentContext, CGRectMake(0, 0, fromImage.size.width, fromImage.size.height), [fromImage CGImage]);

// create CGImageRef of the main view bitmap content, and then release that bitmap context
CGImageRef reflectionImage = CGBitmapContextCreateImage(mainViewContentContext);
CGContextRelease(mainViewContentContext);

// convert the finished reflection image to a UIImage
UIImage * theImage = [UIImage imageWithCGImage:reflectionImage];
// image is retained by the property setting above, so we can release the original
CGImageRelease(reflectionImage);

return theImage;
}

- (UIImage *)reflectionWithHeight:(int)height {
if (height == -1) {
height = [self size].height;
}
if (height == 0)
return nil;

UIImage * fromImage = self;

// create a bitmap graphics context the size of the image
CGContextRef mainViewContentContext = MyCreateBitmapContext(fromImage.size.width, fromImage.size.height);

// create a 2 bit CGImage containing a gradient that will be used for masking the
// main view content to create the 'fade' of the reflection. The CGImageCreateWithMask
// function will stretch the bitmap image as required, so we can create a 1 pixel wide gradient
CGImageRef gradientMaskImage = CreateGradientImage(1, height, height);

// create an image by masking the bitmap of the mainView content with the gradient view
// then release the pre-masked content bitmap and the gradient bitmap
CGContextClipToMask(mainViewContentContext, CGRectMake(0.0, 0.0, fromImage.size.width, height), gradientMaskImage);
CGImageRelease(gradientMaskImage);

// In order to grab the part of the image that we want to render, we move the context origin to the
// height of the image that we want to capture, then we flip the context so that the image draws upside down.
CGContextTranslateCTM(mainViewContentContext, 0.0, fromImage.size.height);
CGContextScaleCTM(mainViewContentContext, 1.0, -1.0);

// draw the image into the bitmap context
CGContextDrawImage(mainViewContentContext, CGRectMake(0, 0, fromImage.size.width, fromImage.size.height), [fromImage CGImage]);

// create CGImageRef of the main view bitmap content, and then release that bitmap context
CGImageRef reflectionImage = CGBitmapContextCreateImage(mainViewContentContext);
CGContextRelease(mainViewContentContext);

// convert the finished reflection image to a UIImage
UIImage * theImage = [UIImage imageWithCGImage:reflectionImage];
// image is retained by the property setting above, so we can release the original
CGImageRelease(reflectionImage);

return theImage;
}

- (UIImage *)reflectionWithAlpha:(float)pcnt {
int height = self.size.height;
UIImage * fromImage = self;
pcnt = 1.0 / pcnt;

// create a bitmap graphics context the size of the image
CGContextRef mainViewContentContext = MyCreateBitmapContext(fromImage.size.width, height);

// create a 2 bit CGImage containing a gradient that will be used for masking the
// main view content to create the 'fade' of the reflection. The CGImageCreateWithMask
// function will stretch the bitmap image as required, so we can create a 1 pixel wide gradient
CGImageRef gradientMaskImage = CreateGradientImage(1, height, height * pcnt);

// create an image by masking the bitmap of the mainView content with the gradient view
// then release the pre-masked content bitmap and the gradient bitmap
CGContextClipToMask(mainViewContentContext, CGRectMake(0.0, 0.0, fromImage.size.width, height), gradientMaskImage);
CGImageRelease(gradientMaskImage);

// In order to grab the part of the image that we want to render, we move the context origin to the
// height of the image that we want to capture, then we flip the context so that the image draws upside down.
CGContextTranslateCTM(mainViewContentContext, 0.0, height);
CGContextScaleCTM(mainViewContentContext, 1.0, -1.0);

// draw the image into the bitmap context
CGContextDrawImage(mainViewContentContext, CGRectMake(0, 0, fromImage.size.width, fromImage.size.height), [fromImage CGImage]);

// create CGImageRef of the main view bitmap content, and then release that bitmap context
CGImageRef reflectionImage = CGBitmapContextCreateImage(mainViewContentContext);
CGContextRelease(mainViewContentContext);

// convert the finished reflection image to a UIImage
UIImage * theImage = [UIImage imageWithCGImage:reflectionImage];
// image is retained by the property setting above, so we can release the original
CGImageRelease(reflectionImage);

return theImage;
}

@end

使用非常简单：
[cpp]
[refView setImage:[image reflectionWithAlpha:0.5]];
[imageView setImage:[image reflectionWithHeight:50]];
[topRefView setImage:[image reflectionRotatedWithAlpha:0.5]];
效果