CoreAnimation之制作阴影

我们可以利用 QuartzCore 中的 CoreAnimation 库来制作视图的阴影效果。

我们只要设置 UIView 的 layer 对象的阴影属性即可：

//
//  MyQuartzView.m
//  QuartzTest
//
//  Created by zenny_chen on 12-2-21.
//  Copyright (c) 2012年 GreenGames Studio. All rights reserved.
//
 
#import "MyQuartzView.h"
 
// Quartz2D以及Core Animation所需要的头文件
#import <QuartzCore/QuartzCore.h>
 
@implementation MyQuartzView
 
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}
 
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
     
    // 创建Quartz上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
 
    // 先填充一个灰色矩形
    CGContextSetRGBFillColor(context, 0.99f, 0.01f, 0.01f, 1.0f);
    CGContextFillRect(context, CGRectMake(0.0f, 0.0f, 100.0f, 100.0f));
     
    // 设置阴影透明度，0表示阴影被完全透明掉，不显示出来
    self.layer.shadowOpacity = 1.0f;
     
    // 设置阴影的偏移，即阴影与当前视图的偏移。
    // width值为正表示往右偏；height值为正表示往下偏
    self.layer.shadowOffset = CGSizeMake(3.0f, 3.0f);
     
    // 设置阴影半径。阴影半径将产生阴影渐变效果
    self.layer.shadowRadius = 3.0f;
     
    // 创建一个矩形Path
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, &CGAffineTransformIdentity, CGRectMake(0.0f, 0.0f, 100.0f, 100.0f));
     
    // 设置阴影path
    self.layer.shadowPath = path;
     
    // 释放一次path对象
    CGPathRelease(path);
}
 
@end

以上代码产生了一个矩形视图的右下角阴影。

好。我们下面将介绍一种更酷的阴影使用方法。我们将一个矩形的四个角都磨成圆角，然后再底下贴上一层阴影。

由于直接使用 clipToBounds 会导致将整个阴影全都裁减掉。因此我们这里使用的技巧是先创建一个同样大小的阴影视图作为底图，然后把四角磨圆的目标视图再贴上去。

首先看一下目标视图的绘制代码：

//
//  MyQuartzView.m
//  QuartzTest
//
//  Created by zenny_chen on 12-2-21.
//  Copyright (c) 2012年 GreenGames Studio. All rights reserved.
//
 
#import "MyQuartzView.h"
 
// Quartz2D以及Core Animation所需要的头文件
#import <QuartzCore/QuartzCore.h>
 
@implementation MyQuartzView
 
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}
 
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
     
    // 创建Quartz上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
 
    // 先填充一个灰色矩形
    CGContextSetRGBFillColor(context, 0.99f, 0.01f, 0.01f, 1.0f);
    CGContextFillRect(context, CGRectMake(0.0f, 0.0f, 100.0f, 100.0f));
     
    // 将本视图的四角磨圆
    self.layer.masksToBounds = YES;
    self.layer.cornerRadius = 8.0f;
}
 
@end

通过 CoreAnimation 提供的 CALayer 的属性，我们可以非常容易地将矩形的四角磨圆。

下面看一下主视图控制器的实现：

//
//  ViewController.m
//  QuartzTest
//
//  Created by zenny_chen on 12-2-21.
//  Copyright (c) 2012年 GreenGames Studio. All rights reserved.
//

#import "ViewController.h"
#import "MyQuartzView.h"

#import <QuartzCore/QuartzCore.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
   [super viewDidLoad];
   // Do any additional setup after loading the view, typically from a nib.
   self.view.backgroundColor = [UIColor colorWithRed:0.6f green:0.6f blue:0.6f alpha:1.0f];
    
   // 创建一个阴影底图
   UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(110.0f, 180.0f, 100.0f, 100.0f)];
    
   // 将阴影底图的颜色设置为透明色
   shadowView.backgroundColor = [UIColor clearColor];
    
   // 设置阴影透明度，0表示阴影被完全透明掉，不显示出来
   shadowView.layer.shadowOpacity = 1.0f;
    
   // 设置阴影的偏移，即阴影与当前视图的偏移。
   // width值为正表示往右偏；height值为正表示往下偏
   shadowView.layer.shadowOffset = CGSizeMake(3.0f, 3.0f);
    
   // 设置阴影半径。阴影半径将产生阴影渐变效果
   shadowView.layer.shadowRadius = 3.0f;
    
   // 创建一个矩形Path
   CGMutablePathRef path = CGPathCreateMutable();
   CGPathAddRect(path, &CGAffineTransformIdentity, CGRectMake(0.0f, 0.0f, 100.0f, 100.0f));
    
   // 设置阴影path
   shadowView.layer.shadowPath = path;
    
   // 释放一次path对象
   CGPathRelease(path);
    
   // 先将阴影底图添加到本视图上
   [self.view addSubview:shadowView];
    
   // 释放一次阴影底图
   [shadowView release];
    
   // 创建目标视图
   MyQuartzView *myView = [[MyQuartzView alloc] initWithFrame:CGRectMake(110.0f, 180.0f, 100.0f, 100.0f)];
    
   // 将目标视图添加到本视图上
   [self.view addSubview:myView];
    
   // 释放一次目标视图
   [myView release];
}

- (void)viewDidUnload
{
   [super viewDidUnload];
   // Release any retained subviews of the main view.
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
   return NO;  //(interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end

在ViewDidLoad方法中就是整个过程的实现。效果就是一个磨圆的红色矩形底下带有同样角被磨圆的阴影，是不是很酷呢？🤭