Swift: Build a Progresssbar with Cashapelayer

ProgressBar is a very small thing that will be used in many places. Perhaps the Internet connection, perhaps the app itself has a lot of things to load. The default is only one rotating chrysanthemum, which is obviously not enough for creating a personalized app. Use Cashapelayer to create a personality ProgressBar. Here is just a point, you can develop on this basis more suitable for you.

Cashapelayer is a very strong thing in iOS development, you can use it to make a variety of shapes, you can also add animation. So, Cashapelayer is simply the perfect choice for creating ProgressBar.

What's this progressbar like?

The ProgressBar we're going to create first has some shape, and the shape is animated all the time. Until the app's network request or information is loaded, hide. This shape can be a horizontal line, as if Safari were loading a webpage, or a circle. In short, you can create the shape you want with cashapelayer and animate it.

And animation is a very simple step. Just create a cabasicanimation and run the animation on it.

Like what:

   let animation = CABasicAnimation(keyPath:
   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")

If, in ProgressBar, you embody the progress of the load, you can assign values to Cashapelayer's Strokeend property first. Because layers has two very important properties: one is Strokestart and the other is strokeend. These two properties are used to define where the draw line begins and ends. The values of these two properties range from 0 to 1, so the progress is displayed correctly. You need to calculate the percentage of start and end.

Start writing code.

As mentioned earlier, first you need a cashapelayer to present the ProgressBar shape.

UIBezierPath(arcCenter: centerPoint, radius: CGRectGetWidth(bounds) / 2 - 30.0, startAngle: startAngle, endAngle: endAngle, clockwise: true)

Bounds is:

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

First, draw a circle with Uibezierpath , which is centered on a given range of bounds. The radius is the width of this box minus 30.0.

Take a look at all the code:

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

The cgpath of a given time line is required when setting a route for Progresslayer. Here are some of the underlying things that are not involved for the time being. But you need to remember. FillColor refers to what color is filled in the range bounded by the layer's path. The other attributes are better understood.

This time add Progresslayer to Self.view.layer and run the code. You will see a circle of lightgraycolor colors.

This time we need to add animation.

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

Run again, this animation will appear.

Swift: Build a Progresssbar with Cashapelayer