网络加载效果

网络加载效果_第1张图片
未命名.gif

这种加载效果很好实现,基本原理就是在一个View上面花两个layer 第一个就是背景的那个圈,第二个就是那个红色旋转.然后添加到控制器上定时旋转就出现了这个效果 如下图

网络加载效果_第2张图片
未命名1.gif

代码非常简单如下
两个类 .h 文件中都没有任何操作 就不拷贝了
1 : 自定义View

//
//  loadView.m
//  加载(1)
//
//  Created by 李国峰 on 16/7/9.
//  Copyright © 2016年 李国峰. All rights reserved.
//

#import "loadView.h"

@implementation loadView

- (void)drawRect:(CGRect)rect {
    
    
    CGFloat rabius1 = rect.size.width/2;
    CGFloat starAgle1 = 0;
    CGFloat endAngle1 = 2*M_PI;
    CGPoint point1 = CGPointMake(rect.size.width/2,rect.size.width/2);
    UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:point1 radius:rabius1 startAngle:starAgle1 endAngle:endAngle1 clockwise:YES];
    
    CAShapeLayer *layer1 = [[CAShapeLayer alloc]init];
    layer1.path = path1.CGPath;
    layer1.fillColor = [UIColor clearColor].CGColor;
    layer1.strokeColor = [UIColor grayColor].CGColor;
    layer1.lineWidth = 5.0;
    [self.layer addSublayer:layer1];
    
    
    CGFloat rabius = rect.size.width/2 ;
    CGFloat starAngle = 2*M_PI *0.8;
    CGPoint point = CGPointMake(rect.size.width/2, rect.size.width/2);
    NSLog(@"%f----%f",rect.size.height/2,rect.size.width/2);
    CGFloat endAngle = 2*M_PI;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:point radius:rabius startAngle:starAngle endAngle:endAngle clockwise:YES];
    CAShapeLayer *layer = [[CAShapeLayer alloc]init];
    layer.path = path.CGPath;
    
    layer.strokeColor = [UIColor redColor].CGColor;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.lineWidth = 5.0;
    [self.layer addSublayer:layer];
}

-(void)layoutSubviews{
    [super layoutSubviews];
    self.backgroundColor = [UIColor clearColor];
}

@end

2 : 控制器

//
//  ViewController.m
//  加载(1)
//
//  Created by 李国峰 on 16/7/8.
//  Copyright © 2016年 李国峰. All rights reserved.
//

#import "ViewController.h"
#import "LogView.h"


@interface ViewController ()
@property (nonatomic,weak)LogView *vc;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
}
- (IBAction)log:(id)sender {
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(tranformView) userInfo:nil repeats:YES];
    CGFloat scWidth = [UIScreen mainScreen].bounds.size.width;
    CGFloat scHeight = [ UIScreen mainScreen].bounds.size.height;
    
    
    
    LogView *vc = [[LogView alloc]initWithFrame:CGRectMake(scWidth / 2 - 25, scHeight / 2 -25, 50, 50)];
    self.vc = vc;
    
    UIView *view1 = [[UIView alloc]initWithFrame:self.view.bounds];
    view1.backgroundColor = [UIColor blackColor];
    view1.alpha = 0.5;
    
    [view1 addSubview:vc];
    [self.view addSubview:view1];
    
    // 这里 没有什么实际用处  就是延迟操作  模拟网络延迟
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [timer invalidate];
        
        [vc removeFromSuperview];
        
        UIView *view = [[UIView alloc]initWithFrame:CGRectMake(scWidth / 2 - 100, scHeight / 2 -25, 200, 100)];
        
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, view.frame.size.width, view.frame.size.height)];
        
        label.text = @"登录成功";
        
        label.textColor = [UIColor whiteColor];
        
        label.textAlignment = NSTextAlignmentCenter;
        
        [view addSubview:label];
        
        view.backgroundColor = [UIColor blackColor];
        
        [view1 addSubview:view];
        
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            
            [view1 removeFromSuperview];
            
        });
    });
}

- (void)tranformView{
    
    self.vc.transform = CGAffineTransformRotate(self.vc.transform, 0.11);
}




- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

@end

============= 我是分割线 2016/7/26 =============

刚刚做了封装 现在 三行代码就可以搞定

#import "GFAddLoadView.h"   // 导入头文件

GFAddLoadView *add = [[GFAddLoadView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];  // 设置位置及大小

/**
 *  设置加载图片的具体信息
 *
 *  @param float  定时源 旋转速度,时间越小越快 建议  0.0x
 *
 *  @alpha 透明度
 *
 *  @color 设置旋转的颜色
 *
 *  @lineWidth 设置宽度
 */

[add timer:0.02 alpha:1 color:[UIColor greenColor] lineWidth:5];    // 修改相关属性

[self.view addSubview:add];   //添加到视图上

技术有待发展 希望能够跟更多大神多多交流
[demo]

下面是我的笔记共享,涵盖很多基础知识,希望大家多多关注[笔记]

你可能感兴趣的:(网络加载效果)