用CALayer.Mask(遮罩)实现iphone图标的水晶立体效果

昨天打群雄一下打了两个“破敌”,比较空虚,然后想起周末觉得自己应用中的图案都是纯用Path画的平面效果,比较土,就研究了一下如何实现点时尚的效果。

最终完成效果如下:

而原图效果只是这样:

 

通过遮罩完成以上效果,代码非常简单,不过需要准备遮罩层要用的alpha通道图片,对于非常非常不美工的我来说,用d版的fireworks搞掂:

 

但是你并不能直接把这个遮罩蒙在你的图片上,这样的话,图片会变暗,而且效果是跟你期望的相反的,正确的做法是在图片上蒙一个某种色的层,然后给这个层应用这个遮罩,这样最终效果就是我们期望的。

不过这里我们还需要一个简单的遮罩,应用在整个图上,把它修正成圆角(因为原图是四方的):

这个遮罩很简单,圆角alpha通道全透明,把原图的四角给全透掉(遮罩原理就是在原图像素的alpha改成遮罩的alpha)。

好了,整个代码如下:

 

- (void)viewDidLoad {
    [super viewDidLoad];
    UIGraphicsBeginImageContext(icon.bounds.size);
    CGContextRef ctx 
= UIGraphicsGetCurrentContext();
    
const CGFloat components[4= {0.0,0.4,0.0,1.0};
    CGContextSetFillColor(ctx, components);
    CGContextFillRect(ctx, CGRectMake(
00, icon.bounds.size.width, icon.bounds.size.height));
    UIImage 
*background = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    UIImage 
*image = [UIImage imageNamed:@"icon.png"];
    UIImage 
*mask = [UIImage imageNamed:@"IconBase.png"];
    UIImage 
*roundCorner = [UIImage imageNamed:@"round-corner.png"];
    icon.image 
= image;
    
    CALayer
* subLayer = [[CALayer layer] retain];
    subLayer.frame 
= icon.bounds;
    subLayer.contents 
= (id)[background CGImage];

    CALayer
* maskLayer = [[CALayer layer] retain];
    maskLayer.frame 
= icon.bounds;
    maskLayer.contents 
= (id)[mask CGImage]; 
    [subLayer setMask:maskLayer];
    [[icon layer] addSublayer:subLayer];
    
    CALayer
* roundCornerLayer = [[CALayer layer] retain];
    roundCornerLayer.frame 
= icon.bounds;
    roundCornerLayer.contents 
= (id)[roundCorner CGImage];
    [[icon layer] setMask:roundCornerLayer];
    
    [maskLayer release];
    [subLayer release];
    [roundCornerLayer release];


}

 

DEMO程序下载 

posted @ 2011-03-23 09:17 Think 阅读(...) 评论(...) 编辑 收藏