6.2 核心动画->1.1 CALayer的基本属性

作者: 蓝田_Loto | 来源:发表于2016-07-25 12:53 被阅读171次

本文并非最终版本，如果想要关注更新或更正的内容请关注文集，联系方式详见文末，如有疏忽和遗漏，欢迎指正。

本文相关目录：
===================== 所属文集：6.0 图形和多媒体 =====================
6.2 核心动画->1.0 CALayer的简介
 6.2 核心动画->1.1 CALayer的基本属性
 6.2 核心动画->1.2 CALayer的创建 & 非根layer的隐式动画
 6.2 核心动画->2.0 Core Animation(核心动画)
6.2 核心动画->3.0 核心动画 & UIView动画
 6.2 核心动画->4.0 常用动画效果
===================== 所属文集：6.0 图形和多媒体 =====================

layer边框：

- 边框宽度
@property CGFloat borderWidth;

- 边框颜色(CGColorRef类型)
@property(nullable) CGColorRef borderColor;

举例：

// 边框宽度
redView.layer.borderWidth = 10;

// 边框颜色(CGColorRef类型) ，通过[UIColor xxxxColor].CGColor 转换
redView.layer.borderColor = [UIColor whiteColor].CGColor;

layer阴影：

"阴影"效果(shadowColor、shadowOffset、shadowOpacity属性需要同时设置后才可以看到)

@property float shadowOpacity;  // 默认为0，范围0-1（透明-不透明），Opacity：不透明度
@property CGSize shadowOffset;  // 阴影的偏移量，默认位置（0，-3），
@property(nullable) CGColorRef shadowColor;  //阴影颜色
@property CGFloat shadowRadius;  // 阴影的圆角半径

举例：

redView.layer.shadowOpacity = 1;

redView.layer.shadowOffset = CGSizeZero;    // CGSizeZero表示0
redView.layer.shadowOffset = CGSizeMake(20, 20);

redView.layer.shadowColor = [UIColorblueColor].CGColor; //阴影颜色

redView.layer.shadowRadius = 20; // 阴影的圆角半径

layer圆角:

对于正方形来说, 当圆角半径为边长的一半的时候, 就是一个圆形

- layer的圆角半径
@property CGFloat cornerRadius;

- 超出layer的部分不再显示
// maskToBounds=YES：可看做是强制内部的所有子层支持圆角效果，少了这个设置，UIImageView是不会有圆角效果
// 如果设置了maskToBounds=YES，那将不会有阴影效果
@property BOOL masksToBounds;

举例：

redView.layer.cornerRadius = 50;   // 设置layer的圆角半径
redView.layer.masksToBounds = YES; // 超出layer的部分不再显示(裁剪,设置头像的时候加上)

layer大小:

- 宽度和高度
@property CGRect bounds;

举例：

  testView.layer.bounds = CGRectMake(0, 0, 200, 200);

layer位置:

默认情况下，CALayer的中点会在position所指定的位置上。而anchorPoint的x、y取值范围都是0~1，默认值为(0.5, 0.5)，为其他值时，则会有相应的变化。因为它决定着CALayer身上的哪个点会在position所指定的位置上

// 位置 (默认指中点，具体由anchorPoint决定)
// 用来设置CALayer在父层中的位置 , 以父层的左上角为原点(0, 0)
@property CGPoint position;

testView.layer.position = CGPointMake(0, 0); // 默认position 的点是view的center

// 锚点、定位点 (x,y的范围都是0-1)，它决定着CALayer身上的哪个点会在position属性所指的位置 
// 以自己的左上角为原点(0, 0)  它的x、y取值范围都是0~1，默认值为（0.5, 0.5）
@property CGPoint anchorPoint;

anchorPoint.gif

position和anchorPoint.gif

layer内容：

- 内容（比如设置为图片CGImageRef）
// UIKit 中使用的是 Foundation 框架, 而 Foundation 框架又使用的是 Core Foundation 框架
// Core Foundation 框架都是 C 语言的, 一般凡是 Core Xxxx 的框架都是 C 语言的。
// __bridge 类型 表达式, 的作用一般就是把 Core Foundation 中的数据类型转换成Foundation 中的类型, 桥接的时候也会设置到一些所有权的转换等。
@property(nullable, strong) id contents;

举例：

// 设置图层内容  (将一个UIImage类型转换为CGImageRef)<c对象转换成oc对象>
redView.layer.contents = (__bridge id)([UIImage imageNamed:@"TD"].CGImage);

layer背景颜色:

- 背景颜色(CGColorRef类型)
@property(nullable) CGColorRef backgroundColor;

举例：

  testView.layer.backgroundColor = [UIColor blueColor].CGColor;

layer透明度:

@property float opacity;

举例：

testView.opacity = 0;

代码示例：（本示例需要注释一些代码才能显示相应效果，不再赘述）

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

  // 创建一个redView
  UIView *redView =
      [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
  redView.backgroundColor = [UIColor redColor];
  [self.view addSubview:redView];

  // 边框宽度
  redView.layer.borderWidth = 10;
  // 边框颜色(CGColorRef类型) ，通过[UIColor xxxxColor].CGColor 转换
  redView.layer.borderColor = [UIColor whiteColor].CGColor;

  // 阴影（在CA框架中不能直接使用UIKit的数据类型）
  redView.layer.shadowOpacity = 1; //图层中的Opacity相当于view的alpha属性
  redView.layer.shadowOffset = CGSizeZero; // //阴影偏移点，CGSizeZero表示0
  //  redView.layer.shadowOffset = CGSizeMake(20, 20);
  redView.layer.shadowColor = [UIColor blueColor].CGColor; //阴影颜色
  redView.layer.shadowRadius = 50; // 阴影的圆角半径

  // 圆角半径
  redView.layer.cornerRadius = 50; // 设置控件的主层的圆角半径

  // 如有图片，一般都是显示在contents上而非主层上
  NSLog(@"%@", redView.layer.contents);

  // 超出主层边框的内容全部裁剪掉，类似于clip，使用masksToBounds阴影效果无效
  // 超出layer的部分不再显示(裁剪,设置头像的时候加上)
  redView.layer.masksToBounds = YES;

  // 大小
  redView.layer.bounds = CGRectMake(0, 0, 200, 200);

  // 位置 (默认的情况下  positon的点 表示 view中心的位置)
  redView.layer.position = CGPointMake(100, 100);

  // 设置图层内容  (将一个UIImage类型转换为CGImageRef)<c对象转换成oc对象>
  redView.layer.contents = (__bridge id)([UIImage imageNamed:@"TD"].CGImage);

  // 颜色
  redView.layer.backgroundColor = [UIColor blueColor].CGColor;

  // 图层形变：旋转和缩放
  [UIView animateWithDuration:1
                   animations:^{

                     // 旋转方法1：
                     redView.layer.transform =
                         CATransform3DMakeRotation(M_PI, 1, 1, 0);
                     // 旋转方法2：KVC
                     //                 [redView.layer setValue:@(M_PI)
                     //                 forKeyPath:@"transform.rotation"];

                     // 缩放方法1：
                     redView.layer.transform =
                         CATransform3DMakeScale(0.5, 0.5, 1);
                     // 缩放方法2：快速进行图层缩放, KVC方式，x, y同时缩放0.5
                     //                 [redView.layer setValue:@0.5
                     //                 forKeyPath:@"transform.scale"];

                   }];
}

- (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
}

@end

运行效果：

CALayer基本属性.gif

CALayer的transform属性

transform的属性列表：

transform的属性列表.png

// 平移(z轴没反应)
// Translate 't' by '(tx, ty, tz)' and return the result: t' = translate(tx, ty, tz) * t.    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0)
CA_EXTERN CATransform3D CATransform3DTranslate (CATransform3Dt,CGFloattx, CGFloat ty, CGFloat tz);

// 缩放(z轴 没反应)
// Scale 't' by '(sx, sy, sz)' and return the result: t' = scale(sx, sy, sz) * t. __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0)
CA_EXTERNC ATransform3D CATransform3DScale (CATransform3Dt,CGFloatsx, CGFloat sy, CGFloat sz);

// 旋转：从layer的中心点到给定的坐标点之间连一条线, 然后以这个线为中心轴, 开始旋转
// Rotate 't' by 'angle' radians about the vector '(x, y, z)' and return the result. If the vector has zero length the behavior is undefined: t' = rotation(angle, x, y, z) * t.  __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0)
CA_EXTERN CATransform3D CATransform3DRotate (CATransform3Dt,CGFloatangle, CGFloat x, CGFloat y, CGFloat z);

layer形变属性:

- 旋转,缩放,平移
@property CATransform3D transform;

举例：

 // 旋转
  self.layer.transform = CATransform3DMakeRotation(M_PI_4, 1, 0, 0);

  // x
  self.layer.transform = CATransform3DRotate(self.layer.transform, M_PI_4, 1, 0, 0);
  // y
  self.layer.transform = CATransform3DRotate(self.layer.transform, M_PI_4, 0, 1, 0);
  // z
 self.layer.transform = CATransform3DRotate(self.layer.transform, M_PI_4, 0, 0, 1);

  // 缩放
  // x
  self.layer.transform  = CATransform3DScale(self.layer.transform, 0.5, 1, 1);
  // y
  self.layer.transform  = CATransform3DScale(self.layer.transform, 1, 0.5, 1);
  // z (无效果)
   self.layer.transform = CATransform3DScale(self.layer.transform, 1, 1, 0.5);

 // 平移  (z无效果)
  self.layer.transform = CATransform3DTranslate(self.layer.transform, 100, 100, 100);

代码示例：

#import "ViewController.h"

@interface ViewController ()
@property(weak, nonatomic) CALayer *layer;
@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  CALayer *layer = [[CALayer alloc] init];

  layer.bounds = CGRectMake(0, 0, 100, 100);          // 大小
  layer.position = CGPointMake(100, 100);             // 位置
  layer.backgroundColor = [UIColor redColor].CGColor; // 颜色
  layer.opacity = 1;                                  // 透明度

  [self.view.layer addSublayer:layer];

  layer.contents = (__bridge id)[UIImage imageNamed:@"me"].CGImage;

  // 给全局属性赋值
  self.layer = layer;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

  // 旋转
  self.layer.transform =
      CATransform3DRotate(self.layer.transform, M_PI_4, 0, 0, 1);

  // 平移(z轴 没反应)
  self.layer.transform =
      CATransform3DTranslate(self.layer.transform, 10, 10, 0);

  // 缩放(z轴 没反应)
  self.layer.transform = CATransform3DScale(self.layer.transform, 1, 1, 0.5);
}
@end

运行效果：

CALayer的transform属性.gif

本文源码 Demo 详见 Github
https://github.com/shorfng/iOS_6.0_Graphics_and_multimedia.git

作者：蓝田（Loto）

出处：简书

如果你觉得本篇文章对你有所帮助，请点击文章末尾下方“喜欢”
如有疑问，请通过以下方式交流：
① 评论区回复 ② 微信（加好友请注明“简书+称呼”） ③发送邮件至 shorfng@126.com

本文版权归作者和本网站共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。

网友评论

幸运星_c393:redView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 1, 0); redView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1);
为什么这两行代码可以由反旋转到正的，正常来说不是由正变反的吗，新人求解答，谢谢
蓝田_Loto:@幸运星_c393 首先这是 Rotation起的效果，你可以先CATransform3DMakeRotation(M_PI, 1,0, 0);观察效果，然后CATransform3DMakeRotation(M_PI, 0,1, 0);再观察效果，可以发现CATransform3DMakeRotation(M_PI, 1, 1, 0); 这个图其实是先以x轴翻转，再以y轴翻转，然后顺时针移动了180°，可能图不是很明显，可以换个图对比一下
helloDolin:写的好详细，mark
蓝田_Loto:@helloDolin

6.2 核心动画->1.1 CALayer的基本属性

layer边框：

layer阴影：

layer圆角:

layer大小:

layer位置:

layer内容：

layer背景颜色:

layer透明度:

CALayer的transform属性

作者：蓝田（Loto）

出处：简书

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS Developer - Animation

iOS 核心动画

iOS Developer - CALayer

Core Animation

iOS进阶指南

iOS Developer

iOS学习笔记

iOS 开发

6.2 核心动画->1.1 CALayer的基本属性

layer边框：

layer阴影：

layer圆角:

layer大小:

layer位置:

layer内容：

layer背景颜色:

layer透明度:

CALayer的transform属性

作者：蓝田（Loto）

出处： 简书

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

出处：简书