iOS:CALayer(17-12-06更)
目录
1、CALayer(父类)
2、CAShapeLayer(形状/画布)
3、CAEmitterLayer(粒子发射层)
4、CAGradientLayer(渐变层)
5、CATransformLayer(3D变换容器层)
6、CAReplicatorLayer(重复图层)
N、CATextLayer(文字绘制,不学...)
顺序为 接触/学习 顺序
1、CALayer(父类)
1)、几个常用属性
CALayer *layer = [[CALayer alloc]init];
// 一般layer尺寸设置,为 bounds = {0, 0, width, height}; position = {centerX, centery};frame 为虚拟、计算出来的。
layer.bounds
// 锚点的位置,默认中心,等同于View的center。如果锚点 anchorPoint 有修改过,比如anchorPoint = {0,0} ,则position = {x, y};
layer.position
// 锚点,旋转、位置相关,默认(0.5, 0.5)。范围(0, 0) <-> (1, 1)
layer.anchorPoint // 寄宿图
layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"0"].CGImage);
// 内容显示方式,对齐、自适应、不超出边界、拉伸
layer.contentsGravity = kCAGravityResizeAspectFill;
// 设置某个区域会被拉伸变化,大小均为0至1,{0.25, 0.25, 0.5, 0.5}
layer.contentsCenter
// 设置寄宿图缩放,防止在Retina屏出错
layer.contentsScale = [UIScreen mainScreen].scale;
// 拼合图片,大小均为0至1,{0, 0, 0.5, 0.5},如红白机,单独改变一个图片块,而不是移动图片
layer.contentsRect
// 图片拉伸过滤,线性过滤保留形状,最近过滤则保留像素的差异
// 对于比较小的图或者是差异特别明显,极少斜线的大图用kCAFilterNearest,如数码管显示时钟
// 很多斜线或是曲线轮廓的图片,用kCAFilterLinear 、 kCAFilterTrilinear
layer.magnificationFilter //变换
layer.transform
//圆角、边框、透明、阴影相关
layer.masksToBounds
layer.cornerRadius
layer.borderWidth
layer.borderColor
layer.opacity
layer.shadowColor
layer.shadowOpacity
layer.shadowOffset
layer.shadowRadius
layer.shadowPath // 呈现图层,可以判断动画时的位置(首次显示在屏幕上之后,才有值,否则返回nil)
layer.presentationLayer
// 在呈现图层上调用modelLayer,返回所依赖的CALayer,通常返回self
layer.modelLayer
// 可以垂直翻转,比如画坐标系。
layer.geometryFlipped // Z轴,透视效果。3D变换,如旋转会很明显
layer.zPosition
layer.anchorPointZ // 同View
layer.frame
layer.hidden
layer.superlayer
layer.sublayers
layer.backgroundColor
2)、几个方法
// 子类重写,设置默认属性
+ (nullable id)defaultValueForKey:(NSString *)key
{
if ([key isEqualToString:@"backgroundColor"])
{
return (id)[UIColor orangeColor].CGColor;
}
return [super defaultValueForKey:key];
} // 添加动画
- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key; //
- (void)display;
- (void)setNeedsDisplay;
- (void)setNeedsDisplayInRect:(CGRect)r;
- (BOOL)needsDisplay;
- (void)displayIfNeeded; //
- (void)setNeedsLayout;
- (BOOL)needsLayout;
- (void)layoutIfNeeded;
- (void)layoutSublayers;
3)、类似View
// 内容(图片)的缩放
layer.contentGravity
view.contentMode // 超出剪裁
layer.maskToBounds
view.clipsToBounds // 图片指定区域拉伸(聊天气泡)
layer.contentsCenter
view.resizableImageWithCapInsets // 层级结构
- (void)removeFromSuperlayer;
- (void)addSublayer:(CALayer *)layer;
- (void)insertSublayer:(CALayer *)layer atIndex:(unsigned)idx;
- (void)insertSublayer:(CALayer *)layer below:(nullable CALayer *)sibling;
- (void)insertSublayer:(CALayer *)layer above:(nullable CALayer *)sibling;
- (void)replaceSublayer:(CALayer *)layer with:(CALayer *)layer2;
2、CAShapeLayer
1)、使用参照 《iOS:绘图》 -> “1、UIBezierPath(贝塞尔曲线)” -> “2)、” 。
2)、切任意圆角、任意形状。使用参照 《iOS:绘图》 -> “1、UIBezierPath(贝塞尔曲线)” -> “3)、” 。
3)、截取中空的形状,做彩色进度圆圈。使用参照 《iOS:绘图》 -> “1、UIBezierPath(贝塞尔曲线)” -> “4)、彩色的动画加载圆” 。
4)、优点:
1)、渲染快速。CAShapeLayer使用了硬件加速,绘制同一图形会比用Core Graphics快很多。
2)、高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形,所以无论有多大,都不会占用太多的内存。
3)、不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。
4)、不会出现像素化。当你给CAShapeLayer做3D变换时,它不像一个有寄宿图的普通图层一样变得像素化。
3、CAEmitterLayer(粒子发射层)
1)、使用参照 《iOS:动画》 -> “N、粒子动画” -> “1)、创建粒子发射层” 。
4、CAGradientLayer(渐变层)
属性、方法不多,用例子吧,可直接复制使用。
1)、透明度(示例)
//创建
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
//渐变点
UIColor *colorTop = [[UIColor alloc]initWithRed:0.0 green:0.0 blue:0.0 alpha:1];
UIColor *colorButtom = [[UIColor alloc]initWithRed:0.0 green:0.0 blue:0.0 alpha:0];
gradientLayer.colors = @[ (__bridge id)colorTop.CGColor, (__bridge id)colorButtom.CGColor];
// 渐变点位置(个数对应colors个数,没对应也没事,只是有点奇怪),点与点的距离越小,变化越快
// gradientLayer.locations = @[@0.0,@1.0];
// 变化类型,线性变化(只有这个宏,不设也没事)
// gradientLayer.type = kCAGradientLayerAxial;
//渐变方向 x:0->1 左到右,反之则反。同理,y:0->1 上到下,反之则反。(0.0)->(1.1)屏幕左上到右下斜着变化
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(0, 1.0);
//大小,如果小于bounds,应该还要设置 position 。
gradientLayer.frame = self.bounds;
//添加
[self.layer addSublayer:gradientLayer];
补充:colorTop 可直接 = [UIColor blackColor];
colorButtom 可直接 = [UIColor clearColor];
2)、可通过shapeLayer来设置自身的mask,设置彩色圆环形加载条。
使用参照 《iOS:绘图》 -> “1、UIBezierPath(贝塞尔曲线)” -> “4)、彩色的动画加载圆” 。
5、CATransformLayer(3D变换容器层)
1)、特性是容器,用来包含子layer做3D变换。容器没有内容,所以设置背景颜色等,会失效。
2)、子layer的z轴point、z轴3D位移,在被包含在CATransformLayer才有效果。(在普通view、layer被扁平化在父视图上)
3)、一般用这个3D变换容器,基本都涉及到旋转。所以初始化时设置m34,必不可少。灭点。
CATransform3D t = CATransform3DIdentity;
t.m34 = 1.0/-500;
transformLayer.transform = t;
4)、变换,参照《iOS:动画》 -> “1、UIView Animation” -> “1-3、CATransform3D(缩放、位移、旋转。三维变换)” 。 例:
CATransform3D t = transformLayer.transform;
t = CATransform3DRotate(t, kRADIANS_FROM_DEGREES(15), 0, 1, 0);
transformLayer.transform = t;
5)、因为是用CATransformLayer容器做3D变换,所以子layer,依然绕CATransformLayer的position(anchorPoint)3D变换。
其余3D变换特性,参照《iOS:动画》 -> “1、UIView Animation” -> “1-3、CATransform3D(缩放、位移、旋转。三维变换)”
6、CAReplicatorLayer(重复图层)
属性、方法不多,用例子吧,可直接复制使用。
1)、重复的颜色渐变图层(示例)
// 创建contentView
UIView *contentView = [[UIView alloc]initWithFrame:CGRectMake(50, 100, 300, 300)];
contentView.backgroundColor = [UIColor cyanColor];
[self.view addSubview:contentView]; //============ CAReplicatorLayer Begin============ // 添加重复图层,尺寸同contentView
CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
replicator.frame = contentView.bounds;
[contentView.layer addSublayer:replicator]; // 重复10次
replicator.instanceCount = 10; // 变换。会在上一次的图层,再变化(颜色、位移、旋转等等)
CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DTranslate(transform, 0, 50, 0);
// transform = CATransform3DRotate(transform, M_PI/5, 0, 0, 1);
replicator.instanceTransform = transform; // 在上一次的图层颜色通道再-0.1
replicator.instanceBlueOffset = -0.1;
replicator.instanceGreenOffset = -0.1; //============ CAReplicatorLayer End============ // 添加内容到重复的图层上。
CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(150.0f-25.0, 0.0f, 50.0f, 50.0f);
layer.backgroundColor = [UIColor whiteColor].CGColor;
[replicator addSublayer:layer];
2)、重复的倒影图层(示例)
// 要倒影的图片尺寸
#define IMAGEVIEW_HEIGHT 171.5
#define IMAGEVIEW_WIDTH 242 // 创建contentView(包含原图片+倒影的高度),高再+2为图片与倒影的间隙
UIView *contentView = [[UIView alloc]initWithFrame:CGRectMake(50 , 50, IMAGEVIEW_WIDTH, IMAGEVIEW_HEIGHT*2 + 2)];
[self.view addSubview:contentView]; //============ CAReplicatorLayer Begin============ // 添加重复图层
CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
replicator.frame = contentView.bounds;
[contentView.layer addSublayer:replicator]; // 重复2次
replicator.instanceCount = 2; // 变换,会在上一次的图层,再变化(颜色、位移、旋转等等)
CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DRotate(transform, M_PI, 1, 0, 0);
replicator.instanceTransform = transform; // 在上一次的图层透明通道再-0.6
replicator.instanceAlphaOffset = -0.6; //============ CAReplicatorLayer End============ // 添加内容到重复的图层上。
CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(0, 0, IMAGEVIEW_WIDTH, IMAGEVIEW_HEIGHT);
layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"123"].CGImage);
[replicator addSublayer:layer]; // 渐变层蒙版
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = @[ (__bridge id)[UIColor blackColor].CGColor,(__bridge id)[UIColor clearColor].CGColor];
// 渐变点控制,contentView的0-0.5为不透明,0.5-0.8为渐透明,0.8-1.0为透明
gradientLayer.locations = @[@0.5,@0.8];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(0, 1.0);
gradientLayer.frame = contentView.bounds;
contentView.layer.mask = gradientLayer;
iOS:CALayer(17-12-06更)的更多相关文章
- 2021.12.06 P2501 [HAOI2006]数字序列(动态规划+LIS)
2021.12.06 P2501 [HAOI2006]数字序列(动态规划+LIS) https://www.luogu.com.cn/problem/P2501 题意: 现在我们有一个长度为 n 的整 ...
- 2021.12.06 平衡树——Treap
2021.12.06 平衡树--Treap https://www.luogu.com.cn/blog/HOJQVFNA/qian-xi-treap-ping-heng-shu 1.二叉搜索树 1.1 ...
- 2021.12.06 P2511 [HAOI2008]木棍分割(动态规划)
2021.12.06 P2511 [HAOI2008]木棍分割(动态规划) https://www.luogu.com.cn/problem/P2511 题意: 有n根木棍, 第i根木棍的长度为 \( ...
- 2021.12.06 P2508 [HAOI2008]圆上的整点(数论+ π )
2021.12.06 P2508 [HAOI2008]圆上的整点(数论+ \(\pi\) ) https://www.luogu.com.cn/problem/P2508 题意: 求一个给定的圆 \( ...
- 2021.12.06 P1450 [HAOI2008]硬币购物(组合数学+抽屉原理+DP)
2021.12.06 P1450 [HAOI2008]硬币购物(组合数学+抽屉原理+DP) https://www.luogu.com.cn/problem/P1450 题意: 共有 44 种硬币.面 ...
- iOS系列 基础篇 06 标签和按钮 (Label & Button)
iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single Vi ...
- [CareerCup] 17.12 Sum to Specific Value 和为特定数
17.12 Design an algorithm to find all pairs of integers within an array which sum to a specified val ...
- Yii2 AR find用法 (2016-05-18 12:06:01)
Yii2 AR find用法 (2016-05-18 12:06:01) 转载▼ User::find()->all(); 返回所有数据 User::findOne($id); ...
- careercup-中等难度 17.12
17.12 设计一个算法,找出数组中两数之和为指定值的所有整数对. 解答 时间复杂度O(n)的解法 我们可以用一个哈希表或数组或bitmap(后两者要求数组中的整数非负)来保存sum-x的值, 这样我 ...
- Windows 7 Ultimate(旗舰版)SP1 32/64位官方原版下载(2011年5月12日更新版)
MSDN于2011年5月12日,最新发布简体中文Windows 7 Ultimate 旗舰版 SP1 DVD镜像安装包,分32位和64位两个版本.最新发行代号分别是:677486(32位),67740 ...
随机推荐
- 01_Mac下安装homebrew
参考:https://jingyan.baidu.com/album/fec7a1e5ec30341190b4e7e5.html?picindex=3 1.在打开的命令行工具中输入如下语句: ruby ...
- SpringBoot如何添加拦截器
在web开发的过程中,为了实现登录权限验证,我们往往需要添加一个拦截器在用户的的请求到达controller层的时候实现登录验证,那么SpringBoot如何添加拦截器呢? 步骤如下: 1.继承Web ...
- vscode环境配置
"go.goroot": "/home/ken/go", "go.gopath": "/home/ken/gopath" ...
- pt-query-digest(percona toolkit)小解
pt-query-digest可以通过logs, processlist, 和tcpdump来分析MySQL的查询相关信息,基本语法如下: pt-query-digest [OPTIONS] [FIL ...
- Linq中使用Left Join 和 Right Join
原文地址:http://www.cnblogs.com/xinjian/archive/2010/11/17/1879959.html 准备一些测试数据,如下: use Test Create tab ...
- linux中进入mysql时报错Access denied for user 'root'@'localhost' (using password: YES)解决方案
之前在linux中装完mysql后直接在命令行窗口输入mysql就会进入数据库了,但是今天输入mysql命令后直接报错,如下图: 之后输入:mysql -uroot -p 提示输入密码:***** 还 ...
- VMware安装VMware tool后mount /dev/cdrom /mnt成功挂载含rpm包的镜像
安装虚拟机后如果不安装vmware tool使用mount /dev/cdrom /mnt可以成功挂在含rpm包的镜像,但是安装VMware tool后挂在后/mnt中是错误的内容.查了半天后无果,自 ...
- 如何控制table中td内的文本位置
默认为左中效果 td中垂直用valign 取值为:top/middle/bottom/baseline,水平用align 取值为:left,center,right;
- June 25th 2017 Week 26th Sunday
There is always that one song that brings back old memories. 总有那么一首歌,让你想起那些旧的回忆. There are seveal so ...
- Disruptor
高性能队列Disruptor系列2--浅析Disruptor 目录 1. Disruptor简单介绍2. 为什么Disruptor如此之快3. Disruptor结构分析 1. Disruptor ...