欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-11-27 19:47:34
本文分享了ios gif图片展示n种方式,供大家参考,具体内容如下 原生方法: 1.uiwebview 特点:加载速度略长,性能更优,播放的gif动态图更加流畅。...

本文分享了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];
}

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