iOS之加载Gif图片的方法

Gif图片是非常常见的图片格式,尤其是在聊天的过程中,Gif表情使用地很频繁。但是iOS竟然没有现成的支持加载和播放Gif的类。

简单地汇总了一下,大概有以下几种方法:

一、加载本地Gif文件

1、使用UIWebView

  // 读取gif图片数据
  UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0,0,200,200)];
  [self.view addSubview:webView];

  NSString *path = [[NSBundle mainBundle] pathForResource:@"001" ofType:@"gif"];
  /*
     NSData *data = [NSData dataWithContentsOfFile:path];
     使用loadData:MIMEType:textEncodingName: 则有警告
     [webView loadData:data MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
   */
  NSURL *url = [NSURL URLWithString:path];
  [webView loadRequest:[NSURLRequest requestWithURL:url]];

但是使用UIWebView的弊端在于,不能设置Gif动画的播放时间。

2、将Gif拆分成多张图片,使用UIImageView播放

最好把所需要的Gif图片打包到Bundle文件内,如下图所示

- (NSArray *)animationImages
{
  NSFileManager *fielM = [NSFileManager defaultManager];
  NSString *path = [[NSBundle mainBundle] pathForResource:@"Loading" ofType:@"bundle"];
  NSArray *arrays = [fielM contentsOfDirectoryAtPath:path error:nil];

  NSMutableArray *imagesArr = [NSMutableArray array];
  for (NSString *name in arrays) {
    UIImage *image = [UIImage imageNamed:[(@"Loading.bundle") stringByAppendingPathComponent:name]];
    if (image) {
      [imagesArr addObject:image];
    }
  }
  return imagesArr;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:frame];
  gifImageView.animationImages = [self animationImages]; //获取Gif图片列表
  gifImageView.animationDuration = 5;   //执行一次完整动画所需的时长
  gifImageView.animationRepeatCount = 0; //动画重复次数
  [gifImageView startAnimating];
  [self.view addSubview:gifImageView];
}

3、使用SDWebImage

但是很遗憾,SDWebImage 的 sd_setImageWithURL:placeholderImage:这个方法是不能播放本地Gif的,它只能显示Gif的第一张图片而已。So,此方法行不通

  UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:frame];
  [gifImageView sd_setImageWithURL:nil placeholderImage:[UIImage imageNamed:@"gifTest.gif"]];

其实,在SDWebImage这个库里有一个UIImage+GIF的类别,里面为UIImage扩展了三个方法:

@interface UIImage (GIF)
+ (IImage *)sd_animatedGIFNamed:(NSString *)name;
+ (UIImage *)sd_animatedGIFWithData:(NSData *)data;
- (UIImage *)sd_animatedImageByScalingAndCroppingToSize:(CGSize)size;
@end

大家一看就知道,我们要获取处理后的Gif图片,其实只要调用前面两个中的其中一个方法就行了

注意:第一个只需要传Gif的名字,而不需要带扩展名(如Gif图片名字为001@2x.gif,只需传001即可)

我们就使用第二个方法试一试效果:

  NSString *path = [[NSBundle mainBundle] pathForResource:@"gifTest" ofType:@"gif"];
  NSData *data = [NSData dataWithContentsOfFile:path];
  UIImage *image = [UIImage sd_animatedGIFWithData:data];
  gifImageView.image = image;

然后通过断点,我们看下获取到的image是个什么样的东东:

我们发现:

image的isa指针指向了_UIAnimatedImage ,说明它是一个叫作_UIAnimatedImage 的类(当然,这个_UIAnimatedImage 苹果是不会直接让我们使用的)

_images 表示:这个Gif包含了多少张图片

_duration表示:执行一次完整动画所需的时长

其实,动画执续时间_duration也可以更改!

我们来看下此方法的内部实现:

+ (UIImage *)sd_animatedGIFWithData:(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++) {
      CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);

      duration += [self sd_frameDurationAtIndex:i source:source];

      [images addObject:[UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp]];

      CGImageRelease(image);
    }

    if (!duration) {
      duration = (1.0f / 10.0f) * count;
    }

    animatedImage = [UIImage animatedImageWithImages:images duration:duration];
  }

  CFRelease(source);

  return animatedImage;
}

很明显,duration是可以随意更改的,只不过此方法设置了一个默认值
(duration = (1.0f / 10.0f) * count)

归根到底,创建新的动态的Image其实是调用了系统提供的一个UIImage的类方法而已:

UIImage *animatedImage = [UIImage animatedImageWithImages:images duration:duration];

二、加载网络Gif文件

加载网络的Gif文件就简单多了。最简单的方法,我们只需要使用SDWebImage 的 sd_setImageWithURL:这个方法传入Gif文件是url地址即可。

纠其原因:稍微仔细看了SDWebImage内部实现就可以清楚,大概是以下几个步骤:

1、SDWebImage根据url将Gif文件下载下来,格式为一个NSData
2、如果判断是Gif格式,则会调用** sd_animatedGIFWithData:** 将Data转换成我们需要的Gif格式
3、通过上面的方法二即可显示出Gif图片

UIImage *image = [UIImage sd_animatedGIFWithData:data];
gifImageView.image = image;

总结

一、加载本地Gif文件

1、使用UIWebView不可以设置duration,其他两种方法都可设置。而且方法1的容器为UIWebView ,其余两种的容器都是大家熟悉的UIImageView

2、方法2和方法3需要对应看应用场景

如:下拉、上拉加载控件需要一个根据拉动距离设置特定的Image,则需要使用方法2

直接显示Gif图片,则使用方法3会更方便

二、加载网络Gif文件

直接使用SDWebImage 的 sd_setImageWithURL:这个方法传入Gif文件是url地址即可

PS:简单小Demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS Gif图片展示N种方式(原生+第三方)

    本文分享了iOS Gif图片展示N种方式,供大家参考,具体内容如下 原生方法: 1.UIWebView 特点:加载速度略长,性能更优,播放的gif动态图更加流畅. //动态展示GIF图片-WebView -(void)showGifImageWithWebView{ //读取gif图片数据 NSData *gifData = [NSData dataWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"earthGif"

  • 浅析IOS中播放gif动态图的方法

    一.引言 在iOS开发中,UIImageView类专门来负责图片数据的渲染,并且UIImageView也有帧动画的方法来播放一组图片,但是对于gif类型的数据,UIImageView中并没有现成的接口提供给开发者使用,在iOS中一般可以通过两种方式来播放gif动态图,一种方式是通过ImageIO框架中的方法将gif文件中的数据进行解析,再使用coreAnimation核心动画来播放gif动画,另一种方式计较简单,可以直接通过webView来渲染gif图. 二.为原生的UIImageView添加类

  • iOS开发中实现显示gif图片的方法

    我们知道Gif是由一阵阵画面组成的,而且每一帧画面播放的时常可能会不相等,观察上面两个例子,发现他们都没有对Gif中每一帧的显示时常做处理,这样的结果就是整个Gif中每一帧画面都是以固定的速度向前播放,很显然这并不总会符合需求.   于是自己写一个解析Gif的工具类,解决每一帧画面并遵循每一帧所对应的显示时间进行播放.   程序的思路如下:   1.首先使用ImageIO库中的CGImageSource家在Gif文件.   2.通过CGImageSource获取到Gif文件中的总的帧数,以及每一

  • iOS之加载Gif图片的方法

    Gif图片是非常常见的图片格式,尤其是在聊天的过程中,Gif表情使用地很频繁.但是iOS竟然没有现成的支持加载和播放Gif的类. 简单地汇总了一下,大概有以下几种方法: 一.加载本地Gif文件 1.使用UIWebView // 读取gif图片数据 UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0,0,200,200)]; [self.view addSubview:webView]; NSString *path

  • php绘图之加载外部图片的方法

    本文实例讲述了php绘图之加载外部图片的方法.分享给大家供大家参考.具体实现方法如下: 在实际应用中,就是常见的水印功能. 复制代码 代码如下: <?php //1.创建画布 $im = imagecreatetruecolor(300,200);//新建一个真彩色图像,默认背景是黑色,返回图像标识符.另外还有一个函数 imagecreate 已经不推荐使用. //2.加载外部图片 $im_new = imagecreatefromjpeg("baidu.jpg");//返回图像

  • Android开发实现webview中img标签加载本地图片的方法

    本文实例讲述了Android开发实现webview中img标签加载本地图片的方法.分享给大家供大家参考,具体如下: 在网上查了很多教程,感觉很麻烦,各种方法,最后实践很简单,主要是两步: WebSettings webSettings=webView.getSettings(); //允许webview对文件的操作 webSettings.setAllowUniversalAccessFromFileURLs(true); webSettings.setAllowFileAccess(true)

  • vue2.0 循环遍历加载不同图片的方法

    demo: <div v-for="item in temps" :key="item.id"> <div class="contract-item"> <img :src="item.imgUrl"> </div> </div> 引入图片,注意路径: import con1 from "@/assets/img/con01.png"; impor

  • Android 实现加载大图片的方法

    项目简介: 该项目为加载大图片 详细介绍: 对于超大的图片,如果不缩放的话,容易导致内存溢出.而经过处理后,无论多大的图片,都能够在手机屏幕上加载出来,不会导致内存溢出.当然,脸黑的除外 该应用涉及到的知识有: - 1.Bitmap的使用 - 2.Android手机中加载图片的原理 有的时候,我们加载一张不足1M的图片,尽管手机的堆内存有16M,仍然会导致内存溢出,why? 这就更计算机加载图片的原理有关了: 1).手机会解析图片的所有像素信息,把每个像素信息都存入到内存中 2).Android

  • IOS中UIWebView加载Loading的实现方法

    第一种方法:使用UIView and UIActivityIndicatorView 复制代码 代码如下: //创建UIWebView WebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 44, 320, 400)]; [WebView setUserInteractionEnabled:NO]; [WebView setBackgroundColor:[UIColor clearColor]]; [WebView setDelega

  • 前端图片懒加载(lazyload)的实现方法(提高用户体验)

    定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求. 实现 懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处

  • 深入研究jQuery图片懒加载 lazyload.js使用方法

    lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置. 跟bootstrap一样,lazyload.js也是依赖于jQuery <script src="resources/js/jquery-1.8.3.min.js"></script> <script src="resources/js/jquery.lazyload.min

  • JQ获取动态加载的图片大小的正确方法分享

    有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.jQuery load()事件处理的BUG, 当图片是从浏览器缓存取得时, 获取的是错误的尺寸.错误的代码是:(错误)在添加了HTML之后立即调用代码获取尺寸 复制代码 代码如下: var html = ''; $('#my_div').html(html); var width = $('#my_div img').width(); //

  • Android圆形头像拍照后“无法加载此图片”的问题解决方法(适配Android7.0)

    Feature: 点击选择拍照或者打开相册,选取图片进行裁剪最后设置为圆形头像. Problem: 拍好照片,点击裁剪,弹Toast"无法加载此图片". Solution: 在裁剪的class里加两行代码 intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION); intent.addFlags(Intent.FLAG_GRANT_WRITE_URI_PERMISSION); 主要代码如下: public static final S

随机推荐