一、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上添加2个layer层。其职能如下图所示。

图片 1

其间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];

 效果如下:图片 2

 

CALayer还有多个第壹的性质position(锚点专断认同0.5,0.5),和caLayer.anchorPoint(0-1)

小编们可以因此下图精晓:

图片 3

推行上边代码:

    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];

效果为:

图片 4

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];

 图片 5

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];

图片 6

二、CAAnimation

 关于CAAnimation,可以看懂下边一幅图和底下的代码即可。图片 7

图片 8图片 9

#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

Animation

 其中过度动画的门类,大家可以利用上面的功效。

cube 方块


suckEffect 三角


rippleEffect 水波抖动


pageCurl 上翻页


pageUnCurl 下翻页


cameraIrisHollowOpen 镜头快门开


cameraIrisHollowClose 镜头快门开

 

 

 

 

 

 

 

 

 

 

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图