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 实现加载转圈效果相关推荐
- ios 自定义加载动画效果
在开发过程中,可能会遇到各种不同的场景需要等待加载成功后才能显示数据.以下是自定义的一个动画加载view效果. 在UIViewController的中加载等到效果,如下 - (void)vi ...
- 精通Android自定义View(十九)自定义圆形炫彩加载转圈效果
1 效果 2 源码 public class JiondongView extends View {private Paint mBackgroundPaint;private float mScal ...
- 精通Android自定义View(十八)自定义圆形菊花加载转圈效果
1 效果: 2 源码: public class LoadingView extends View {public LoadingView(Context context) {this(context ...
- 精通Android自定义View(十七)自定义圆形鸟巢加载转圈效果
1 效果图 2 源码: public class LoadingView extends View {public LoadingView(Context context) {this(context ...
- android菊花动画,Android实现仿iOS菊花加载圈动画效果
常见的实现方式 切图,做旋转动画 自定义View,绘制效果 gif图 1.切图会增加体积,但相对简单,不过在换肤的场景下,会使用不同颜色,需要准备多张图,不够灵活. 2.由于自定义的好处,不同颜色只需 ...
- ios 旋转加载gif_加载GIF动画方法 iOS
方法一 使用UIWebView _codeStr为gif网址 如果是本地的gif可以直接使用dataWithContentsOfFile方法 NSData *data = [NSData d ...
- iOS网络加载图片缓存策略之ASIDownloadCache缓存优化
iOS网络加载图片缓存策略之ASIDownloadCache缓存优化 在我们实际工程中,很多情况需要从网络上加载图片,然后将图片在imageview中显示出来,但每次都要从网络上请求,会严重影响用户体 ...
- 模仿滴滴单车解锁的时候,从0%到90%的欺骗加载动画效果
/**欺骗加载动画效果-*/var text = '已解锁{value}%';var interval;var __fakeLoading = function (callback, time, pe ...
- 真是好东西!一组动感的页面加载动画效果
如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站,你可能已经注意到在显示新内容之前动感的页面加载动画了.这种风格的动画效果最近非常流行,因此这篇文章想给 ...
最新文章
- linux 卸载 rtx,Ubuntu20.04系统卸载软件及清理系统垃圾缓存以及新力得
- C++ Primer 5th笔记(chap 15 OOP)继承之类型转换
- 域用户的登录过程和GC的关系
- KEY键盘映射_手焊键盘,使用Python编写,一键放连招,还有什么你不会
- 一个命令让redis服务端所有信息无所遁形~(收藏吃灰系列)
- HDU 3729【二分匹配】
- 大数据Hadoop详细介绍(v2016)
- (转帖)SpringBoot自定义Starter
- android实现第三方QQ登录
- [转]漫谈个人知识管理-PKM的方法
- idea怎么看jdk版本_怎么看自己的jdk版本
- photoshop注册机,这个必须留下来
- 【Flink】Specifying keys via field positions is only valid for tuple data types.
- java 使用zxing生成条形码(可自定义文字位置、边框样式)
- 系统自带的CMD教程
- 杰理之板子上调高低音 EQ,同时更新到杰理之家的处理方法【篇】
- 程序员们的爱情表白书
- FreeRTOS优化与错误排查方法
- Erlang项目编译及防止反编译
- OCR技术简介——人工智能爆发前的技术