关于CAShapeLayer的一些实用案例和技巧【转】
本文授权转载,作者:@景铭巴巴
一、使用CAShapeLayer实现复杂的View的遮罩效果
1.1、案例演示
最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者。服务端返回给我们的图片只是一张矩形的图片,我们如何把一张矩形的图片或者View,加上一层自定义遮罩效果,就是本文要讲的内容。效果演示如下:第一张是一个View的遮罩效果,第二张是UIImageView的遮罩效果。
演示图片
1.2、实现机制
在每一View的layer层中有一个mask属性,他就是专门来设置该View的遮罩效果的。该mask本身也是一个layer层。我们只需要生成一个自定义的layer,然后覆盖在需要遮罩的View上面即可。问题就归于如何生成入上图所示的不规则图片的Layer。CAShapeLayer可以根据几个点的依次连线,产生一个闭合空间的layer。如下图所示:
1.3、实现代码
实现方式为实现了CAShapeLayer的ViewMask的Category。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
@implementation CAShapeLayer (ViewMask) + (instancetype)createMaskLayerWithView : (UIView *)view{ CGFloat viewWidth = CGRectGetWidth(view.frame); CGFloat viewHeight = CGRectGetHeight(view.frame); CGFloat rightSpace = 10.; CGFloat topSpace = 15.; CGPoint point1 = CGPointMake(0, 0); CGPoint point2 = CGPointMake(viewWidth-rightSpace, 0); CGPoint point3 = CGPointMake(viewWidth-rightSpace, topSpace); CGPoint point4 = CGPointMake(viewWidth, topSpace); CGPoint point5 = CGPointMake(viewWidth-rightSpace, topSpace+10.); CGPoint point6 = CGPointMake(viewWidth-rightSpace, viewHeight); CGPoint point7 = CGPointMake(0, viewHeight); UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:point1]; [path addLineToPoint:point2]; [path addLineToPoint:point3]; [path addLineToPoint:point4]; [path addLineToPoint:point5]; [path addLineToPoint:point6]; [path addLineToPoint:point7]; [path closePath]; CAShapeLayer *layer = [CAShapeLayer layer]; layer.path = path.CGPath; return layer; } @end |
1.4、调用方式
1
2
3
4
5
|
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(40, 50, 80, 100)]; view.backgroundColor = [UIColor orangeColor]; [self.view addSubview:view]; CAShapeLayer *layer = [CAShapeLayer createMaskLayerWithView:view]; view.layer.mask = layer; |
二、使用CAShapeLayer实现一个音量大小动态改变的控件
2.1、案例演示
对于实时显示语音音量大小的需求,发现很多人的实现方式通过预放置多张图进行切换进行完成的。这样的处理,不但会浪费App的资源存储空间,而且效率也不高。对于符合某一定规律动态改变的图形,我们也可以考虑通过代码的方式来实现。
2.2、实现机制
外部轮廓View主要控制显示大小和显示的圆角效果。内部的Layer主要控制动态显示的高度,虽然他是矩形的。但是当把该Layer加入到View中,而该View设置了_dynamicView.clipsToBounds = YES;。内部的Layer超过外部轮廓的部分,则会被切除掉。
如此说来,我们只需要动态改变内部Layer显示的高度,即可完成该效果显示。是不是很简单啊。。
2.3、实现代码
_dynamicView 表示外部轮廓的View。
indicateLayer 表示内容动态显示的Layer。
实现动态改变的函数如下:
1
2
3
4
5
6
7
8
9
10
|
-(void)refreshUIWithVoicePower : (NSInteger)voicePower{ CGFloat height = (voicePower)*(CGRectGetHeight(_dynamicView.frame)/TOTAL_NUM); [_indicateLayer removeFromSuperlayer]; _indicateLayer = nil; UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, CGRectGetHeight(_dynamicView.frame)-height, CGRectGetWidth(_dynamicView.frame), height) cornerRadius:0]; _indicateLayer = [CAShapeLayer layer]; _indicateLayer.path = path.CGPath; _indicateLayer.fillColor = [UIColor whiteColor].CGColor; [_dynamicView.layer addSublayer:_indicateLayer]; } |
三、圆形进度条
3.1、案例演示
最近有一个小需求,就是要做一个圆形进度条,大概样子如下:
在不知道有CAShapeLayer的strokeStart和strokeEnd属性的时候,我采取的方法就是实时的 移除旧的CAShapeLayer 然后重绘这个圆形的CAShapeLayer。显然这种方式的效率是不高的。后来在一次看别人Demo的时候,发现别人使用了CAShapeLayer的strokeStart和strokeEnd属性,实现这一个效果十分的简单方便。下面就和大家来讲一讲这两个属性的使用。
3.2、属性详解
苹果官方给出这两个属性的解释为:
/* These values define the subregion of the path used to draw the
stroked outline. The values must be in the range [0,1] with zero
representing the start of the path and one the end. Values in
between zero and one are interpolated linearly along the path
length. strokeStart defaults to zero and strokeEnd to one. Both are
animatable. */
大概意思就是:我们可以对绘制的Path进行分区。这两个属性的值在0~1之间,0代表Path的开始位置,1代表Path的结束位置。是一种线性递增关系。strokeStart默认值为0,strokeEnd默认值为1。这两个属性都支持动画。
1
2
3
4
5
6
7
8
9
10
|
CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.frame = _demoView.bounds; shapeLayer.strokeEnd = 0.7f; shapeLayer.strokeStart = 0.1f; UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:_demoView.bounds]; shapeLayer.path = path.CGPath; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.lineWidth = 2.0f; shapeLayer.strokeColor = [UIColor redColor].CGColor; [_demoView.layer addSublayer:shapeLayer]; |
我们通过以上代码设置:strokeStart=0.1f; strokeEnd=0.7f则显示如下图所示。
3.3、圆形进度条的实现代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.frame = _demoView.bounds; UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:_demoView.bounds]; shapeLayer.path = path.CGPath; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.lineWidth = 2.0f; shapeLayer.strokeColor = [UIColor redColor].CGColor; [_demoView.layer addSublayer:shapeLayer]; CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@ "strokeEnd" ]; pathAnima.duration = 3.0f; pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; pathAnima.fromValue = [NSNumber numberWithFloat:0.0f]; pathAnima.toValue = [NSNumber numberWithFloat:1.0f]; pathAnima.fillMode = kCAFillModeForwards; pathAnima.removedOnCompletion = NO; [shapeLayer addAnimation:pathAnima forKey:@ "strokeEndAnimation" ]; |
关于CAShapeLayer的一些实用案例和技巧【转】的更多相关文章
- 关于CAShapeLayer的一些实用案例和技巧
一.使用CAShapeLayer实现复杂的View的遮罩效果 1.1.案例演示 最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者.服务端返回给我们的图片只是 ...
- 100个实用的CSS技巧,以及遇见的问题和解决方案。
前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个. 本案例都是经本人实测 ...
- 精选19款华丽的HTML5动画和实用案例
下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...
- JAVA实用案例之水印开发
写在最前面 上周零零碎碎花了一周的时间研究水印的开发,现在终于写了个入门级的Demo,做下笔记同时分享出来供大家参考. Demo是在我上次写的 JAVA实用案例之文件导入导出(POI方式) 框架基础上 ...
- JAVA实用案例之图片水印开发
写在最前面 上周零零碎碎花了一周的时间研究水印的开发,现在终于写了个入门级的Demo,做下笔记同时分享出来供大家参考. Demo是在我上次写的 JAVA实用案例之文件导入导出(POI方式) 框架基础上 ...
- JAVA实用案例之文件导出(JasperReport踩坑实录)
写在最前面 想想来新公司也快五个月了,恍惚一瞬间. 翻了翻博客,因为太忙,也有将近五个多月没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六 ...
- 基于TP5.1实用案例及教程
推荐<基于TP5.1实用案例及教程>书 目录: 通用封装 Export通用封装Import通用封装配合Import通用封装的ImportBaseVerify类Files通用封装Direct ...
- InfluxDB 聚合函数实用案例
InfluxDB 聚合函数实用案例 文章大纲 InfluxDB 简介 InfluxDB是GO语言编写的分布式时间序列化数据库,非常适合对数据(跟随时间变化而变化的数据)的跟踪.监控和分析.在我们的项目 ...
- scanf和printf格式化输入输出中非常实用的小技巧
输入输出几乎是每个C程序必须具备的功能,因为有了它们,程序才有了交互性.C提供的输入输出函数除了具有必须的输入输出功能外,还有一些其他实用的小技巧,了解这些小技巧将会为程序带来更友好的用户体验. 一. ...
随机推荐
- jstl
今日内容 l JSTL标签库 l EL函数 l 自定义标签库开发 l JSP模式和案例(*****) 1.1 上次课内容总结 JSP技术: * JSP:Java Server Pages * JSP运 ...
- SQL中rowcount与@@rowcount
rowcount的用法: rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, select * from 表A 这样的查询只会返回表A中的前10条数据.它和 ...
- SSO 单点登录实现
.NET基于Redis缓存实现单点登录SSO的解决方案 http://www.cnblogs.com/yinrq/p/5276628.html 共享cookie的方案 http://www.codep ...
- ios最新的视频地址链接
2016年最新iOS教程UI基础http://pan.baidu.com/s/1pLvnH8n资料链接:http://pan.baidu.com/s/1nvewKkh 密码:wktp 2016年最新i ...
- javaScript的call关键字
function add(a, b) { alert(a + b); } function sub(a, b) { alert(a - b); } add.call(sub,3,1); //这个例子中 ...
- Linux常用命令学习2---(文件搜索命令locate find、命令搜索命令whereis which、字符串搜索命令grep、帮助命令man)
1.文件搜索命令:locate [文件名] 在后台数据库中按文件名搜索,搜索速度比find快,耗费资源更少 例子:locate test.txt,就会显示文件名包含 test.txt的所 ...
- 《图形学》实验五:改进的Bresenham算法画直线
开发环境: VC++6.0,OpenGL 实验内容: 使用改进的Bresenham算法画直线. 实验结果: 代码: //中点Bresenham算法生成直线 #include <gl/glut.h ...
- devpress 的gridview 控件的行拖拽 z
首先,添加引用:using DevExpress.XtraGrid.Views.Grid.ViewInfo; gridControl1.AllowDrop = true; ...
- linux vi命令
>>>>>>>>>>>>>>>>>>>> 2016.12.6: vi是交互式的编 ...
- 请问MVC4是不是类似于html页+ashx页之间用JSON通过AJAX交换数据这种方式、?
不是,可以讲mvc模式是借鉴于java下面的mvc开发模式,为开发者公开了更多的内容和控制,更易于分工合作,与单元测试,借用官方的说法:MVC (Model.View.Controller)将一个We ...