IOS動(dòng)畫學(xué)習(xí)小記(2)-CALayer繪圖

CALayer

當(dāng)利用drawRect:方法繪圖的本質(zhì)就是繪制到了UIViewlayer(屬性)中。

CALayer很多屬性在修改時(shí)都能形成動(dòng)畫效果芽世,這種屬性稱為“隱式動(dòng)畫屬性”扮念。但是對(duì)于UIView的根圖層而言屬性的修改并不形成動(dòng)畫效果担敌,因?yàn)楹芏嗲闆r下根圖層更多的充當(dāng)容器的做用檀何。并且UIView的根圖層創(chuàng)建工作完全由iOS負(fù)責(zé)完成重虑,無法重新創(chuàng)建践付。

直接在圖層中繪圖

當(dāng)時(shí)調(diào)用了UIViewdrawRect:方法繪制圖形、圖像缺厉,這種方式本質(zhì)還是在圖層中繪制永高。只是drawRect:方法是由UIKit組件進(jìn)行調(diào)用,因此里面可以使用一些UIKit封裝的方法進(jìn)行繪圖提针,而直接繪制到圖層的方法由于并非UIKit直接調(diào)用因此只能用原生的Core Graphics方法繪制命爬。

CALayer圖層內(nèi)部繪圖有兩個(gè)方法:(都需要調(diào)用setNeedDisplay方法)

  1. 通過圖層代理繪制 (CALayerDelegate)
    - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx;
  2. 通過自定義圖層繪制 (CALayer)
    - (void)drawInContext:(CGContextRef)ctx;

使用圖層代理繪圖

只要指定某圖層(CALayer)的代理,然后在代理對(duì)象中重寫-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx方法辐脖。這里不需要手動(dòng)實(shí)現(xiàn)CALayerDelegate饲宛,因?yàn)?code>CALayer定義中給NSObject做了分類擴(kuò)展,所有的NSObject都包含這個(gè)方法嗜价。

//
//  ViewController.m
//  CartoonLearn
//
//  Created by xiaodoubaba on 16/2/1.
//  Copyright ? 2016年 xiaodoubaba. All rights reserved.
//

#import "ViewController.h"
#define Photo_Height 150

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CGPoint position     = CGPointMake(160, 200);
    CGRect  bounds       = CGRectMake(0, 0, Photo_Height, Photo_Height);
    CGFloat cornerRadius = Photo_Height / 2;
    CGFloat borderWidth  = 2;
    
    //陰影圖層
    CALayer *layerShadow = [[CALayer alloc]init];
    layerShadow.bounds   = bounds;
    layerShadow.position = position;
    layerShadow.cornerRadius  = cornerRadius;
    layerShadow.shadowColor   = [UIColor grayColor].CGColor;
    layerShadow.shadowOffset  = CGSizeMake(2, 1);
    layerShadow.shadowOpacity = 1;
    layerShadow.borderColor   = [UIColor whiteColor].CGColor;
    layerShadow.borderWidth   = borderWidth;
    [self.view.layer addSublayer:layerShadow];
    
    //容器圖層
    CALayer *layer = [[CALayer alloc] init];
    layer.bounds   = bounds;
    layer.position = position;
    layer.backgroundColor = [UIColor orangeColor].CGColor;
    layer.cornerRadius    = cornerRadius;
    //子圖層是否剪切圖層邊界艇抠,默認(rèn)為NO
    layer.masksToBounds   = YES;
    
    /*陰影效果無法和masksToBounds同時(shí)使用,因?yàn)閙asksToBounds的目的就是剪切外邊框久锥,
    而陰影效果剛好在外邊框
    換個(gè)思路:使用兩個(gè)大小一樣的圖層家淤,下面的圖層負(fù)責(zé)繪制陰影,上面的圖層用來顯示圖片瑟由。
    layer.shadowColor=[UIColor grayColor].CGColor;
    layer.shadowOffset=CGSizeMake(2, 2);
    layer.shadowOpacity=1;
     */
    
    layer.borderColor = [UIColor grayColor].CGColor;
    layer.borderWidth = 2;
    
    /*利用圖層形變解決圖像倒立問題
     在動(dòng)畫開發(fā)中形變往往不是直接設(shè)置transform絮重,而是通過keyPath進(jìn)行設(shè)置。
     這種方法設(shè)置形變的本質(zhì)沒有區(qū)別,只是利用了KVC可以動(dòng)態(tài)修改其屬性值而已青伤。
     下面的代碼可以替換為:
     [layer setValue:@M_PI forKeyPath:@"transform.rotation.x"];
     */
    layer.transform=CATransform3DMakeRotation(M_PI, 1, 0, 0);
    
    
    /*如果僅僅就顯示一張圖片在圖層中督怜,直接設(shè)置圖層contents就可以了。無需delegate
    UIImage *image = [UIImage imageNamed:@"picture"];
    layer.contents = (id)image.CGImage;
    [layer setContents:(id)image.CGImage];
     */
    
    layer.delegate = self;
    
    [self.view.layer addSublayer:layer];
    //調(diào)用圖層setNeedDisplay,否則代理方法不會(huì)被調(diào)用
    [layer setNeedsDisplay];
}

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
    /*如果沒有設(shè)置layer.transform,需要加上
    CGContextSaveGState(ctx);
    
    //圖形上下文形變潮模,解決圖片倒立的問題
    CGContextScaleCTM(ctx, 1, -1);
    CGContextTranslateCTM(ctx, 0, -Photo_Height);
     */
    
    UIImage *image = [UIImage imageNamed:@"picture"];
    //相對(duì)于圖層位置,不是屏幕
    CGContextDrawImage(ctx, CGRectMake(0, 0, Photo_Height, Photo_Height), image.CGImage);
    
    /*如果沒有設(shè)置layer.transform,需要加上
    CGContextRestoreGState(ctx);
     */
}

@end

圖層代理繪圖.png

使用自定義圖層繪圖
編寫一個(gè)類繼承于CALayer然后在drawInContext:中使用CGContext繪圖亮蛔。同樣需要調(diào)用setNeedDisplay方法。

//
//  XDLayer.m
//  CartoonLearn
//
//  Created by xiaodoubaba on 16/2/2.
//  Copyright ? 2016年 xiaodoubaba. All rights reserved.
//

#import "XDLayer.h"

@implementation XDLayer
- (void)drawInContext:(CGContextRef)ctx
{
    NSLog(@"3-drawInContext:");
    NSLog(@"CGContext:%@",ctx);
    CGContextSetRGBFillColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1);
    CGContextSetRGBStrokeColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1);
    CGContextMoveToPoint(ctx, 94.5, 33.5);
    
    //// Star Drawing
    CGContextAddLineToPoint(ctx,104.02, 47.39);
    CGContextAddLineToPoint(ctx,120.18, 52.16);
    CGContextAddLineToPoint(ctx,109.91, 65.51);
    CGContextAddLineToPoint(ctx,110.37, 82.34);
    CGContextAddLineToPoint(ctx,94.5, 76.7);
    CGContextAddLineToPoint(ctx,78.63, 82.34);
    CGContextAddLineToPoint(ctx,79.09, 65.51);
    CGContextAddLineToPoint(ctx,68.82, 52.16);
    CGContextAddLineToPoint(ctx,84.98, 47.39);
    CGContextClosePath(ctx);
    
    
    CGContextDrawPath(ctx, kCGPathFillStroke);
}
@end

//
//  XDView.m
//  CartoonLearn
//
//  Created by xiaodoubaba on 16/2/2.
//  Copyright ? 2016年 xiaodoubaba. All rights reserved.
//

#import "XDView.h"
#import "XDLayer.h"

@implementation XDView

- (instancetype)initWithFrame:(CGRect)frame
{
    NSLog(@"initWithFrame:");
    if (self = [super initWithFrame:frame]) {
        XDLayer *layer = [[XDLayer alloc] init];
        layer.bounds   = CGRectMake(0, 0, 185, 185);
        layer.position = CGPointMake(160, 284);
        layer.backgroundColor = [UIColor lightGrayColor].CGColor;
        
        [layer setNeedsDisplay];
        
        [self.layer addSublayer:layer];
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    NSLog(@"2-drawRect:");
    //得到當(dāng)前圖形上下文是drawLayer中傳遞的
    NSLog(@"CGContext:%@",UIGraphicsGetCurrentContext());
    [super drawRect:rect];
}

/*UIView在顯示時(shí)其根圖層會(huì)自動(dòng)創(chuàng)建一個(gè)CGContextRef(CALayer本質(zhì)使用的是位圖上下文)
  同時(shí)調(diào)用圖層代理(UIView創(chuàng)建圖層會(huì)自動(dòng)設(shè)置圖層代理為其自身)的draw: inContext:方法
  并將圖形上下文作為參數(shù)傳遞給這個(gè)方法擎厢。
  UIView自動(dòng)就是根圖層的代理*/
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
    NSLog(@"1-drawLayer:inContext:");
    NSLog(@"CGContext:%@",ctx);
    [super drawLayer:layer inContext:ctx];
    /*UIView會(huì)在這個(gè)方法中調(diào)用其drawRect:方法*/
}

@end

//
//  SecondViewController.m
//  CartoonLearn
//
//  Created by xiaodoubaba on 16/2/2.
//  Copyright ? 2016年 xiaodoubaba. All rights reserved.
//

#import "SecondViewController.h"
#import "XDView.h"

@interface SecondViewController ()

@end

@implementation SecondViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    XDView *view=[[XDView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    view.backgroundColor=[UIColor whiteColor];
    
    [self.view addSubview:view];
}
@end
自定義圖層繪圖.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末究流,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子动遭,更是在濱河造成了極大的恐慌芬探,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件厘惦,死亡現(xiàn)場(chǎng)離奇詭異偷仿,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)宵蕉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門酝静,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人羡玛,你說我怎么就攤上這事别智。” “怎么了稼稿?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵薄榛,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我让歼,道長(zhǎng)敞恋,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任谋右,我火速辦了婚禮硬猫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘改执。我一直安慰自己浦徊,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布天梧。 她就那樣靜靜地躺著,像睡著了一般霞丧。 火紅的嫁衣襯著肌膚如雪呢岗。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音后豫,去河邊找鬼悉尾。 笑死,一個(gè)胖子當(dāng)著我的面吹牛挫酿,可吹牛的內(nèi)容都是我干的构眯。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼早龟,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼惫霸!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起葱弟,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤壹店,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后芝加,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體硅卢,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年藏杖,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了将塑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蝌麸,死狀恐怖点寥,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情祥楣,我是刑警寧澤开财,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站误褪,受9級(jí)特大地震影響责鳍,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜兽间,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一历葛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嘀略,春花似錦恤溶、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至讼育,卻和暖如春帐姻,著一層夾襖步出監(jiān)牢的瞬間稠集,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工饥瓷, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留剥纷,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓呢铆,卻偏偏與公主長(zhǎng)得像晦鞋,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子棺克,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果悠垛,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺ios動(dòng)畫全貌逆航。在這里你可以看...
    每天刷兩次牙閱讀 8,516評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果鼎文,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺iOS動(dòng)畫全貌因俐。在這里你可以看...
    F麥子閱讀 5,118評(píng)論 5 13
  • 本文轉(zhuǎn)載自:http://www.cocoachina.com/ios/20150104/10814.html ...
    idiot_lin閱讀 1,573評(píng)論 0 11
  • Core Animation其實(shí)是一個(gè)令人誤解的命名拇惋。你可能認(rèn)為它只是用來做動(dòng)畫的,但實(shí)際上它是從一個(gè)叫做Laye...
    小貓仔閱讀 3,730評(píng)論 1 4
  • bock常用寫法: 1抹剩、無返回值 & 無參數(shù) 2撑帖、有返回值 & 無參數(shù) 3、有返回值 & 有參數(shù) 4澳眷、 block...
    iTerryWang閱讀 444評(píng)論 0 1