原文链接: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. jQuery(十):CSS-DOM操作

    除了css()以外,还有获取和设置元素高度.宽度.相对位置等的样式操作方法,语法如下: 高度和宽度示例: <!DOCTYPE html> <html lang="en&qu ...

  2. 微信小程序——页面中调用组件方法

    我现在有一个弹层的组件(popup),组件里面定义了显示组件(showPopup)和隐藏组件(hidePopup)的方法. 我们如何在调用组件的页面中调用组件里面的方法呢? 在调用组件的页面写如下代码 ...

  3. 安卓程序代写 网上程序代写[原]BluetoothAdapter解析

    这篇文章将会详细解析BluetoothAdapter的详细api, 包括隐藏方法, 每个常量含义. 一 BluetoothAdapter简介 1.继承关系 该类仅继承了Object类; 2.该类作用 ...

  4. JSP之静态include指令、动态Include指令

    (一)使用静态include指令 <%@ page language="java" contentType="text/html; charset=gb2312&q ...

  5. thinkphp中memcache的用法实例

    本文实例讲述了thinkphp中memcache的用法.分享给大家供大家参考.具体分析如下: 1.下载并安装memcache ① window下安装memcache. 下载memcached.exe ...

  6. Self20171218_Assert断言使用

     一.Assert用法: assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制.在实现中,assertion就是在程序中的一条语句,它对一个boolean表达式进行 ...

  7. TP Rate ,FP Rate, Precision, Recall, F-Measure, ROC Area,

    TP Rate ,FP Rate, Precision, Recall, F-Measure, ROC Area, https://www.zhihu.com/question/30643044 T/ ...

  8. SAP Process Integration - High Level ERP/Integration Process --- Cargill Process Concept Design

    Customer Industry: Commercial off-the-shelf (COTS) application ,, Food Ingredients or Agricultural S ...

  9. 第三百四十节,Python分布式爬虫打造搜索引擎Scrapy精讲—css选择器

    第三百四十节,Python分布式爬虫打造搜索引擎Scrapy精讲—css选择器 css选择器 1. 2. 3.  ::attr()获取元素属性,css选择器 ::text获取标签文本 举例: extr ...

  10. Java数组填充和初始化

    Java中,如何填充(一次初始化)数组? 示例 此示例使用Java Util类的Array.fill(arrayname,value)方法和Array.fill(arrayname,starting ...