基于第三方的MBProgressHUDExtend自定义加载动画

项目提出一个需求:等待加载数据时用动画效果显示。
图片会有两种情况, 第一种是设计师给你多张静态图,自己实现动画效果。第二种是设计师给了你一个GIF图。
当然给你一个GIF效果图更好实现,但是我们公司给的是多张静态图,下面我分别实现静态图动画和GIF动画。
如果给了多张静态的可以用UIImageView实现动画效果
效果这样的:
(原谅公司的设计不是科班出身,暂时这样看吧)

loading.gif

好了,知道效果是这样的,那么来看怎么实现。

静态图实现加载动画效果

1.创建Category文件继承自MBProgressHUD,如图:

image.png

2.在创建的文件.h中增加一个类方法,比如这样:


image.png

3.在创建的文件.m中实现,比如这样:

image.png

如何使用呢?
在请求数据的地方这样调用:

image.png

在请求完成或者请求失败的时候给隐藏掉,这样:

image.png

下面放下代码:
.h文件:

/** 自定义加载动画 手动消失:文字和动画 */
+(MBProgressHUD *)showText:(NSString *)textTip showGIFToView:(UIView *)view;

.m文件实现:

/** 自定义加载动画 手动消失:文字和动画(放到指定view中) */
+(MBProgressHUD *)showText:(NSString *)textTip showGIFToView:(UIView *)view {
    if (view == nil) {`
        view = [[UIApplication sharedApplication].windows firstObject];
    }
    // 如果之前有hud,先隐藏之前的hud
    [self hideHUDForView:view animated:NO];
   // 快速显示一个提示信息`
   MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:view animated:YES];
   // 设置模式
    hud.mode = MBProgressHUDModeCustomView;
    //使用gif图片
    NSMutableArray *imgArr = [NSMutableArray array];
    UIImage *img;
    for (int i = 1; i<11; i++) {
        img = [UIImage imageNamed:[NSString stringWithFormat:@"loading_00%d",i]];
        [imgArr addObject:img];
   }
    UIImageView *custImageV = [[UIImageView alloc] initWithImage:img];
    custImageV.animationImages = imgArr;
    custImageV.animationDuration = 0.5;
    custImageV.animationRepeatCount = 0;
    [custImageV startAnimating];
    hud.customView = custImageV;
    hud.detailsLabel.text = textTip;
    hud.detailsLabel.font = [UIFont systemFontOfSize:kTitleFontSize];
    hud.detailsLabel.textColor = [UIColor whiteColor];
    hud.minSize = CGSizeMake(90, 60);
    [hud.bezelView setStyle:MBProgressHUDBackgroundStyleSolidColor];
    [hud.bezelView setColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:0.8f]];
    // 隐藏时候从父控件中移除
    hud.removeFromSuperViewOnHide = YES;
    return hud;
}

GIF图实现加载动画效果

使用GIF只需要改动.m文件中的代码就行。另外需要注意的是使用了SDWebImage这个第三方库,在创建的.m文件中引入#import "UIImage+GIF.h"这个头文件,这样:

image.png

代码如下:

/** 自定义加载动画 手动消失:文字和动画(放到指定view中) */
+(MBProgressHUD *)showText:(NSString *)textTip showGIFToView:(UIView *)view {
    if (view == nil) {
        view = [[UIApplication sharedApplication].windows firstObject];
    }
    // 如果之前有hud,先隐藏之前的hud
    [self hideHUDForView:view animated:NO];
    // 快速显示一个提示信息
    MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:view animated:YES];
    // 设置模式
    hud.mode = MBProgressHUDModeCustomView;
    //使用SDW 实现gif图片
        UIImage *image = [UIImage sd_animatedGIFNamed:@"logoLoad"];
   //自定义UIImageView
        UIImageView *custImageV = [[UIImageView alloc] initWithImage:image];
    hud.customView = custImageV;
    hud.detailsLabel.text = textTip;
    hud.detailsLabel.font = [UIFont systemFontOfSize:kTitleFontSize];
    hud.detailsLabel.textColor = [UIColor whiteColor];
    hud.minSize = CGSizeMake(90, 60);
    [hud.bezelView setStyle:MBProgressHUDBackgroundStyleSolidColor];
    [hud.bezelView setColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:0.8f]];
    // 隐藏时候从父控件中移除
    hud.removeFromSuperViewOnHide = YES;
   return hud;
}

如有更好的方法可以一起讨论。互相学习。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,229评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,227评论 25 708
  • 进入社会后,慢慢的我们发现生活、工作,并没有学生时代那么简单。虽然,我们依旧可以维持一个单纯和美好的内心,但是,我...
    回音故事阅读 538评论 0 1
  • 前段时间为了准备结婚,特别在意自己的形象,毕竟作为新娘子都希望自己美美哒,然而因为长期办公室工作,养成了含胸驼背和...
    萌小喵的异想世界阅读 19,325评论 4 48
  • 当爱的人在身边的时候不知道珍惜,而当失去时 才知道她(他)对自己有多重要。所以当你爱的人在身边时要好好珍惜...
    糖果果呀阅读 180评论 0 0