当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS Gif图片展示N种方式(原生+第三方)

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

2019年07月24日  | 移动技术网移动技术  | 我要评论

本文分享了ios gif图片展示n种方式，供大家参考，具体内容如下

原生方法:

1.uiwebview
特点:加载速度略长,性能更优，播放的gif动态图更加流畅。

//动态展示gif图片-webview
-(void)showgifimagewithwebview{
 //读取gif图片数据
 nsdata *gifdata = [nsdata datawithcontentsoffile: [[nsbundle mainbundle] pathforresource:@"earthgif" oftype:@"gif"]];
 //uiwebview生成
 uiwebview *imagewebview = [[uiwebview alloc] initwithframe:cgrectmake(112, 302, 132, 102)];
 //用户不可交互
 imagewebview.userinteractionenabled = no;
 //加载gif数据
 [imagewebview loaddata:gifdata mimetype:@"image/gif" textencodingname:nil baseurl:nil];
 //视图添加此gif控件
 [self.view addsubview:imagewebview];
}

2.uiimagview
加载的方式更加快速,性能不如uiwebview,优点:易于扩展

1)
增加一个uiimageview的类别(category),增加两个方法
uiimage+tool
.h

#import <uikit/uikit.h>

@interface uiimageview (tool)

/** 解析gif文件数据的方法 block中会将解析的数据传递出来 */
-(void)getgifimagewithurk:(nsurl *)url returndata:(void(^)(nsarray<uiimage *> * imagearray,nsarray<nsnumber *>*timearray,cgfloat totaltime, nsarray<nsnumber *>* widths, nsarray<nsnumber *>* heights))datablock;

/** 为uiimageview添加一个设置gif图内容的方法： */
-(void)yh_setimage:(nsurl *)imageurl;

@end

.m

//
// uiimageview+tool.m
// onehelper
//
// created by qiuxuewei on 16/3/2.
// copyright © 2016年 邱学伟. all rights reserved.
//

#import "uiimageview+tool.h"
//要引入imageio库
#import <imageio/imageio.h>

@implementation uiimageview (tool)



//解析gif文件数据的方法 block中会将解析的数据传递出来
-(void)getgifimagewithurk:(nsurl *)url returndata:(void(^)(nsarray<uiimage *> * imagearray, nsarray<nsnumber *>*timearray,cgfloat totaltime, nsarray<nsnumber *>* widths,nsarray<nsnumber *>* heights))datablock{
 //通过文件的url来将gif文件读取为图片数据引用
 cgimagesourceref source = cgimagesourcecreatewithurl((cfurlref)url, null);
 //获取gif文件中图片的个数
 size_t count = cgimagesourcegetcount(source);
 //定义一个变量记录gif播放一轮的时间
 float alltime=0;
 //存放所有图片
 nsmutablearray * imagearray = [[nsmutablearray alloc]init];
 //存放每一帧播放的时间
 nsmutablearray * timearray = [[nsmutablearray alloc]init];
 //存放每张图片的宽度 （一般在一个gif文件中，所有图片尺寸都会一样）
 nsmutablearray * widtharray = [[nsmutablearray alloc]init];
 //存放每张图片的高度
 nsmutablearray * heightarray = [[nsmutablearray alloc]init];
 //遍历
 for (size_t i=0; i<count; i++) {
  cgimageref image = cgimagesourcecreateimageatindex(source, i, null);
  [imagearray addobject:(__bridge uiimage *)(image)];
  cgimagerelease(image);
  //获取图片信息
  nsdictionary * info = (__bridge nsdictionary*)cgimagesourcecopypropertiesatindex(source, i, null);
  cgfloat width = [[info objectforkey:(__bridge nsstring *)kcgimagepropertypixelwidth] floatvalue];
  cgfloat height = [[info objectforkey:(__bridge nsstring *)kcgimagepropertypixelheight] floatvalue];
  [widtharray addobject:[nsnumber numberwithfloat:width]];
  [heightarray addobject:[nsnumber numberwithfloat:height]];
  nsdictionary * timedic = [info objectforkey:(__bridge nsstring *)kcgimagepropertygifdictionary];
  cgfloat time = [[timedic objectforkey:(__bridge nsstring *)kcgimagepropertygifdelaytime]floatvalue];
  alltime+=time;
  [timearray addobject:[nsnumber numberwithfloat:time]];
 }
 datablock(imagearray,timearray,alltime,widtharray,heightarray);
}

//为uiimageview添加一个设置gif图内容的方法：
-(void)yh_setimage:(nsurl *)imageurl{
 __weak id __self = self;
 [self getgifimagewithurk:imageurl returndata:^(nsarray<uiimage *> *imagearray, nsarray<nsnumber *> *timearray, cgfloat totaltime, nsarray<nsnumber *> *widths, nsarray<nsnumber *> *heights) {
  //添加帧动画
  cakeyframeanimation *animation = [cakeyframeanimation animationwithkeypath:@"contents"];
  nsmutablearray * times = [[nsmutablearray alloc]init];
  float currenttime = 0;
  //设置每一帧的时间占比
  for (int i=0; i<imagearray.count; i++) {
   [times addobject:[nsnumber numberwithfloat:currenttime/totaltime]];
   currenttime+=[timearray[i] floatvalue];
  }
  [animation setkeytimes:times];
  [animation setvalues:imagearray];
  [animation settimingfunction:[camediatimingfunction functionwithname:kcamediatimingfunctionlinear]];
  //设置循环
  animation.repeatcount= maxfloat;
  //设置播放总时长
  animation.duration = totaltime;
  //layer层添加
  [[(uiimageview *)__self layer]addanimation:animation forkey:@"gifanimation"];
 }];
}

@end

在加载gif的地方使用
导入 uiimageview+tool

-(void)showgifimagewithimageview{

 uiimageview * imageview = [[uiimageview alloc]initwithframe:cgrectmake(112, 342, 132, 102)];
 nsurl * url = [[nsurl alloc]initfileurlwithpath:[[nsbundle mainbundle] pathforresource:@"earthgif.gif" oftype:nil]];
 [imageview yh_setimage:url];
 [self.view addsubview:imageview];

}

第三方:
1.ylgifimage
github链接: https://github.com/liyong03/ylgifimage

#import "ylgifimage.h"
#import "ylimageview.h"

-(void)showgifimagewithylimageview{
 ylimageview* imageview = [[ylimageview alloc] initwithframe:cgrectmake(112, 342, 132, 102)];
 cgfloat centerx = self.view.center.x;
 [imageview setcenter:cgpointmake(centerx, 402)];
 [self.view addsubview:imageview];
 imageview.image = [ylgifimage imagenamed:@"earthgif.gif"];
}

2.flanimatedimage
github链接:https://github.com/flipboard/flanimatedimage

-(void)showgifimagewithflanimatedimage{
 //gif 转 nsdata
 //gif 路径
 nsstring *pathforfile = [[nsbundle mainbundle] pathforresource: @"earthgif" oftype:@"gif"];
 //转成nsdata
 nsdata *dataofgif = [nsdata datawithcontentsoffile: pathforfile];
 //初始化flanimatedimage对象
 flanimatedimage *image = [flanimatedimage animatedimagewithgifdata:dataofgif];
 //初始化flanimatedimageview对象
 flanimatedimageview *imageview = [[flanimatedimageview alloc] init];
 //设置gif图片
 imageview.animatedimage = image;
 imageview.frame = cgrectmake(112, 342, 132, 102);
 [self.view addsubview:imageview];
}

以上就是本文的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网