Swift:使用CAShapeLayer打造一个ProgresssBar
ProgressBar是一个很小却在很多地方都会用到的东西。也许是网络连接,也许APP本身有很多东西需要加载的。默认的只有一个旋转的菊花,对于打造一款个性的APP这显然是不够的。这里就使用CAShapeLayer打造一个个性的ProgressBar。这里只是抛砖引玉,你可以在这个基础上开发更适合你的。
CAShapeLayer是iOS开发中一个很强的东西,你可以用他开发出各种形状,还可以在上面加动画。所以,CAShapeLayer简直就是创建ProgressBar的完美选择。
这个ProgressBar是什么样的
我们要创建的ProgressBar首先具备某种形状,然后这个形状一直在做动画。一直到APP的网络请求或者信息加载完成之后,隐藏。这个形状可以是一条水平的线,就像是Safari加载网页时候的那样,或者是一个圆圈。总之,你可以用CAShapeLayer创建你需要的形状,然后在上面加动画。
而且加动画这一步也非常的简单。只需要创建一个CABasicAnimation,并运行这个动画就可以。
比如:
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = CGFloat(0.0)
animation.toValue = CGFloat(1.0)
animation.duration = 1.0
animation.delegate = self
animation.removedOnCompletion = false
animation.additive = true
animation.fillMode = kCAFillModeForwards
// progressLayer.addAnimation(animation, forKey: "strokeEnd")
如果,你在ProgressBar体现加载的进度的话,你可以通过给CAShapeLayer的strokeEnd属性赋值来首先。因为layers有两个非常重要的属性:一个是strokeStart,一个是strokeEnd。这两个属性是用来定义画线从哪里开始到哪里结束。这两个属性的值的范围在0到1,所以为了正确显示进度。你需要计算好开始和结束的百分比。
开始写代码吧
如前所述,首先你需要一个CAShapeLayer来呈现ProgressBar的形状。
UIBezierPath(arcCenter: centerPoint, radius: CGRectGetWidth(bounds) / - 30.0, startAngle: startAngle, endAngle: endAngle, clockwise: true)
bounds是:
let bounds = CGRectMake(, , UIScreen.mainScreen().bounds.width - , UIScreen.mainScreen().bounds.height - )
首先,用UIBezierPath画一个圆,这个圆心就在于bounds给定的一个范围的中心。半径就是这个框的宽度减去30.0。
来看看全部的代码:
var progressLayer = CAShapeLayer()
progressLayer.frame = bounds
progressLayer.path = UIBezierPath(arcCenter: centerPoint, radius: CGRectGetWidth(bounds) / - 30.0, startAngle: startAngle, endAngle: endAngle, clockwise: true).CGPath
progressLayer.backgroundColor = UIColor.clearColor().CGColor
progressLayer.fillColor = UIColor.clearColor().CGColor
progressLayer.strokeColor = UIColor.lightGrayColor().CGColor
progressLayer.lineWidth = 4.0
progressLayer.strokeStart = 0.0
progressLayer.strokeEnd = 0.0
在给progressLayer设定路线的时候需要给定的时路线的CGPath。这里是一些底层的东西,暂时不涉及。但是需要记住。fillColor是指在layer的path包围的范围内填充什么样的颜色。其他的属性就比较好理解了。
这个时候把progressLayer添加到self.view.layer中,运行代码。你就会看到一个lightGrayColor的颜色的圈圈。
这个时候就需要我们添加动画了。
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = CGFloat(0.0)
animation.toValue = CGFloat(1.0)
animation.delegate = self
animation.duration = 1.0
animation.delegate = self
animation.removedOnCompletion = false
animation.additive = true
animation.fillMode = kCAFillModeForwards
progressLayer.addAnimation(animation, forKey: "strokeEnd")
再次运行,这个动画就出现了。
Swift:使用CAShapeLayer打造一个ProgresssBar的更多相关文章
- [.NET] 打造一个很简单的文档转换器 - 使用组件 Spire.Office
打造一个很简单的文档转换器 - 使用组件 Spire.Office [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6024827.html 序 之前,& ...
- [后端人员耍前端系列]AngularJs篇:使用AngularJs打造一个简易权限系统
一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多 ...
- Linux强化论:15步打造一个安全的Linux服务器
Linux强化论:15步打造一个安全的Linux服务器 Alpha_h4ck2016-11-30共28761人围观 ,发现 8 个不明物体专题系统安全 可能大多数人都觉得Linux是安全的吧?但我要告 ...
- 在sublimetext上打造一个兼容virtualenv的web&python开发环境
利用Sublimetext3&virtualenv 打造一个Web&Python IDE 注: 环境:window|python3;以下使用的sublimetext插件均用packag ...
- AngularJs打造一个简易权限系统
AngularJs打造一个简易权限系统 一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJ ...
- swift学习:第一个swift程序
原文:swift学习:第一个swift程序 最近swift有点火,赶紧跟上学习.于是,个人第一个swift程序诞生了... 新建项目
- RethinkDB创始人教你如何打造一个伟大的互联网产品
关于作者 我叫Slava Akhmechet,本人是 RethinkDB 的创始人之一,RethinkDB是开源,分布式数据库,旨在帮助开发人员与运营商在打造实时应用时处理无结构数据 如何打造一个伟大 ...
- [.NET] 一步步打造一个简单的 MVC 网站 - BooksStore(一)
一步步打造一个简单的 MVC 网站 - BooksStore(一) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore 简介 主 ...
- [.NET] 一步步打造一个简单的 MVC 电商网站 - BooksStore(二)
一步步打造一个简单的 MVC 电商网站 - BooksStore(二) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore 前: ...
随机推荐
- dig命令使用大全
https://www.cnblogs.com/daxian2012/archive/2013/01/10/2854126.html 译者序:可以这样说,翻译本篇文档的过程就是我重新学习DNS的过程, ...
- centos7上docker安装和使用教程
Docker 是一个创建和管理 Linux 容器的开源工具.容器就像是轻量级的虚拟机,并且可以以毫秒级的速度来启动或停止.Docker 帮助系统管理员和程序员在容器中开发应用程序,并且可以扩展到成千上 ...
- 【linux】mkdir -p命令
如果要创建目录A并创建目录A的子目录B,没有用-p的情况下是mkdir 2次 如果用-p 可以直接创建2个目录 (迭代创建).mkdir -p 目录A/子目录B就可以
- php的静态变量的实现
1.静态变量的结构 php脚本编译之后会生成执行opcode组成的opcode_array,执行每个zend_op_array都会生成一个单独的zend_execute_data结构. php的局部变 ...
- mysql 计算经纬度函数(米)
) CHARSET utf8mb4 begin return ROUND( * ASIN( SQRT( POW( SIN( ( lat1 ) ), ) ) ) * POW( SIN( ( lon1 ) ...
- Train-Alypay-Cloud:分布式微服务中间件sofa 开发培训(第二次)
ylbtech-Train-Alypay-Cloud:分布式微服务中间件sofa 开发培训(第二次) 1.返回顶部 1. 这是本次培训的内容,望各位提前配好环境.工具.2.6-2.7 我们在环球金融8 ...
- Oracle 性能调优之:使用 V$SQL_PLAN 视图查询内存中的执行计划
V$SQL_PLAN视图提供了一种方法,可用于检查仍位于库高速缓存的游标的执行计划.此视图中的信息与 PLAN_TABLE 视图中的信息非常类似.但是,EXPLAIN PLAN 显示的是执行相应语句时 ...
- yyblog2.0 数据库开发规范
一.基础规范 (1)必须使用InnoDB存储引擎 解读:支持事务.行级锁.并发性能更好.CPU及内存缓存页优化使得资源利用率更高 (2)表字符集默认使用utf8,必要时候使用utf8mb4 解读:1. ...
- PG自动化测试
安装软件包 yum groupinstall "Development Tools" yum install zlib-devel tcl-devel readline-devel ...
- 项目管理工具maven(二)
2 整合ssh框架 2.1 依赖传递 只添加了一个struts2-core依赖,发现项目中出现了很多jar, 这种情况 叫 依赖传递 2.2 依赖版本冲突的解决 1. 第一声明优先原则 <dep ...