iOS-CoreAnimation之製作陰影

我們可以利用QuartzCore中的CoreAnimation庫來製作視圖的陰影效果。

我們只要設置UIView的layer對象的陰影屬性即可：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

// //  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會導致將整個陰影全都裁減掉。因此我們這裏使用的技巧是先創建一個同樣大小的陰影視圖作爲底圖，然後把四角磨圓的目標視圖再貼上去。

首先看一下目標視圖的繪製代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

// //  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的屬性，我們可以非常容易地將矩形的四角磨圓。 

 下面看一下主視圖控制器的實現：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

// //  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方法中就是整個過程的實現。效果就是一個磨圓的紅色矩形底下帶有同樣角被磨圓的陰影