iOS之UI--CAShapeLayer
关于CAShapeLayer
内容大纲:
- CAShapeLayer简介
- 贝塞尔曲线与CAShapeLayer的关系
- strokeStart和strokeEnd 动画
- 用CAShapeLayer实现进度条效果,以及更加复杂的效果
1、CAShapeLayer简介
- 1、CAShapeLayer继承自CALayer,可以使用CALayer的所有属性值
- 2、CAShapeLayer需要与贝塞尔曲线配合使用才有意义
- 3、使用CAShapeLayer与贝塞尔曲线可以实现不在view的drawRect方法中画出有一些想要的图形
- 4、CAShapeLayer属于CoreAnimation框架,其动画渲染直接提交到手机的GPU当中,相较于view的drawRect方法使用CPU渲染而言,其效率极高,能大大优化内存使用情况。
- 个人经验:可以重写UIView的子类中的drawRect来实现进度条效果,但是UIView的drawRect是用CPU渲染实现的,而使用CAShapeLayer效率更高,因为它用的是GPU渲染。
2、贝塞尔曲线与CAShapeLayer的关系
- 1、CAShapeLayer中有Shape这个单词,顾名思义,它需要一个形状才能生效
- 2、贝塞尔曲线可以创建基于矢量的路径
- 3、贝塞尔曲线给CAShapeLayer提供路径,CAShapeLayer在提供的路径中进行渲染,路径会闭环,所以路径绘制出了Shape
4、用于CAShapeLayer的贝塞尔曲线做为path,其path实一个首尾相接的闭环的曲线,即使该贝塞尔曲线不是一个闭环的曲线
图2.png
如何建立贝塞尔曲线和CAShapeLayer的联系:
- 类:CAShapeLayer
属性:path
- 值:可以是贝塞尔曲线对象
UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,200,100)]; shape.path = circle.CGPath;
属性:fillColor 修改贝塞尔曲线的填充颜色
- 值:CGColor对象
属性:maskToBounds
- 值:YES 会让超出CAShapeLayer的部分不会显示
3、strokeStart与strokeEnd动画
- 1、将ShapeLayer的fillColor设置成透明背景
- 2、设置线条的宽度(lineWidth)的值
- 3、设置线条的颜色
4、将strokeStart值设定成0,然后让strokeEnd的值变化触发隐式动画
类:CAShapeLayer
属性:
- strokeStart
- strokeEnd
- 注意 :strokeEnd的值一定要比strokeStart的大
- 范围 :(0~1)
处理方法:shapeLayer.strokeStart = valueOne < valueTwo ? valueOne : valueTwo; shapeLayer.strokeStart = valueOne > valueTwo ? valueOne : valueTwo;
属性:
- lineWidth 线条的宽度
- strokeColor 线条的颜色
- 值:CGColor
4、用CAShapeLayer实现圆形进度条效果,以及更复杂综合起来的动画效果
圆形进度条动画.gif
源码下载地址:CircleProgress 中的 CircleProgress源码
直接更改path的结果,并没有理想中的渐变过程,所以需要使用核心动画:
综合示例源码请看:https://github.com/HeYang123456789/UIView
如果fillColors不设置成 [UIColor clearColor].CGColor就会有这样的效果:
转载请注明原址:http://www.cnblogs.com/goodboy-heyang/p/5185575.html 尊重劳动成果。
转载于:https://www.cnblogs.com/goodboy-heyang/p/5185575.html
iOS之UI--CAShapeLayer相关推荐
- iOS开发UI篇—transframe属性(形变)
iOS开发UI篇-transframe属性(形变) 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两 ...
- iOS开发UI篇—多控制器和导航控制器简单介绍
iOS开发UI篇-多控制器和导航控制器简单介绍 一.多控制器 一个iOS的app很少只由一个控制器组成,除非这个app极其简单.当app中有多个控制器的时候,我们就需要对这些控制器进行管理 有多个vi ...
- iOS开发UI篇—UIWindow简单介绍
iOS开发UI篇-UIWindow简单介绍 一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWi ...
- iOS开发UI篇—简单介绍静态单元格的使用
iOS开发UI篇-简单介绍静态单元格的使用 一.实现效果与说明 说明:观察上面的展示效果,可以发现整个界面是由一个tableview来展示的,上面的数据都是固定的,且几乎不会改变. 要完成上面的效果, ...
- iOS开发UI篇—实现UITableview控件数据刷新
iOS开发UI篇-实现UITableview控件数据刷新 一.项目文件结构和plist文件 二.实现效果 1.说明:这是一个英雄展示界面,点击选中行,可以修改改行英雄的名称(完成数据刷新的操作). 运 ...
- iOS开发UI篇—UITabBarController简单介绍
iOS开发UI篇-UITabBarController简单介绍 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarControlle ...
- iOS开发UI篇—懒加载
iOS开发UI篇-懒加载 1.懒加载基本 懒加载--也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了, ...
- iOS开发UI篇—UITableviewcell的性能优化和缓存机制
iOS开发UI篇-UITableviewcell的性能问题 一.UITableviewcell的一些介绍 UITableView的每一行都是一个UITableViewCell,通过dataSource ...
- iOS开发UI篇—CALayer简介
iOS开发UI篇-CALayer简介 一.简单介绍 在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView. 其实UI ...
- iOS开发UI篇—Date Picker和UITool Bar控件简单介绍
iOS开发UI篇-Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何 ...
最新文章
- 免费正则表达式辅助工具(转)
- 我的技术家园,吸取精神食粮的天堂
- 使用MyEclipse构建MAVEN项目 - 我的漫漫程序之旅 - BlogJava
- Bootstrap3 排版-改变大小写
- MySQL设置从库只读模式
- hide show vue 动画_jQuery动画效果
- 用WebService实现调用新浪的天气预报功能
- 这次,让算法走下神坛!
- PAT 1069. 微博转发抽奖(20)-乙级
- 计算机组成原理(第3版)唐朔飞著 知识点总结
- 三相并网逆变器PI控制——离网模式
- 【手写源码-设计模式7】-桥接模式-基于苹果小米手机刷机场景
- 第6堂视频课:看到词句就会读-下
- web前端入坑系列回归,再推荐一波学习资源
- 【Vue知识点】路由router详解
- win7系统怎样添加wifi连接到服务器,win7如何连接无线wifi设置详细教程
- OpenGL PowerVR SDK 编译:Could NOT find X11 (missing: X11_X11_INCLUDE_PATH X11_X11_LIB)
- C++中的back_inserter
- 360安全安卫士自带的卸载程序的文件在哪里
- 一牛网:最新6月手机综合性能评测
热门文章
- FISCO BCOS log日志设置配置
- 微信小程序云开发教程-WXSS入门-样式的使用
- String.valueOf()方法的使用总结
- 【spring】spring动态代理和Spring_AOP
- Quartz 触发器、过期触发策略 、排它日历、数据持久化
- 阶段1 语言基础+高级_1-3-Java语言高级_08-JDK8新特性_第4节 方法引用_2_方法引用_通过对象名引用成员方法...
- Laravel5.x 封装的上传图片类
- thread/threading——Python多线程入门笔记
- 用简单直白的方式讲解A星寻路算法原理
- 基础才是王道——TCP/IP详解学习笔记