swift CircleView.swift

Posted 2021-05-19

import UIKit

class CircleView: UIView {

    var circleLayer: CAShapeLayer!
    var backgroundLayer: CAShapeLayer!
    var indicater: UIView!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.clearColor()
        
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0), radius: (frame.size.width - 10)/2, startAngle: CGFloat(M_PI * -0.5), endAngle: CGFloat(M_PI * 1.5), clockwise: true)
        
        backgroundLayer = CAShapeLayer()
        backgroundLayer.path = circlePath.CGPath
        backgroundLayer.fillColor = UIColor.clearColor().CGColor
        backgroundLayer.strokeColor = UIColor.lightGrayColor().CGColor
        backgroundLayer.lineWidth = 5.0
        backgroundLayer.strokeEnd = 1.0
        layer.addSublayer(backgroundLayer)
        
        circleLayer = CAShapeLayer()
        circleLayer.path = circlePath.CGPath
        circleLayer.fillColor = UIColor.clearColor().CGColor
        circleLayer.strokeColor = UIColor.orangeColor().CGColor
        circleLayer.lineWidth = 5.0
        circleLayer.strokeEnd = 0.0
        layer.addSublayer(circleLayer)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func animateCircle(duration: NSTimeInterval) {
        // We want to animate the strokeEnd property of the circleLayer
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        
        // Set the animation duration appropriately
        animation.duration = duration
        
        // Animate from 0 (no circle) to 1 (full circle)
        animation.fromValue = 0
        animation.toValue = 0.75
        
        // Do a linear animation (i.e. the speed of the animation stays the same)
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        
        // Set the circleLayer's strokeEnd property to 1.0 now so that it's the
        // right value when the animation ends.
        circleLayer.strokeEnd = 0.75
        
        // Do the actual animation
        circleLayer.addAnimation(animation, forKey: "animateCircle")
        
        
        indicater = UIView(frame:CGRect(x: 0, y: 0, width: 20, height: 20))
        indicater.backgroundColor = UIColor.redColor()
        let boundingRect = CGRect(x: -150, y: -150, width: 300, height: 300)
        
        let orbit = CAKeyframeAnimation()
        orbit.keyPath = "position";
        orbit.path = CGPathCreateWithEllipseInRect(boundingRect, nil)
        orbit.duration = duration
        orbit.additive = true
        orbit.repeatCount = 1
        orbit.calculationMode = kCAAnimationPaced;
        orbit.rotationMode = kCAAnimationRotateAuto;
        
        indicater.layer.addAnimation(orbit, forKey: "orbit")
    }
}

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: 100,y: 100), radius: CGFloat(20), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
        
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = circlePath.CGPath
        
        //change the fill color
        shapeLayer.fillColor = UIColor.clearColor().CGColor
        //you can change the stroke color
        shapeLayer.strokeColor = UIColor.redColor().CGColor
        //you can change the line width
        shapeLayer.lineWidth = 3.0
        
        view.layer.addSublayer(shapeLayer)
        
        addCircleView()
    }

    func addCircleView() {
        let circleWidth = CGFloat(200)
        let circleHeight = circleWidth
        let circleView = CircleView(frame: CGRectMake(100, 300, circleWidth, circleHeight))
        
        view.addSubview(circleView)
        circleView.animateCircle(2.0)
    }
}