转载来自简书 圆角
来源:互联网 发布:知乎马上上和丁芙妮 编辑:程序博客网 时间:2024/06/08 14:38
一般我们在iOS开发的过程中设置圆角都是如下这样设置的。
avatarImageView.clipsToBounds = YES; [avatarImageView.layer setCornerRadius:50]; 这样设置会触发离屏渲染,比较消耗性能。比如当一个页面上有十几头像这样设置了圆角 会明显感觉到卡顿。 注意:ios9.0之后对UIImageView的圆角设置做了优化,UIImageView这样设置圆角 不会触发离屏渲染,ios9.0之前还是会触发离屏渲染。而UIButton还是都会触发离屏渲染。
所有如果要高性能的设置圆角就需要找另外的方法了。下面是我找到的一些方法并写了一个例子。github源码
设置圆角的方法
直接使用setCornerRadius
这种就是最常用的,也是最耗性能的。
setCornerRadius设置圆角之后,shouldRasterize=YES光栅化
avatarImageView.clipsToBounds = YES;[avatarImageView.layer setCornerRadius:50];avatarImageView.layer.shouldRasterize = YES;shouldRasterize=YES设置光栅化,可以使离屏渲染的结果缓存到内存中存为位图,使用的时候直接使用缓存,节省了一直离屏渲染损耗的性能。但是如果layer及sublayers常常改变的话,它就会一直不停的渲染及删除缓存重新创建缓存,所以这种情况下建议不要使用光栅化,这样也是比较损耗性能的。问题:我发现UIImageView上加载网络图片使用光栅化会有一点模糊,而UIButton上使用光栅化没有模糊,不知道为什么?求大神解答!
直接覆盖一张中间为圆形透明的图片
这种方法就是多加了一张透明的图片,GPU计算多层的混合渲染blending也是会消耗一点性能的,但比第一种方法还是好上很多的。
Core Graphics绘制圆角
这种方式性能最好,但是UIButton上不知道怎么绘制,可以用UIimageView添加个点击手势当做UIButton使用。UIGraphicsBeginImageContextWithOptions(avatarImageView.bounds.size, NO, [UIScreen mainScreen].scale);[[UIBezierPath bezierPathWithRoundedRect:avatarImageView.bounds cornerRadius:50] addClip];[image drawInRect:avatarImageView.bounds];avatarImageView.image = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();这段方法可以写在SDWebImage的completed回调里,也可以在UIImageView+WebCache.h里添加一个方法,isClipRound判断是否切圆角,把上面绘制圆角的方法封装到里面。- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options isClipRound:(BOOL)isRound progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock;
使用Instruments的Core Animation查看性能
Color Offscreen-Rendered Yellow
开启后会把那些需要离屏渲染的图层高亮成黄色,这就意味着黄色图层可能存在性能问题。Color Hits Green and Misses Red
如果shouldRasterize被设置成YES,对应的渲染结果会被缓存,如果图层是绿色,就表示这些缓存被复用;如果是红色就表示缓存会被重复创建,这就表示该处存在性能问题了。
用Instruments测试得
第一种方法,ios9.0之前UIImageView和UIButton都高亮为黄色。ios9.0之后只有UIButton高亮为黄色。
第二种方法UIImageView和UIButton都高亮为绿色,但UIImageView加载网络图片后会有一点模糊
第三种方法无任何高亮,说明没离屏渲染。
这种圆片覆盖的方法一般只用在底色为纯色的时候,如果圆角图片的父View是张图片的时候就没办法了,而且底色如果是多种颜色的话那要做多张不同颜色的圆片覆盖。第四种方法无任何高亮,说明没离屏渲染
问题回复:
有回复提到还有一种mask方法。
这种方法比第一种方法其实更卡顿。一次mask发生了两次离屏渲染和一次主屏渲染。 具体可以参考小心别让圆角成了你列表的帧数杀手@nerozhao说第四种比第一种更卡。
我刚在demo里加了个例子测试了一下,第一种能明显的感觉到卡顿,第四种还是挺顺畅的,有兴趣的可以自己试试看。第四种是解决了离屏渲染掉帧的问题,如果有其他的性能问题的话请指教!
可以用Instruments的 GPU Driver进行测试:
- Renderer Utilization
如果这个值超过了~50%,就意味着你的动画可能对帧率有所限制,很可能因为离屏渲染或者是重绘导致的过度混合。 - Tiler Utilization
如果这个值超过了~50%,就意味着你的动画可能限制于几何结构方面,也就是在屏幕上有太多的图层占用了。
图上面一部分是第一种方法的数据,下面一部分是第四种方法的数据。
第一种方法的Renderer Utilization 和 Tiler Utilization 基本在90%左右。帧率在20左右。
第四种方法的Renderer Utilization 和 Tiler Utilization 基本在20%左右。帧率接近60。
帧率越接近60滑动越顺畅。所以第四种方法明显比第一种高效很多。
- 转载来自简书 圆角
- 来自简书
- Runtime-来自简书
- KMP(转载来自Matrix67原创)
- (转载)来自 COM 经验的八个教训
- 转载请注明来自1Vr.Cn
- C#多线程(转载 来自网络)
- npm 常用命令详解 [此文来自转载]
- matlab__正则表达式(部分来自转载)
- 【来自简书】sublime3 build system
- sokcet链接详解--来自简书
- [转载]如何转载网页(来自谭师哥)
- 【转载】偷窥女生宿舍(来自新浪读书)
- 网络搜索技术 (转载-来自一位网友)
- [转载]来自smallfox的J2EE学习笔记系列
- 来自MIT人工智能实验室:如何做研究? --转载
- 转载学习c + +反汇编-来自贡献者feixiaoxing
- Linux一句话精彩问答(转载来自www.chinaunix.net)
- iOS中,如何做到未知参数数量的反射
- Visual studio 2012 创建web service
- Machine Learning Foundations(NTU) 第一次作业
- java面向对象思想计算20年后母牛数量
- 短信验证码相关
- 转载来自简书 圆角
- Layout_weight的深刻理解
- 如何测试一个网页登陆界面
- ubuntu 安装 swift 64位
- Atitit. . 软件命名空间与类名命名单词的统计程序设计v2
- Angular JS
- Json.NET 序列化JSON字符串时,如何忽略值为null的成员?
- 编程练习题
- 使用OpenSessionInView解决懒加载需要注意的问题