使用SVProgressHUD时加入自定义Gif图片

最新推荐文章于 2026-05-12 15:28:21 发布

原创最新推荐文章于 2026-05-12 15:28:21 发布 · 6.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#iOS #图片 #Gif #指示器 #加载效果

本文探讨如何在iOS开发中使用SVProgressHUD显示自定义Gif图片。通过分析SVProgressHUD源码，发现其默认旋转效果并非Gif，但提供了传入UIImage的方法。介绍两种实现方式，一是通过方法，二是利用属性接口。通过将Gif转换为帧动画图片数组，创建可动的UIImage对象，成功在SVProgressHUD中展示Gif。最后展示了实现效果。

在 iOS 开发中说到指示器用的最多的便是 MBP 和 SVP 了，针对于这两个第三方我个人还是比较偏向后者。比较 MBP 而言 SVP的作者封装的更加完美一些，接口的设计和使用也更为简单，但是在使用时还是有些场景无法满足，这篇文章我只是想谈谈对于把自定义的 GIF 图片与 SVProgressHUD 结合使用的个人想法。首先我们先看看下面的一段代码：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 我们通过 SVProgressHUD 提供的类方法 + (void)show; 可以实现最简单的加载指示效果
    [SVProgressHUD show];
    
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    // 移除指示器
    [SVProgressHUD dismiss];
}

效果图如下 :

那这个不断旋转的圆圈效果是 SVProgressHUD 自带的Gif图片吗？通过多 SVP 中的资源包的查看得知，这个会动的圆圈并不是Gif图片，而是画出来的。但是 SVP 是否给我们提供可以传入 UIImage 对象的方法或是属性接口呢？我们再来看看下面的代码和效果:

方案一：通过方法实现

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 我们让程序已启动 就显示指示器
    // 设置显示最小时间 以便观察效果
    [SVProgressHUD setMinimumDismissTimeInterval:MAXFLOAT];
    
    // 果然 我们发现了一个可以传入图片和文字的方法
    [SVProgressHUD showImage:[UIImage imageNamed:@"testImage@2x.gif"] status:@"努力加载中"];
    
}

方案一：通过属性实现

- (void)viewDidLoad {
    [super viewDidLoad];

    // 设置显示最小时间 以便观察效果
    [SVProgressHUD setMinimumDismissTimeInterval:MAXFLOAT];
    
    // 设置属性 @property (strong, nonatomic) UIImage *infoImage 
    [SVProgressHUD setInfoImage:[UIImage imageNamed:@"testImage@2x.gif"]];
    [SVProgressHUD showInfoWithStatus:@"努力加载中"];
    
}

但是效果却不是我们想要的，我们发现原本是 Gif 可以转动的图片不能动了... 效果如下 :

其实 Gif 图片能动的本质是帧动画，我们在利用软件制作 Gif 图片的时候中间有一个步骤是 : 比如将一个小视频分割成N张图片，然后按照每张图片设置好的帧时长来进行连贯播放，优化后就形成了我们所熟知的 Gif 图片了。那么我们在 iOS 开发过程中能否将原有的 Gif 图片转换为N张静态图片的数组，再由 UIImage 提供的帧动画方法生成可以动的 UIImage对象。根据这个想法，我写了下面的一个分类 :

UIImage+GIF.h

#import <UIKit/UIKit.h>
typedef void (^GIFimageBlock)(UIImage *GIFImage);

@interface UIImage (GIF)

/** 根据本地GIF图片名 获得GIF image对象 */
+ (UIImage *)imageWithGIFNamed:(NSString *)name;

/** 根据一个GIF图片的data数据 获得GIF image对象 */
+ (UIImage *)imageWithGIFData:(NSData *)data;

/** 根据一个GIF图片的URL 获得GIF image对象 */
+ (void)imageWithGIFUrl:(NSString *)url and:(GIFimageBlock)gifImageBlock;

@end

UIImage+GIF.m

#import "UIImage+GIF.h"
#import <ImageIO/ImageIO.h>


@implementation UIImage (GIF)

+ (UIImage *)imageWithGIFData:(NSData *)data
{
    if (!data) return nil;
    
    CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);
    
    size_t count = CGImageSourceGetCount(source);
    
    UIImage *animatedImage;
    
    if (count <= 1) {
        animatedImage = [[UIImage alloc] initWithData:data];
    } else {
        
        NSMutableArray *images = [NSMutableArray array];
        NSTimeInterval duration = 0.0f;
        
        for (size_t i = 0; i < count; i++) {
            
            // 拿出了Gif的每一帧图片
            CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);
            
            //Learning... 设置动画时长 算出每一帧显示的时长（帧时长）
            NSTimeInterval frameDuration = [UIImage sd_frameDurationAtIndex:i source:source];
            duration += frameDuration;
            
            // 将每帧图片添加到数组中
            [images addObject:[UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp]];
            
            // 释放真图片对象
            CFRelease(image);
        }
        
        // 设置动画时长
        if (!duration) {
            duration = (1.0f / 10.0f) * count;
        }

        animatedImage = [UIImage animatedImageWithImages:images duration:duration];
    }
    
    // 释放源Gif图片
    CFRelease(source);
    
    return animatedImage;
}

+ (UIImage *)imageWithGIFNamed:(NSString *)name
{
    NSUInteger scale = (NSUInteger)[UIScreen mainScreen].scale;
    return [self GIFName:name scale:scale];
}

+ (UIImage *)GIFName:(NSString *)name scale:(NSUInteger)scale
{
    
   NSString *imagePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"%@@%zdx", name, scale] ofType:@"gif"];
    
    if (!imagePath) {
        
        (scale + 1 > 3) ? (scale -= 1) : (scale += 1);
        imagePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"%@@%zdx", name, scale] ofType:@"gif"];
    }
    
    if (imagePath) {
        
        // 传入图片名(不包含@Nx)
        NSData *imageData = [NSData dataWithContentsOfFile:imagePath];
        return [UIImage imageWithGIFData:imageData];
        
    } else {
    
        imagePath = [[NSBundle mainBundle] pathForResource:name ofType:@"gif"];
        if (imagePath) {
            
            // 传入的图片名已包含@Nx or 传入图片只有一张 不分@Nx
            NSData *imageData = [NSData dataWithContentsOfFile:imagePath];
            return [UIImage imageWithGIFData:imageData];
        } else {
            
            // 不是一张GIF图片(后缀不是gif)
            return [UIImage imageNamed:name];
        }
    }
}

+ (void)imageWithGIFUrl:(NSString *)url and:(GIFimageBlock)gifImageBlock
{
    NSURL *GIFUrl = [NSURL URLWithString:url];
    
    if (!GIFUrl) return;
    
    dispatch_async(dispatch_get_global_queue(0, 0), ^{
        
        NSData *CIFData = [NSData dataWithContentsOfURL:GIFUrl];
        
        // 刷新UI在主线程
        dispatch_async(dispatch_get_main_queue(), ^{
            
            gifImageBlock([UIImage imageWithGIFData:CIFData]);
        });
    });
    
}

#pragma mark - <关于GIF图片帧时长(Learning...)>

+ (float)sd_frameDurationAtIndex:(NSUInteger)index source:(CGImageSourceRef)source {
    
    float frameDuration = 0.1f;
    CFDictionaryRef cfFrameProperties = CGImageSourceCopyPropertiesAtIndex(source, index, nil);
    NSDictionary *frameProperties = (__bridge NSDictionary *)cfFrameProperties;
    NSDictionary *gifProperties = frameProperties[(NSString *)kCGImagePropertyGIFDictionary];
    
    NSNumber *delayTimeUnclampedProp = gifProperties[(NSString *)kCGImagePropertyGIFUnclampedDelayTime];
    if (delayTimeUnclampedProp) {
        frameDuration = [delayTimeUnclampedProp floatValue];
    }
    else {
        
        NSNumber *delayTimeProp = gifProperties[(NSString *)kCGImagePropertyGIFDelayTime];
        if (delayTimeProp) {
            frameDuration = [delayTimeProp floatValue];
        }
    }
    
    // Many annoying ads specify a 0 duration to make an image flash as quickly as possible.
    // We follow Firefox's behavior and use a duration of 100 ms for any frames that specify
    // a duration of <= 10 ms. See <rdar://problem/7689300> and <http://webkit.org/b/36082>
    // for more information.
    
    if (frameDuration < 0.011f) {
        frameDuration = 0.100f;
    }
    
    CFRelease(cfFrameProperties);
    return frameDuration;
}

那么引入这个分类，我们看看是否能达到预期的效果，代码 AND 效果图如下 :

- (void)viewDidLoad {
    [super viewDidLoad];

    // 设置显示最小时间 以便观察效果
    [SVProgressHUD setMinimumDismissTimeInterval:MAXFLOAT];
    // 设置背景颜色为透明色
    [SVProgressHUD setBackgroundColor:[UIColor clearColor]];
    
    // 利用SVP提供类方法设置 通过UIImage分类方法返回的动态UIImage对象
    [SVProgressHUD showImage:[UIImage imageWithGIFNamed:@"loading01"] status:@"正在加载中"];
    
}

效果图如下 :