Swift：使用CAShapeLayer打造一个ProgresssBar

时间：2022-12-13 18:57:14

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")

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

 

标签：

相关文章