iOS gif图显示问题

问题

有时候需要显示gif动态图，让界面更加的绚丽，但是iOS默认只支持png,gpg图片。那么如何才能显示gif图呢？

解决方式

1. 添加框架

   CoreGraphics.framework

   ImageIO.framework

2. 引入SCGIFImageView类

SCGIFImageView.h

    #import <UIKit/UIKit.h>

    @interface SCGIFImageFrame : NSObject {

    }
    @property (nonatomic) double duration;
    @property (nonatomic, retain) UIImage* image;

    @end

    @interface SCGIFImageView : UIImageView {
        NSInteger _currentImageIndex;
    }
    @property (nonatomic, retain) NSArray* imageFrameArray;
    @property (nonatomic, retain) NSTimer* timer;
    @property (nonatomic, assign) NSInteger sumCount;

    //Setting this value to pause or continue animation;
    @property (nonatomic) BOOL animating;

    - (void)setData:(NSData*)imageData;
    @end

SCGIFImageView.m

    #import "SCGIFImageView.h"
    #import <ImageIO/ImageIO.h>

    @implementation SCGIFImageFrame
    @synthesize image = _image;
    @synthesize duration = _duration;

    @end

    @interface SCGIFImageView ()

    - (void)resetTimer;

    - (void)showNextImage;

    @end

    @implementation SCGIFImageView
    @synthesize imageFrameArray = _imageFrameArray;
    @synthesize timer = _timer;
    @synthesize animating = _animating;

    - (void)resetTimer {
        if (_timer && _timer.isValid) {
            [_timer invalidate];
        }

        self.timer = nil;
    }

    - (void)setData:(NSData *)imageData {
        if (!imageData) {
            return;
        }
        [self resetTimer];
        CGImageSourceRef source = CGImageSourceCreateWithData((CFDataRef)imageData, NULL);
size_t count = CGImageSourceGetCount(source);

        NSMutableArray* tmpArray = [NSMutableArray array];

        for (size_t i = 0; i < count; i++) {
            SCGIFImageFrame* gifImage = [[SCGIFImageFrame alloc] init];

            CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);
            gifImage.image = [UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp];

            NSDictionary* frameProperties = CFBridgingRelease(CGImageSourceCopyPropertiesAtIndex(source, i, NULL));
            gifImage.duration = [[[frameProperties objectForKey:(NSString*)kCGImagePropertyGIFDictionary] objectForKey:(NSString*)kCGImagePropertyGIFDelayTime] doubleValue];
            gifImage.duration = MAX(gifImage.duration, 0.01);

            [tmpArray addObject:gifImage];

            CGImageRelease(image);
        }
        CFRelease(source);

        self.imageFrameArray = nil;
        if (tmpArray.count > 1) {
            self.imageFrameArray = tmpArray;
            _currentImageIndex = -1;
            _animating = YES;
            [self showNextImage];
        } else {
            self.image = [UIImage imageWithData:imageData];
        }
    }

    - (void)setImage:(UIImage *)image {
        [super setImage:image];
        [self resetTimer];
        self.imageFrameArray = nil;
        _animating = NO;
    }

    - (void)showNextImage {
        if (_sumCount > 0) {
            _animating = _sumCount - 1 == _currentImageIndex ? NO : YES;
        }
        if (!_animating) {
            return;
        }
        _currentImageIndex = (++_currentImageIndex) % _imageFrameArray.count;
        SCGIFImageFrame* gifImage = [_imageFrameArray objectAtIndex:_currentImageIndex];
        [super setImage:[gifImage image]];
        self.timer = [NSTimer scheduledTimerWithTimeInterval:gifImage.duration target:self          selector:@selector(showNextImage) userInfo:nil repeats:NO];
    }

    - (void)setAnimating:(BOOL)animating {
        if (_imageFrameArray.count < 2) {
            _animating = animating;
            return;
        }

        if (!_animating && animating) {
            //continue
            _animating = animating;
            if (!_timer) {
                [self showNextImage];
            }
        } else if (_animating && !animating) {
            //stop
            _animating = animating;
            [self resetTimer];
        }
    }

    @end

1. 添加gif图片

   在Images.xcassets中添加需要的gif动态图。

2. 使用方式

   • 引入头文件SCGIFImageView.h

   • 在需要的添加的地方添加以下代码

        NSString* filePath = [[NSBundle mainBundle] pathForResource:@"6plus_hover.gif" ofType:nil];
        NSData* imageData = [NSData dataWithContentsOfFile:filePath];
     
       SCGIFImageView* gifImageView = [[SCGIFImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 320)];
       [gifImageView setData:imageData];
       [gifImageView setSumCount:gifImageView.imageFrameArray.count];//设置只循环一次，不设置无限循环
       [self.view addSubview:gifImageView];
     

h1, h2, h3, h4, h5, h6, p, blockquote { margin: 0; padding: 0 }
body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif; font-size: 13px; line-height: 18px; color: rgba(115, 115, 115, 1); background-color: rgba(255, 255, 255, 1); margin: 10px 13px }
table { margin: 10px 0 15px; border-collapse: collapse }
td, th { border: 1px solid rgba(221, 221, 221, 1); padding: 3px 10px }
th { padding: 5px 10px }
a { color: rgba(0, 105, 214, 1) }
a:hover { color: rgba(0, 80, 163, 1); text-decoration: none }
a img { border: none }
p { margin-bottom: 9px }
h1, h2, h3, h4, h5, h6 { color: rgba(64, 64, 64, 1); line-height: 36px }
h1 { margin-bottom: 18px; font-size: 30px }
h2 { font-size: 24px }
h3 { font-size: 18px }
h4 { font-size: 16px }
h5 { font-size: 14px }
h6 { font-size: 13px }
hr { margin: 0 0 19px; border-top: 0; border-right: 0; border-bottom: 1px solid rgba(204, 204, 204, 1); border-left: 0 }
blockquote { padding: 13px 13px 21px 15px; margin-bottom: 18px; font-family: georgia, serif; font-style: italic }
blockquote:before { content: "“"; font-size: 40px; margin-left: -10px; font-family: georgia, serif; color: rgba(238, 238, 238, 1) }
blockquote p { font-size: 14px; font-weight: 300; line-height: 18px; margin-bottom: 0; font-style: italic }
code, pre { font-family: Monaco, Andale Mono, Courier New, monospace }
code { background-color: rgba(254, 233, 204, 1); color: rgba(0, 0, 0, 0.75); padding: 1px 3px; font-size: 12px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px }
pre { display: block; padding: 14px; margin: 0 0 18px; line-height: 16px; font-size: 11px; border: 1px solid rgba(217, 217, 217, 1); white-space: pre-wrap; word-wrap: break-word }
pre code { background-color: rgba(255, 255, 255, 1); color: rgba(115, 115, 115, 1); font-size: 11px; padding: 0 }
sup { font-size: 0.83em; vertical-align: super; line-height: 0 }
* { -webkit-print-color-adjust: exact }
@media screen and (min-width: 914px) { body { width: 854px; margin: 10px auto } }
@media print { body, code, pre code, h1, h2, h3, h4, h5, h6 { color: rgba(0, 0, 0, 1) } table, pre { page-break-inside: avoid } }