网络加载效果

作者: 记住你姓李 | 来源:发表于2016-07-09 10:50 被阅读164次
未命名.gif

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

未命名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];   //添加到视图上

技术有待发展 希望能够跟更多大神多多交流
<a href = "https://github.com/LGFModel/loadVIew#loadview">[demo]

下面是我的笔记共享,涵盖很多基础知识,希望大家多多关注<a href = "https:https://note.wiz.cn/pages/manage/biz/applyInvited.html?code=j84jy0">[笔记]

相关文章

  • 网络加载效果

    这种加载效果很好实现,基本原理就是在一个View上面花两个layer 第一个就是背景的那个圈,第二个就是那个红色...

  • flutter 图片

    加载网络图片网络图片 加载本地图片效果 实现图片圆角的几种方式 CircleAvatarCircleAvatar ...

  • Android网络请求失败的加载页面

    今天我们来研究网络加载中设计的加载界面 效果图: 我们先实现实现加载页面,这里我们继承FrameLayout ,主...

  • 最简单的状态切换布局

    功能简介 正在加载数据 数据加载失败 数据加载为空 网络加载失败 重试点击事件 支持自定义布局 效果图展示 最简单...

  • 2018-07-10 自定义网络加载动画

    58同城网络加载动画效果动画链接: //upload-images.jianshu.io/upload_image...

  • Android中实现RecyclerView的多布局效果

    效果图展示效果图.png 这个是RecyclerView的多布局效果。用的是轮播图和加载网络数据做的效果,下面是代...

  • TensorFlow(10)卷积神经网络CNN

    加载数据 定义参数 创建网络 定义框架 拟合数据,优化参数 输出结果 效果不错

  • 图片缓存 和占位图片

    加载网络图片可以说是网络应用中必备的。如果单纯的去下载图片,而不去做多线程、缓存等技术去优化,加载图片时的效果与用...

  • 鸿蒙中如何显示网络图片

    效果图 代码 使用第三方开源库Glide加载网络图片 完整代码: build.gradle中添加依赖 完整加载图片...

  • Vue组件loading加载效果实现

    摘要 对于页面加载,网络请求等待,为了增强用户体验,往往会出现一个loading加载效果,相对减少用的焦虑感,那怎...

网友评论

  • wg689:笔记链接不存在
    记住你姓李:@haojingxue_iOS https://note.wiz.cn/pages/manage/biz/applyInvited.html?code=j84jy0 这个试试看 我之前好像不小心修改了 现在好了

本文标题:网络加载效果

本文链接:https://www.haomeiwen.com/subject/dybrjttx.html