iOS-CALayer&&CAAnimation

2019-11-14 18:02:07

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

一、CALayer

1.CALayer

CALayer屬于QuartzCore.framework框架，從Xcode5起我們不必要手動(dòng)導(dǎo)入這個(gè)庫(kù)。

CALayer我們可以簡(jiǎn)單理解為一個(gè)層。當(dāng)我們繪制的UIView能在屏幕顯示，其實(shí)質(zhì)是因?yàn)檫@個(gè)層。

我們下面通過(guò)代碼理解一下CALayer的基本用法。

    CALayer *caLayer = [CALayer layer];    caLayer.backgroundColor = [UIColor cyanColor].CGColor;    caLayer.frame = CGRectMake(10, 20, 100, 100);    caLayer.cornerRadius = 20;
    caLayer.masksToBounds = YES;    [self.view.layer addSublayer:caLayer];

當(dāng)我們執(zhí)行上述代碼的時(shí)候，會(huì)在view上添加一個(gè)layer層。其效果如下圖所示。

其中cornerRadius值的大小決定layer的形狀，在四個(gè)角用它的長(zhǎng)度做半切圓。我們也可以設(shè)置邊框，邊框顏色等信息。

    CALayer *caLayer1 = [CALayer layer];    caLayer1.frame = CGRectMake(10, 20, 200, 200);    caLayer1.contents = (id)[UIImage imageNamed:@"health.jpg"].CGImage;    caLayer1.cornerRadius = 100;    caLayer1.masksToBounds = YES;    caLayer1.borderWidth = 10;    caLayer1.borderColor = [UIColor greenColor].CGColor;    [self.view.layer addSublayer:caLayer1];

效果如下：

CALayer還有一個(gè)重要的屬性position（錨點(diǎn)默認(rèn)0.5，0.5），和caLayer.anchorPoint（0-1）

我們可以通過(guò)下圖理解：

執(zhí)行下面代碼：

    CALayer *caLayer = [CALayer layer];    caLayer.backgroundColor = [UIColor cyanColor].CGColor;    caLayer.cornerRadius = 20;    caLayer.bounds = CGRectMake(200, 20, 200, 200);    caLayer.position = CGPointMake(100, 100);    caLayer.anchorPoint = CGPointMake(0.5, 0);    caLayer.masksToBounds = YES;    [self.view.layer addSublayer:caLayer];

效果為：

2.CATextLayer

CATextLayer是CALayer的子類。我們可以在上面寫文字，設(shè)置字體等信息。

    CATextLayer *caTextlayer = [CATextLayer layer];    caTextlayer.frame = CGRectMake(10, 20, 300, 100);    caTextlayer.string = @"Roy says hello";    caTextlayer.foregroundColor = [UIColor orangeColor].CGColor;    [self.view.layer addSublayer:caTextlayer];

3.CAGradientLayer

這個(gè)類也是繼承CALayer.可以實(shí)現(xiàn)顏色漸變。

    CAGradientLayer *dLayer = [CAGradientLayer layer];    dLayer.colors = @[(id)[UIColor yellowColor].CGColor,(id)[UIColor grayColor].CGColor,(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor];    dLayer.startPoint = CGPointMake(0, 0);    dLayer.endPoint = CGPointMake(1, 1);    dLayer.locations = @[@0.0,@0.2,@0.5,@01];//0-1    dLayer.frame = CGRectMake(10, 20, 320, 100);    [self.view.layer addSublayer:dLayer];

二、CAAnimation

關(guān)于CAAnimation,能夠看懂下面一幅圖和下面的代碼即可。

#import "ViewController.h"@interface ViewController (){    CALayer *layer;}@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.    layer = [CALayer layer];    layer.frame = CGRectMake(10, 20, 60, 60);    layer.backgroundColor = [UIColor grayColor].CGColor;    [self.view.layer addSublayer:layer];        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];    button.frame = CGRectMake(10, 20, 100, 30);    button.backgroundColor = [UIColor purpleColor];    [button addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];    [self.view addSubview:button];   // [self basicAnimation];   // [self keyframeAnimation];   // [self groupAnimation];   }-(void)btnClick{    //過(guò)渡動(dòng)畫，只有在點(diǎn)擊事件中才能執(zhí)行     [self transitionAnimation];}//基礎(chǔ)動(dòng)畫,繼承屬性動(dòng)畫-(void)basicAnimation{    /*           //背景顏色變換動(dòng)畫        CABasicAnimation *animation = [CABasicAnimation animation];        //The key-path describing the PRoperty to be animated        animation.keyPath = @"backgroundColor";        //動(dòng)畫周期        animation.duration = 2;        //從哪個(gè)屬性開始動(dòng)畫        animation.fromValue = (id)[UIColor grayColor].CGColor;        //到哪個(gè)屬性結(jié)束動(dòng)畫        animation.toValue = (id)[UIColor greenColor].CGColor;        [layer addAnimation:animation forKey:nil];     */        //位置移動(dòng)        CABasicAnimation *animation = [CABasicAnimation animation];    animation.keyPath = @"position";    animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(10, 20)];    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 200)];    animation.duration = 3;    [layer addAnimation:animation forKey:nil];}//幀動(dòng)畫，繼承屬性動(dòng)畫-(void)keyframeAnimation{    /*    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];    //動(dòng)畫的屬性    animation.keyPath = @"backgroundColor";    //動(dòng)畫過(guò)渡值    animation.values = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor purpleColor].CGColor];    //動(dòng)畫過(guò)渡時(shí)間    animation.keyTimes = @[@0.0,@0.5,@1];    animation.duration = 2;    [layer addAnimation:animation forKey:nil];     */        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];    animation.keyPath = @"position";    animation.values = @[[NSValue valueWithCGPoint:CGPointMake(10, 20)],[NSValue valueWithCGPoint:CGPointMake(10, 300)],[NSValue valueWithCGPoint:CGPointMake(200, 300)],[NSValue valueWithCGPoint:CGPointMake(10, 300)],[NSValue valueWithCGPoint:CGPointMake(10, 20)],[NSValue valueWithCGPoint:CGPointMake(50, 50)]];    animation.autoreverses = YES;    animation.duration = 2;    [layer addAnimation:animation forKey:nil];}//組動(dòng)畫，組合動(dòng)畫，多個(gè)動(dòng)畫同時(shí)執(zhí)行-(void)groupAnimation{    //移動(dòng)    CABasicAnimation *basic =[CABasicAnimation animation ];    basic.keyPath = @"position";    basic.duration = 2;    basic.autoreverses = YES;    basic.fromValue = [NSValue valueWithCGPoint:layer.position];    basic.byValue = [NSValue valueWithCGPoint:CGPointMake(20, 0)];    //顏色變化    CAKeyframeAnimation *keyframe = [CAKeyframeAnimation animation];    keyframe.keyPath = @"backgroundColor";    keyframe.values =  @[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor];    keyframe.duration = 2;    keyframe.autoreverses = YES;            CAAnimationGroup *group = [CAAnimationGroup animation];    group.animations = @[basic,keyframe];    //這邊時(shí)間是以group的時(shí)間為主的    group.duration = 4;    [layer addAnimation:group forKey:nil];}//過(guò)渡動(dòng)畫- (void)transitionAnimation{    CATransition *animation = [CATransition animation];    animation.type = @"pageUnCurl";    animation.delegate = self;    animation.duration = 2;    animation.autoreverses = YES;    [layer addAnimation:animation forKey:nil];    }- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end