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) / 2 - 30.0, startAngle: startAngle, endAngle: endAngle, clockwise: true)

bounds是:

let bounds = CGRectMake(10, 10, UIScreen.mainScreen().bounds.width - 20, UIScreen.mainScreen().bounds.height - 20)

首先,用UIBezierPath画一个圆,这个圆心就在于bounds给定的一个范围的中心。半径就是这个框的宽度减去30.0。

来看看全部的代码:

复制代码
        var progressLayer = CAShapeLayer()
        progressLayer.frame = bounds
        progressLayer.path = UIBezierPath(arcCenter: centerPoint, radius: CGRectGetWidth(bounds) / 2 - 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")
复制代码

再次运行,这个动画就出现了。

 

欢迎加群互相学习,共同进步。QQ群:iOS: 58099570 | Android: 572064792 | Nodejs:329118122 做人要厚道,转载请注明出处!















本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/sunshine-anycall/p/4218751.html ,如需转载请自行联系原作者

相关文章
|
4月前
|
安全 编译器 Swift
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
106 2
|
3月前
|
监控 API Swift
用Swift开发iOS平台上的上网行为管理监控软件
在当今数字化时代,随着智能手机的普及,人们对于网络的依赖日益增加。然而,对于一些特定场景,如家庭、学校或者企业,对于iOS设备上的网络行为进行管理和监控显得尤为重要。为了满足这一需求,我们可以利用Swift语言开发一款iOS平台上的上网行为管理监控软件。
213 2
|
4月前
|
监控 Swift iOS开发
局域网计算机监控软件中利用Swift构建iOS端的移动监控应用
在局域网计算机监控软件的开发中,构建iOS端的移动监控应用是一项关键任务。本文将介绍如何利用Swift语言实现这一目标,通过多个代码示例展示关键功能的实现。
225 1
|
4月前
|
安全 JavaScript 前端开发
IOS开发基础知识:介绍一下 Swift 和 Objective-C,它们之间有什么区别?
IOS开发基础知识:介绍一下 Swift 和 Objective-C,它们之间有什么区别?
72 0
|
6月前
|
JavaScript 前端开发 PHP
用swift开发ios移动端app应用初体验
直接跟着 apple 官方的 SwiftUI 教程跑的,写惯了 javascript 奔放的代码,很多语法理解起来还是有点费劲
59 1
|
8月前
|
Swift iOS开发
iOS OC混编Swift 后者无法走断点
iOS OC混编Swift 后者无法走断点
49 0
|
Swift iOS开发
IOS使用Swift加载Xib文件
IOS使用Swift加载Xib文件
270 0
|
Swift iOS开发
iOS开发 - 适合工程多环境切换(swift环境),适合经常打很多不同环境包的人
iOS开发 - 适合工程多环境切换(swift环境),适合经常打很多不同环境包的人
220 0
iOS开发 - 适合工程多环境切换(swift环境),适合经常打很多不同环境包的人
|
Swift 数据安全/隐私保护 iOS开发
iOS开发 - swift通过Alamofire实现https通信
iOS开发 - swift通过Alamofire实现https通信
351 0
iOS开发 - swift通过Alamofire实现https通信
|
Swift iOS开发 容器
iOS 仿支付宝银行卡界面(支持Swift/OC)
在有支付相关的APP中,都有对应的钱包,虽然现在的支付宝,微信支付很流行,但是都是需要绑定自己的银行卡,那么这个银行卡的卡包页面该怎么实现呢?在网上找了许久也没有找到合适的,那就索性自己造轮子。
328 0

相关课程

更多