iOS 实现加载转圈效果

1、思路：

新建一个view，添加shape，给予一个动画实现。

 

2、效果图：

效果1:

 

效果2:

 

 

gif有点卡，代码运行不会这样。

 

3、源码（整个类放进来的）

效果1源码：

//
//  YJDownloadingCircle.swift
//  k12_sl_iOS
//
//  Created by liyajun on 2017/7/13.
//
//

import UIKit

class YJDownloadingCircle: UIView {

    var loadingLayer:CAShapeLayer! = nil
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        initViews()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        initViews()
        
    }
    
    override func awakeFromNib() {
        initViews()
    }
    
    func initViews() {
        backgroundColor = UIColor.white
    }
    
    
    func drawHalfCircle() {
        loadingLayer = self.drawCircle()
        
        loadingLayer.strokeStart = 0.0
        loadingLayer.strokeEnd = 0.75
        
        let basicAni = CABasicAnimation(keyPath: "transform.rotation.z")
        basicAni.fromValue = 0.0
        basicAni.toValue = M_PI*2
        basicAni.duration = 0.5
        basicAni.repeatCount = MAXFLOAT
        basicAni.autoreverses = false
        basicAni.fillMode = kCAFillModeForwards
        self.layer.add(basicAni, forKey: nil)
        
    }
    
    private func drawCircle() -> CAShapeLayer {
        
        let circleLayer = CAShapeLayer()
        let rect = CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height)
        circleLayer.frame = rect
        circleLayer.position = CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2)
        circleLayer.fillColor = UIColor.clear.cgColor
        circleLayer.lineWidth = 1
        circleLayer.strokeColor = UIColor.colorWithHex(hex: "FF3B30").cgColor
        let bezier = UIBezierPath(ovalIn: rect)
        circleLayer.path = bezier.cgPath
        self.layer.addSublayer(circleLayer)
        
        return circleLayer
        
    }
}

使用方法

 //定义属性
 var circle:YJDownloadingCircle! = nil

   override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white

        circle = YJDownloadingCircle(frame: CGRect(x: 100, y: 100, width: 36, height: 36))
        circle.drawHalfCircle()
        self.view.addSubview(circle)
        
     }

 

效果2源码：

//
//  LoginLoadingView.swift
//  k12_sl_iOS
//
//  Created by liyajun on 2018/5/30.
//

import UIKit

class LoginLoadingView: UIView {
    
    var bgShape:CAShapeLayer! = nil
    var runShape:CAShapeLayer! = nil
    var lblShape:CAShapeLayer! = nil
    
    let startAngle:CGFloat = 0;
    let endAngle:CGFloat = CGFloat(0.67 * M_PI);
    let lineWidth:CGFloat = 5;
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setup()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }
    
    func setup() {
        bgShape = CAShapeLayer()
        let bgPath = CGMutablePath()
        bgPath.addEllipse(in: CGRect(x: 0, y: 0, width: self.width, height: self.height))
        bgShape.fillColor = UIColor.clear.cgColor
        bgShape.strokeColor = UIColor.colorWithHex("4CD964").withAlphaComponent(0.5).cgColor
        bgShape.lineWidth = lineWidth
        bgShape.lineJoin = kCALineJoinRound
        bgShape.lineDashPattern = [NSNumber(value: 4),NSNumber(value:4)]
        bgShape.path = bgPath
        self.layer.addSublayer(bgShape)
        
        
        runShape = CAShapeLayer()
        let runPath = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: self.width/2, startAngle: startAngle, endAngle: endAngle, clockwise: false)
        runShape.fillColor = UIColor.clear.cgColor
        runShape.strokeColor = UIColor.colorWithHex("4CD964").cgColor
        runShape.lineWidth = lineWidth
        runShape.lineJoin = kCALineJoinRound
        runShape.path = runPath.cgPath
        runShape.position = CGPoint(x: self.width/2, y: self.width/2)
        self.layer.addSublayer(runShape)
        
        let anima = CABasicAnimation(keyPath: "transform.rotation.z")
        anima.fromValue = 0
        anima.toValue = M_PI*2
        anima.repeatCount = MAXFLOAT
        anima.duration = 2.0
        anima.isRemovedOnCompletion = false
        runShape.add(anima, forKey: "rotationAnnimation")
        
        lblShape = CAShapeLayer()
        let gouPath = UIBezierPath()
        gouPath.move(to: CGPoint(x: self.width/2-10, y: self.width/2-1))
        gouPath.addLine(to: CGPoint(x: self.width/2, y: self.width/2+10))
        gouPath.addLine(to: CGPoint(x: self.width/2+15, y: self.width/2-10))
        lblShape.fillColor = UIColor.clear.cgColor
        lblShape.strokeColor = UIColor.colorWithHex("4CD964").cgColor
        lblShape.lineWidth = lineWidth
        lblShape.lineJoin = kCALineJoinRound
        lblShape.path = gouPath.cgPath
        self.layer.addSublayer(lblShape)
    }
 

    
    
}

使用时，直接init出来就是了

 

以上的效果都是只有一个类文件（UIView），使用时直接拷贝即可。

其中，关于转圈的前景色、背景色等参数，我没抽出来，大家如果有这需求，可以改一下。

 

代码是Swift实现加载转圈效果。

如果是OC，参考代码思路即可。

 

 

enjoy～