iOS 实现加载转圈效果
生活随笔
收集整理的這篇文章主要介紹了
iOS 实现加载转圈效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、思路:
新建一個view,添加shape,給予一個動畫實現。
?
2、效果圖:
效果1:
?
效果2:
?
?
gif有點卡,代碼運行不會這樣。
?
3、源碼(整個類放進來的)
效果1源碼:
// // YJDownloadingCircle.swift // k12_sl_iOS // // Created by liyajun on 2017/7/13. // // import UIKitclass YJDownloadingCircle: UIView {var loadingLayer:CAShapeLayer! = niloverride 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.0loadingLayer.strokeEnd = 0.75let basicAni = CABasicAnimation(keyPath: "transform.rotation.z")basicAni.fromValue = 0.0basicAni.toValue = M_PI*2basicAni.duration = 0.5basicAni.repeatCount = MAXFLOATbasicAni.autoreverses = falsebasicAni.fillMode = kCAFillModeForwardsself.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 = rectcircleLayer.position = CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2)circleLayer.fillColor = UIColor.clear.cgColorcircleLayer.lineWidth = 1circleLayer.strokeColor = UIColor.colorWithHex(hex: "FF3B30").cgColorlet bezier = UIBezierPath(ovalIn: rect)circleLayer.path = bezier.cgPathself.layer.addSublayer(circleLayer)return circleLayer} } View Code使用方法
//定義屬性var circle:YJDownloadingCircle! = nil override func viewDidLoad() {super.viewDidLoad()view.backgroundColor = UIColor.whitecircle = 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 UIKitclass LoginLoadingView: UIView {var bgShape:CAShapeLayer! = nilvar runShape:CAShapeLayer! = nilvar lblShape:CAShapeLayer! = nillet 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.cgColorbgShape.strokeColor = UIColor.colorWithHex("4CD964").withAlphaComponent(0.5).cgColorbgShape.lineWidth = lineWidthbgShape.lineJoin = kCALineJoinRoundbgShape.lineDashPattern = [NSNumber(value: 4),NSNumber(value:4)]bgShape.path = bgPathself.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.cgColorrunShape.strokeColor = UIColor.colorWithHex("4CD964").cgColorrunShape.lineWidth = lineWidthrunShape.lineJoin = kCALineJoinRoundrunShape.path = runPath.cgPathrunShape.position = CGPoint(x: self.width/2, y: self.width/2)self.layer.addSublayer(runShape)let anima = CABasicAnimation(keyPath: "transform.rotation.z")anima.fromValue = 0anima.toValue = M_PI*2anima.repeatCount = MAXFLOATanima.duration = 2.0anima.isRemovedOnCompletion = falserunShape.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.cgColorlblShape.strokeColor = UIColor.colorWithHex("4CD964").cgColorlblShape.lineWidth = lineWidthlblShape.lineJoin = kCALineJoinRoundlblShape.path = gouPath.cgPathself.layer.addSublayer(lblShape)}} View Code使用時,直接init出來就是了
?
以上的效果都是只有一個類文件(UIView),使用時直接拷貝即可。
其中,關于轉圈的前景色、背景色等參數,我沒抽出來,大家如果有這需求,可以改一下。
?
代碼是Swift實現加載轉圈效果。
如果是OC,參考代碼思路即可。
?
?
enjoy~
?
轉載于:https://www.cnblogs.com/yajunLi/p/7159607.html
總結
以上是生活随笔為你收集整理的iOS 实现加载转圈效果的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【C#日期系列(一)】--C#获取某月第
- 下一篇: 软件开发项目进度控制浅谈