美文网首页
Core Animation核心动画

Core Animation核心动画

作者: 我不白先生 | 来源:发表于2020-11-01 19:59 被阅读0次

    CALayer层(显示的基础)
    UIView核心显示功能就是依靠CALayer实现的
    如何获取一个CALayer对象
    1、通过视图的.layer属性就可以获取到当前视图中layer对象
    2、自己创建layer对象
    普通layer (包括图片layer)
    文字layer
    图形layer (在layer上创建贝塞尔曲线等等)
    ViewController.m

    @interface ViewController ()
    @property (weak, nonatomic) IBOutlet UIView *myView;
    @property (weak, nonatomic) IBOutlet UIView *myView2;
    @property (weak, nonatomic) IBOutlet UIImageView *imageView;
    @end
    @implementation ViewController
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        CALayer *layer = self.myView.layer;
        layer.backgroundColor = [UIColor greenColor].CGColor;
        //边的颜色
        layer.borderColor = [UIColor blueColor].CGColor;
        //边的宽度
        layer.borderWidth = 3;
        //设置圆角半径
        layer.cornerRadius = 30;
        //需要使用阴影 一定要设置透明度 默认为0 不可见
        layer.shadowOpacity = 1;
        //设置阴影颜色
        layer.shadowColor = [UIColor blackColor].CGColor;
        //修改阴影偏移
        layer.shadowOffset = CGSizeMake(10, 10);
        //设置阴影半径
        layer.shadowRadius = 8;
        
        CALayer *layer2 = self.myView2.layer;
        layer2.backgroundColor = [UIColor greenColor].CGColor;
        //边的颜色
        layer2.borderColor = [UIColor blueColor].CGColor;
        //边的宽度
        layer2.borderWidth = 3;
        //设置圆角半径
        layer2.cornerRadius = self.myView2.frame.size.width * 0.5;
        
        
        CALayer *layer3 = self.imageView.layer;
        layer3.backgroundColor = [UIColor greenColor].CGColor;
        //如果做圆形的图片视图 必须按照层的边缘进行遮罩
        layer3.masksToBounds = YES;
        //边的颜色
        layer3.borderColor = [UIColor blueColor].CGColor;
        //边的宽度
        layer3.borderWidth = 5;
        //设置圆角半径
        layer3.cornerRadius = self.imageView.frame.size.width * 0.5;
    }
    
    image.png

    ViewController.m

    @interface ViewController ()
    @property (weak, nonatomic) IBOutlet UIView *myView;
    @property(nonatomic,strong)CALayer *myLayer;
    @end
    
    @implementation ViewController
    -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
        //layer的某些属性自带动画,凡是属性说明上 最后一个单词是Animatable,该属性修改时自带动画
        self.myLayer.borderWidth = arc4random() % 25 + 5;
        self.myLayer.cornerRadius = arc4random() % 10 + 5;
    }
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        CALayer *myLayer = [CALayer layer];
        self.myLayer = myLayer;
        myLayer.borderWidth = 3;
        myLayer.borderColor = [UIColor redColor].CGColor;
    //    myLayer.backgroundColor = [UIColor redColor].CGColor;
        //对于layer大小和位置的设定,极少用frame,通常大小利用 bounds 位置是用 positi 属性
        myLayer.bounds = CGRectMake(0, 0, 50, 50);
        //设置位置 默认 就是0,0
        myLayer.position = CGPointZero;
        //设置锚点 默认0.5,0.5及中心点
        myLayer.anchorPoint = CGPointMake(0, 0);
        //layer 最大的特点 嵌套性
        [self.myView.layer addSublayer:myLayer];
    }
    

    imageLayerViewController.m

    v@interface imageLayerViewController ()
    @property (weak, nonatomic) IBOutlet UIImageView *imageView;
    @end
    @implementation imageLayerViewController
    -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
        CALayer *layer = [CALayer layer];
        //为层添加内容因为是ID型所以要转换成id实际上仍是图片
        layer.contents = (id)[UIImage imageNamed:@"1"].CGImage;
        layer.bounds = CGRectMake(0, 0, 200, 200);
        layer.position = CGPointMake(self.imageView.frame.size.width * 0.5, self.imageView.frame.size.height * 0.5);
        [self.imageView.layer addSublayer:layer];
        //创建文字层
        CATextLayer *tLayer = [CATextLayer layer];
        tLayer.fontSize = 24;
        //设置字的颜色
        tLayer.foregroundColor = [UIColor whiteColor].CGColor;
        tLayer.string = @"这是一行文字";
        tLayer.bounds = CGRectMake(0, 0, 200, 40);
        //设置位置
        tLayer.position = CGPointMake(self.imageView.frame.size.width - 50, 50);
        //设置锚点
        tLayer.anchorPoint = CGPointMake(1, 0);
        [self.imageView.layer addSublayer:tLayer];
        //创建图形层
        CAShapeLayer *sLayer = [CAShapeLayer layer];
        /**** 线路径 //设图形路径
        UIBezierPath *bezierPath = [UIBezierPath bezierPath];
        [bezierPath moveToPoint:CGPointMake(50, 50)];
        [bezierPath addLineToPoint:CGPointMake(150, 250)];
        [bezierPath addLineToPoint:CGPointMake(50, 350)];
        [bezierPath closePath];
         */
       /**画曲线 贝塞尔曲线路径
        UIBezierPath *bezierPath = [UIBezierPath bezierPath];
        [bezierPath moveToPoint:CGPointMake(50, 50)];
        [bezierPath addCurveToPoint:CGPointMake(250, 250) controlPoint1:CGPointMake(250, 50) controlPoint2:CGPointMake(50, 250)];
        */
         /** 圆弧或扇形路劲
        UIBezierPath *bezierPath = [UIBezierPath bezierPath];
        //M_PI_2表示弧度2π
        [bezierPath addArcWithCenter:CGPointMake(100, 100) radius:80 startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
        [bezierPath addLineToPoint:CGPointMake(100, 100)];
        [bezierPath closePath]; */
        /**矩形路径
        UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 100)];*/
        /**椭圆路径
        UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 200, 100)];*/
         /**圆角路径
        UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 200, 100)  cornerRadius:15];*/
        //图形路径
        UIBezierPath *bezierPath = [UIBezierPath bezierPath];
        //其间创建路径如上述图形路径等等
        sLayer.path = bezierPath.CGPath;
        //设置描边色
        sLayer.strokeColor = [UIColor redColor].CGColor;
        //设置填充色
    sLayer.fillColor = [UIColor greenColor].CGColor;
        sLayer.bounds = CGRectMake(0, 0, self.imageView.frame.size.width, self.imageView.frame.size.height);
        sLayer.anchorPoint =CGPointZero;
        [self.imageView.layer addSublayer:sLayer];
    }
        
    

    相关文章

      网友评论

          本文标题:Core Animation核心动画

          本文链接:https://www.haomeiwen.com/subject/puddvktx.html