美文网首页iOS 知识收集iOS进阶之路
iOS-加载gif图片的几种方式

iOS-加载gif图片的几种方式

作者: 奋斗的蜗牛 | 来源:发表于2017-05-18 15:33 被阅读85次

    1. 原生方法:


    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];
    }
    
    1. UIImagView加载的方式更加快速,性能不如UIWebView,优点:易于扩展
      增加一个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

    @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];
    }
    

    2. 第三方:


    1. YLGIFImagegithub
    #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"];
    }
    
    1. FLAnimatedImagegithub
    -(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];
    }
    

    相关文章

      网友评论

        本文标题:iOS-加载gif图片的几种方式

        本文链接:https://www.haomeiwen.com/subject/otpsxxtx.html