iOS加载gif方案及性能对比

先看结论, 测试设备: iPhone 6s,iOS12.1, 

SDImage的CPU利用率很低, 但是内存占用最高,应该是把gif中所有的图片都缓存了,可以直接使用UIImageView加载,不用改代码;

WKWebView比较好, 但是做起来比较复杂,而且H5对图片的填充模式支持比较麻烦;

YYImage的CPU利用率很低,内存也是极地的, 完美的方案;

FLAnimatedImageView比较卡, cpu在30%;

UIWebView只是凑数的,cpu在9%-30%之间成锯齿状波动, 现在上架如果还是用UIWebView会被拒绝.

 

方案1: 使用FLAnimatedImage加载,需要引入FLAnimatedImageView框架

#pragma mark FLAnimatedImage加载image
- (void)testGifImage {

    NSString * path = [[NSBundle mainBundle] pathForResource:@"直播间测试gif" ofType:@"gif"];
    NSData * data = [NSData dataWithContentsOfFile:path];

    // cpu 30%左右, 内存17M
    FLAnimatedImage * image = [[FLAnimatedImage alloc] initWithAnimatedGIFData:data];
    FLAnimatedImageView *imageView = [[FLAnimatedImageView alloc] initWithFrame:self.view.bounds];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    imageView.animatedImage = image;
    [self.view addSubview:imageView];
    //    设置FLAnimatedImageView中的CADisplayLink效果不明显
    //        self.displayLink.preferredFramesPerSecond = 1;
    // 设置小于5帧的情况下CPU下降明显,但是卡顿也明显
    //        self.displayLink.preferredFramesPerSecond = 15; // 60,30,20,15帧CPU下降不明显,

}

方案2: 使用UIWebView加载,凑个数, 在提审就会被拒绝

#pragma mark UIWebView加载image
- (void)testGifImage2 {
    NSString * path = [[NSBundle mainBundle] pathForResource:@"直播间测试gif" ofType:@"gif"];
    NSData * data = [NSData dataWithContentsOfFile:path];

    // 使用UIWebView播放, CPU在9%, 30%两个值进行锯齿状波动, 内存占用较大40M,UIWebView已无法提交审核了
    UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    webView.userInteractionEnabled = NO;//用户不可交互
    [webView loadData:data MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
    [self.view addSubview:webView];

}

方案3: 使用WKWebView加载,性能很好,但是改动起来比较麻烦,得熟悉H5,或者web端的人帮忙


#pragma mark WKWebView加载image
- (void)testGifImage3 {

    // 系统解决方案, CPU占用极地1%-2%, 内存占用极地,15M
    CGFloat heightView = [UIApplication sharedApplication].statusBarFrame.size.height;
    CGFloat bottomHeightView = 0;
    if (@available(iOS 11.0, *)) {
        bottomHeightView = [[UIApplication sharedApplication] delegate].window.safeAreaInsets.bottom;
    }
    // webView顶部会莫名多出来一个一个状态栏的高度
    WKWebView * wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, -heightView, kScreenWidth, kScreenHeight+heightView+bottomHeightView)];

    NSString *path = [[NSBundle bundleForClass:[self class]] pathForResource:@"loadGif" ofType:@"html"];
    NSString *htmlStr = [[NSString alloc] initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

    wkWebView.UIDelegate = self;
    wkWebView.navigationDelegate = self;
    // 禁止上下滚动
    wkWebView.scrollView.scrollEnabled = NO;
    // 禁止双指放大缩小
    wkWebView.scrollView.userInteractionEnabled = NO;
    wkWebView.scrollView.bouncesZoom = YES;
    [wkWebView loadHTMLString:htmlStr baseURL:nil];
    [self.view addSubview:wkWebView];

}

// 贴上自己半吊子水平的前端代码,这个就是本地HTML里的东西
<html style="height: 100%;"><head>

<meta name="viewport" content="width=device-width, minimum-scale=0.1">
	<style type="text/css" abt="234">
		img{
   		 width: 100%;
   		 height:100%;
		}
	</style>
</head>
<body style="margin: 0px; background: #0e0e0e; height: 100%">
	<img src="http://res.hongrenshuo.com.cn/66532a15-c726-4edf-bb4f-0b8897753f31.gif?t=1606124887942"></body>
</html>

方案4: 使用YYImage加载,性能很好,YYAnimatedImageView的父类就是UIImageView, 需要稍稍改下代码

#pragma mark YYImage加载
- (void)testGifImage4 {
    NSString * path = [[NSBundle mainBundle] pathForResource:@"直播间测试gif" ofType:@"gif"];
    NSData * data = [NSData dataWithContentsOfFile:path];

    YYAnimatedImageView *image = [[YYAnimatedImageView alloc] initWithFrame:self.view.frame];
    image.image = [YYImage imageWithData:data];
//    image.image = [YYImage imageNamed:@"直播间测试gif.gif"];
    [self.view addSubview:image];

}

方案5: 使用SDImage加载,性能很好,但是内存最高,SD内部最终调到了方案6[UIImage animatedImageWithImages:]的方法

#pragma mark SD加载image
- (void)testGifImage5 {
    NSString * path = [[NSBundle mainBundle] pathForResource:@"直播间测试gif" ofType:@"gif"];
    NSData * data = [NSData dataWithContentsOfFile:path];

    UIImage *image = [UIImage sd_imageWithGIFData:data];
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.frame];
    imageView.image = image;
    [self.view addSubview:imageView];

}

方案6: 使用[UIImage animatedImageWithImages]加载,性能很好,但是下载太费流量

#pragma mark UIImage加载image
- (void)testGifImage6 {

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.frame];
    [self.view addSubview:imageView];

    // 只能处理单个图片,而且单图1.2M,整个下载下来需要1.2*50=60M, 而生成的gif才2.1M
    // 所以这种写法也就看看就行了
    // CPU:0%, 内存:60M
    NSMutableArray *array = [NSMutableArray array];
    for (int i = 1; i<=50; i++) {
        NSString *imageName = [NSString stringWithFormat:@"直播间测试gif-%@.tiff",@(i)];
        UIImage *image = [UIImage imageNamed:imageName];
        [array addObject:image];
    }
    // 方式1
//    imageView.animationImages = array;
//    imageView.animationDuration = 3;
//    [imageView startAnimating];

    // 方式2
    imageView.image = [UIImage animatedImageWithImages:array duration:3];
    NSLog(@"UIImage animatedImageWithImages动画加载");

}

 

测试demo地址: https://github.com/guochaoshun/testGif

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: iOS 富文本可以通过使用 NSAttributedString 和 NSTextAttachment 类加载 GIF 图片,达到将富文本与动态效果结合的效果。 首先,需要将 GIF 图片转换为 NSData 格式,可通过使用 NSData 的类方法 dataWithContentsOfFile 或者 dataWithContentsOfURL 来实现。 接着,创建 NSTextAttachment 实例,并以 NSData 格式将 GIF 图片作为参数传入。然后,创建 NSMutableAttributedString 实例,并将富文本内容包含在其中。 最后,使用 UILabel、UITextView 或者 UIWebView 等组件来展示富文本内容,并加以控制动态效果的播放周期及重复次数等属性,达到更丰富的用户体验。 需要注意的是,在使用富文本加载 GIF 图片时,应考虑对应用性能及网络耗费等问题进行优化调整,使得应用流畅稳定,并能够节省用户移动数据流量等资源。 ### 回答2: iOS开发中,要加载gif动图作为富文本,可以使用如下的步骤: 1. 引入SDWebImage库:在项目中添加SDWebImage库,这是一个常用的图片加载库,可以方便地加载并显示网络上的图片。 2. 下载gif图片:从网络上找到合适的gif图片,并将其下载到本地。 3. 将gif图片添加到富文本中:使用SDWebImage提供的方法将gif图片添加到富文本中,可以使用`UIImage sd_animatedGIFWithData:`方法将本地的gif图片转换为UIImage对象,并使用该UIImage对象创建一个`NSTextAttachment`对象。 4. 将NSTextAttachment对象添加到NSAttributedString中:将创建好的NSTextAttachment对象添加到NSMutableAttributedString对象中,可以使用`appendAttributedString:`方法将其追加到NSMutableAttributedString对象的末尾。 5. 将NSAttributedString对象显示在界面上:通过UILabel、UITextView等界面控件,将NSMutableAttributedString对象显示在界面上,即可完成富文本加载gif的功能。 需要注意的是,为了保证gif动图的流畅播放,SDWebImage库会将gif图片展示为一系列的静态图片,然后再按照正确的帧率进行播放。另外,对于高性能gif加载,也可以使用其他优化库,如FLAnimatedImage等。 综上所述,通过引入SDWebImage库、下载gif图片、将图片添加到富文本中,并将富文本显示在界面上等一系列步骤,即可实现在iOS加载gif动图作为富文本显示的功能。 ### 回答3: 在iOS中,要加载GIF图像并将其显示在富文本中,我们可以采取以下步骤: 1. 首先,我们需要获取GIF图像文件的URL或路径。可以从互联网上下载或从应用程序的资源文件中获取。例如,如果GIF图像保存在应用程序的资源文件中,则可以使用`Bundle.main.url(forResource: "myGif", withExtension: "gif")`方法获取该文件的URL。 2. 接下来,我们需要将GIF图像文件加载到`Data`对象中,以便将其与`NSAttributedString`富文本一起使用。我们可以使用`Data(contentsOf: gifURL)`方法将URL转换为Data对象。 3. 然后,我们可以创建一个`NSTextAttachment`对象,并将GIF图像数据设置为其`image`属性。例如,可以使用`NSTextAttachment(image: UIImage(data: gifData)!)`来创建`NSTextAttachment`对象。 4. 然后,我们可以使用`NSAttributedString`的`append`方法将`NSTextAttachment`对象添加到富文本中,并设置其适当的位置。例如,可以使用`attributedString.append(NSAttributedString(attachment: textAttachment))`语句将`NSTextAttachment`对象添加到`attributedString`富文本字符串中。 5. 最后,我们可以将包含GIF图像的富文本字符串应用于文本视图或标签等UI元素,以便在界面上显示GIF图像。例如,对于UILabel,可以使用`label.attributedText = attributedString`将富文本字符串应用于标签。 综上所述,以上是利用iOS富文本加载GIF的简要步骤。通过将GIF图像文件加载到`Data`对象中,然后将其作为`NSTextAttachment`对象添加到富文本字符串中,我们可以在富文本中显示GIF图像,并将其应用于iOS界面中的相应UI元素。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值