ios界面特效：倒影

最新推荐文章于 2017-11-22 09:59:55 发布

转载最新推荐文章于 2017-11-22 09:59:55 发布 · 766 阅读

2 篇文章

订阅专栏

///////////////////////////////////ImageHelper.h///////////////////////////////////////////////////

#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
 
@interface ImageHelper : NSObject 
  + (void) addReflectionToView: (UIView *) theView;
@end

///////////////////////////////////ImageHelper.m///////////////////////////////////////////////////

      

#import "ImageHelper.h"

@implementation ImageHelper

const CGFloat kReflectDistance = 10.0f;   //定义倒影与实体的中间间隔

 

+ (void) addReflectionToView: (UIView *) theView   // 外部接口，倒影处理，从这里开始
{
    theView.clipsToBounds = NO;
   
    UIImageView *reflection = [[UIImageView alloc] initWithImage:[ImageHelper reflectionOfView:theView withPercent: 1]]; // 具体处理
    CGRect frame = reflection.frame;
    frame.origin = CGPointMake(0.0f, theView.frame.size.height + kReflectDistance);
    reflection.frame = frame;
    [theView addSubview:reflection];           //将倒影‘贴’在现有视图下方
    [reflection release];
}

//核心函数，cookbook版

+ (UIImage *) reflectionOfView: (UIView *)theView withPercent: (CGFloat) percent // percent这个参数用于设置阴影显示多少
{
   
    // Retain the width but shrink the height
    CGSize size = CGSizeMake(theView.frame.size.width, theView.frame.size.height * percent);
   
    // 制作镜像
    UIGraphicsBeginImageContext(size);
    CGContextRef context =  UIGraphicsGetCurrentContext();
   [theView.layer renderInContext:context];
    UIImage *partialimg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
   
    // 添加灰蒙渐变效果

    CGImageRef mask = [ImageHelper createGradientImage:size];
    CGImageRef ref = CGImageCreateWithMask(partialimg.CGImage, mask);
    UIImage *theImage = [UIImage imageWithCGImage:ref];
    CGImageRelease(ref);
    CGImageRelease(mask);
   
    return theImage;
}

//核心函数，xes改良版

+ (UIImage *) reflectionOfView_2: (UIView *)theView withPercent: (CGFloat) percent
{
   
    // Retain the width but shrink the height
    CGSize size = CGSizeMake(theView.frame.size.width, theView.frame.size.height * percent);
    
    // 制作镜像
    CGContextRef context =  MyCreateBmpContext(size.width,size.height);/ 
    CGFloat height_left= theView.bounds.size.height - size.height;
    CGContextTranslateCTM(context, 0, -height_left);
    [theView.layer renderInContext:context];
    CGImageRef bmpContext = CGBitmapContextCreateImage(context); 
     // 添加灰蒙渐变效果

    CGImageRef mask = [ImageHelper createGradientImage:size];
    CGImageRef ref = CGImageCreateWithMask(bmpContext , mask);
    UIImage *theImage = [UIImage imageWithCGImage:ref];
    CGImageRelease(ref);
    CGImageRelease(mask);
   
    return theImage;
}

CGContextRef MyCreateBmpContext(int pixelsWide, int pixelsHigh)
{
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
 
 // create the bitmap context
 CGContextRef bitmapContext = CGBitmapContextCreate (nil, pixelsWide, pixelsHigh, 8,
              0, colorSpace,
              // this will give us an optimal BGRA format for the device:
              (kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst));
 CGColorSpaceRelease(colorSpace);
   
    return bitmapContext;
}


+ (CGImageRef) createGradientImage: (CGSize)size       //蒙化处理函数
{
    CGFloat colors[] = {0.0, 1.0, 1.0, 1.0};
   
    // Create gradient in gray device color space
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();
    CGContextRef context = CGBitmapContextCreate(nil, size.width, size.height, 8, 0, colorSpace, kCGImageAlphaNone);
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, NULL, 2);
    CGColorSpaceRelease(colorSpace);
   
    // Draw the linear gradient
    CGPoint p1 = CGPointZero;
    CGPoint p2 = CGPointMake(0, size.height);
    CGContextDrawLinearGradient(context, gradient, p1, p2, kCGGradientDrawsAfterEndLocation);
   
    // Return the CGImage
    CGImageRef theCGImage = CGBitmapContextCreateImage(context);
    CFRelease(gradient);
    CGContextRelease(context);
    return theCGImage;
}

在iphone上经常可以看到图标的倒影效果，看起来挺复杂的，不过网上有很多博客都把cookbook上的代码拷贝了上来，然而经过测试那段代码只能实现一个一模一样的镜像，但不是倒立对称的。

首先要说的是，cookbook我觉得是故意只给你看一部分的，书上看得到的是一段类方法的函数，其实真正要使用，需要自己做一个类，ImageHelper,然后比如要对myview倒影化处理，只需调用[ImageHelper reflectToview:myview]即可。