CALayer # 01

最新推荐文章于 2020-10-29 11:21:52 发布

bingfengyiqie

最新推荐文章于 2020-10-29 11:21:52 发布

阅读量339

点赞数

CC 4.0 BY-SA版权

分类专栏： IOS 文章标签： CALayer 图层动画

本文链接：https://blog.youkuaiyun.com/bingfengyiqie/article/details/47452329

IOS 专栏收录该内容

25 篇文章

订阅专栏

本文深入探讨了iOS开发中UIView与其背后的CALayer的工作原理，包括UIView如何通过CALayer实现屏幕显示，以及如何利用CALayer的特性来实现复杂的UI效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

———————————————————— CALayer
1# 基本概念：
1》在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView

2》其实UIView之所以能显示在屏幕上，完全是因为它内部有一个图层

3》在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个图层

@property(nonatomic,readonly,retain) CALayer *layer;

4》当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图、首先会将所有内容绘制在自己的图层上、绘制完毕后、系统会将图层拷贝到屏幕上、这样就完成了UIView的显示。

5》总结：UIView本身并不具备显示功能、它内部的图层有显示功能。

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *orangeView;
@property (weak, nonatomic) IBOutlet UIImageView *imgView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self testView];
    //    [self testImageView];
    [self testImageView2];
    
}

- (void)testView
{
    //  注意：边框是在 View 内部的
    //  边框宽度
    self.orangeView.layer.borderWidth = 10;
    self.orangeView.layer.borderColor = [UIColor lightTextColor].CGColor;
    //  圆角 corner Radius [ 角度 半径]
    self.orangeView.layer.cornerRadius = 10;
    //  超出边界剪掉
    self.orangeView.layer.masksToBounds = YES;
    //  阴影偏移量
    self.orangeView.layer.shadowOffset = CGSizeMake(30, 20);
    //  阴影颜色
    self.orangeView.layer.shadowColor = [UIColor lightGrayColor].CGColor;
    //  阴影不透明度
    self.orangeView.layer.shadowOpacity = 0.5;
    
}

- (void) testImageView{
    self.imgView.layer.borderWidth = 10;
    self.imgView.layer.borderColor = [UIColor lightTextColor].CGColor;
    self.imgView.layer.cornerRadius = 10;
    /**
     UIImageView 比较特殊、图片是放在 次图层 上的、 而边框是 放在 主图层 上的、
     所以这里要把 超出 主图层 的部分全部剪掉( masksToBounds 设置为 YES)、才能够做出真正的圆角。
     */
    
    //    self.imgView.layer.masksToBounds = YES;
    /**
     因为剪掉了超出边框的部分、所以阴影也就显示不出来了(被剪掉了)。
     */
    //  阴影偏移量
    self.imgView.layer.shadowOffset = CGSizeMake(30, 20);
    //  阴影颜色
    self.imgView.layer.shadowColor = [UIColor orangeColor].CGColor;
    //  阴影不透明度
    self.imgView.layer.shadowOpacity = 0.3;
}


- (void)testImageView2
{
    /*
     三维旋转、 (0, 0, 0) -> (0, 0, 1[任意 int ]) 这两点的连线确定了方向(即向量)、
     即决定了旋转的轴。
     */
    //   三维旋转：  绕着 z 轴旋转 等价于 二维旋转
    self.imgView.layer.transform = CATransform3DMakeRotation(M_PI_4, 1, 1, 0);
    
    /* —— —— —— —— —— —— —— —— —— */
    
    //    三维缩放：z 轴为0 等价于 二维缩放
    self.imgView.layer.transform = CATransform3DMakeScale(1.5, 0.5, 0);
    //    二维旋转
    self.imgView.transform = CGAffineTransformMakeRotation(M_PI_4);
    //    注意要包装成对象
    NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4, 0, 0, 1)];
    //    使用 KVC 旋转
    [self.imgView.layer setValue:value forKeyPath:@"transform"];
    [self.imgView.layer setValue:@(M_PI_2) forKeyPath:@"transform.rotation"];
    self.imgView.layer.transform = CATransform3DMakeScale(0.5, 2, 0);
    [self.imgView.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 2, 0)] forKeyPath:@"transform"];
    // 可以传递哪些 forKeyPath , 在官方文档搜索关键字 "CATransform3D key paths"
    [self.imgView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
}

@end