原文链接:http://my.oschina.net/u/2340880/blog/608560

摘要
iOS中没有现成的接口来展示gif动态图,但可以通过其他的方式来处理gif图的展示。
iOS中播放gif动态图的方式探讨

一、引言

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

二、为原生的UIImageView添加类别来支持gif动态图的播放

gif动态图文件中包含了一组图片及其信息,信息主要记录着每一帧图片播放的时间,我们如果获取到了gif文件中所有的图片同时又获取到每一帧图片播放的时间,就可以为UIImageView添加核心动画的方法来让其播放gif的内容了。

首先解析gif文件中的数据,代码如下:

//要引入ImageIO库
#import <ImageIO/ImageIO.h>

//解析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"];
        }];
}
使用代码示例如下:

UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0,0 , 320, 200)];
    NSURL * url = [[NSURL alloc]initFileURLWithPath:[[NSBundle mainBundle] pathForResource:imageName ofType:nil]];
    [imageView yh_setImage:url];
    [self.view addSubview:imageView];

三、使用UIWebView来加载gif动态图数据

iOS中的UIWebView功能十分强大,可以通过UIWebView为载体,来展示gif图。并且这种方法也十分简单,代码如下:

//读取gif数据
         NSData *gifData = [NSData dataWithContentsOfURL:imageUrl];
        UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
        //取消回弹效果
        webView.scrollView.bounces=NO;
        webView.backgroundColor = [UIColor clearColor];
        //设置缩放模式
        webView.scalesPageToFit = YES;
        //用webView加载数据
        [webView loadData:gifData MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
四、两种加载gif动态图方式的优劣

经过测试,从加载速度上来说,通过UIImageView类别加载的方式更加快速,UIWebView的方式加载时间会稍长,但是从性能上来比较,WebView的方式性能更优,播放的gif动态图更加流畅。在开发中,可以根据需求,适当选择,例如虽然WebView加载的方式性能更好,但是在许多情况下,原生的UIImageView能够更加自由的让开发者进行扩展。

iOS 播放gif动态图的方式探讨的更多相关文章

  1. iOS 播放GIF动态图片!!!!!

    ////////////////////////////////////////////////////////////////////////////////////////// ////  Vie ...

  2. iOS制作gif动态图

    NSMutableArray * array = [NSMutableArray array]; for (int i = 1; i < 6; i++) { NSString * string ...

  3. iOS保存gif动态图

    - (void)saveImageToPhotos:(NSData*)gifData { /***注意先倒入库 #import <AssetsLibrary/AssetsLibrary.h> ...

  4. iOS 中使用.9图

    背景 .9图来源于Android.为了设计出一套图,兼容Android和iOS,使用.9图的方式来对图片进行拉伸以适应不同的屏幕.在iOS中没有.9图的概念,只能先了解Android的.9图再进行模拟 ...

  5. iOS播放gif图方式

    转发:http://www.cnblogs.com/jerehedu/ 图片分为静态和动态两种,图片的格式有很多种,在开发中比较常见的是.png和.jpg的静态图片,但有的时候在App中需要播放动态图 ...

  6. iOS播放动态GIF图片

    <转> 图片分为静态和动态两种,图片的格式有很多种,在开发中比较常见的是.png和.jpg的静态图片,但有的时候在App中需要播放动态图片,比如.gif格式的小表情头像,在IOS中并没有提 ...

  7. IOS 播放动态Gif图片

    图片分为静态和动态两种,图片的格式有很多种,在开发中比较常见的是.png和.jpg的静态图片,但有的时候在App中需要播放动态图片,比如.gif格式的小表情头像,在IOS中并没有提供直接显示动态图片的 ...

  8. C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  9. iOS开发中在UIWebView中添加Gif动态图

    开发是一件很有趣的事,偶尔在程序中添加一些小东西,会给你的应用增色不少.比如,当你的某些功能暂时还不准备上线时,可以先一个放展示Gif动态图的UIWebView上去,既可以告诉用户APP以后会有的功能 ...

随机推荐

  1. 关于Unity中的光照(五)

    Mobile Diffuse Unity自带的一种shader,用的比较多,性能还可以.我们默认创建的unit shader基本和它一致,但是没有参与光照计算,看起来和Mobile Diffuse有区 ...

  2. 关于Unity中的3D拾取

    3D拾取 3D游戏实际上看到的是2D画面,我们在屏幕上点击,想要找到哪个3D物体,我们实际上是在一个2维平面内做3D拾取. 3D拾取实际上是,当玩家点击屏幕的时候,会从显示屏幕的摄像头发射一条射线,射 ...

  3. 2、TestNG+Maven+IDEA环境搭建

    前言: 主要进行TestNG测试环境的搭建 所需环境: 1.IDEA UItimate 2.JDK 3.Maven 一.创建工程 File –>new –>Project–>next ...

  4. javaweb-Excel导入导出后台代码

    前言: 导入导出后台java代码写好很久了,但是...但是...前台不会写啊. 先把后台代码帖上吧 1.excelToDb package util; /** * 代码解释:此方法将传入一个URL,即 ...

  5. redis实现区间查询

    ###redis实现区间查询 在实际开发中经常遇到这样需求:服务端对于客户端不同的版本区间会做些不同的配置,那么客户端一个版本过来怎么快速的定位是属于哪个版本区间呢?可以利用`Sorted Sets` ...

  6. e785. 监听JList中项的变动

    When the set of items in a list component is changed, a list data event is fired. // Create a list t ...

  7. svn -- 数据备份,版本回退,版本冲突,多仓库配置

    数据备份 差异存储法: 版本回退 版本冲突 原理图: 解决办法: 三种方案: 1)合理分配项目开发模块 wangcai:文章,邮件,会员 xiaoqiang:静态化,缓存,前台 2)合理分配项目开发时 ...

  8. Xianfeng轻量级Java中间件平台:权限管理

    权限管理:是通过系统对用户的行为进行控制的一套业务规则,可以做得很简单,比如通过硬编码的方式进行控制,也可以做得很复杂,比如通过一些复杂的权限模型去实现一些复杂的权限控制,比如菜单访问权限.按钮操作权 ...

  9. Cisco配置单臂路由及静态路由

    实验环境: 如图下图所示,PC0.PC1.PC2.PC3分别属于不同的VLAN,通过配置单臂路由及静态路由,实现不同VLAN之间的PC能相互访问. 操作步骤: 1. 思科 2960交换机SW1配置信息 ...

  10. UIStatusBarStyle PreferredStatusBarStyle does not work on iOS 7

    Q: In my iPhone application built with Xcode 5 for iOS 7 I set UIViewControllerBasedStatusBarAppeara ...