iOS-CALayer&&CAAnimation

2019-11-14 18:02:07

字體：大中小

來源：轉載

供稿：網友

一、CALayer

1.CALayer

CALayer屬于QuartzCore.framework框架，從Xcode5起我們不必要手動導入這個庫。

CALayer我們可以簡單理解為一個層。當我們繪制的UIView能在屏幕顯示，其實質是因為這個層。

我們下面通過代碼理解一下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];

當我們執行上述代碼的時候，會在view上添加一個layer層。其效果如下圖所示。

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

    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還有一個重要的屬性position（錨點默認0.5，0.5），和caLayer.anchorPoint（0-1）

我們可以通過下圖理解：

執行下面代碼：

    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的子類。我們可以在上面寫文字，設置字體等信息。

    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

這個類也是繼承CALayer.可以實現顏色漸變。

    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

關于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{    //過渡動畫，只有在點擊事件中才能執行     [self transitionAnimation];}//基礎動畫,繼承屬性動畫-(void)basicAnimation{    /*           //背景顏色變換動畫        CABasicAnimation *animation = [CABasicAnimation animation];        //The key-path describing the PRoperty to be animated        animation.keyPath = @"backgroundColor";        //動畫周期        animation.duration = 2;        //從哪個屬性開始動畫        animation.fromValue = (id)[UIColor grayColor].CGColor;        //到哪個屬性結束動畫        animation.toValue = (id)[UIColor greenColor].CGColor;        [layer addAnimation:animation forKey:nil];     */        //位置移動        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];}//幀動畫，繼承屬性動畫-(void)keyframeAnimation{    /*    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];    //動畫的屬性    animation.keyPath = @"backgroundColor";    //動畫過渡值    animation.values = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor purpleColor].CGColor];    //動畫過渡時間    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];}//組動畫，組合動畫，多個動畫同時執行-(void)groupAnimation{    //移動    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];    //這邊時間是以group的時間為主的    group.duration = 4;    [layer addAnimation:group forKey:nil];}//過渡動畫- (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