iOS之加載Gif圖片

Gif圖片是非常常見的圖片格式,尤其是在聊天的過程中,Gif表情使用地很頻繁。但是iOS竟然沒有現(xiàn)成的支持加載和播放Gif的類。

簡單地匯總了一下,大概有以下幾種方法:

一、加載本地Gif文件

1、使用UIWebView

    // 讀取gif圖片數(shù)據(jù) 
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0,0,200,200)];
    [self.view addSubview:webView];

    NSString *path = [[NSBundle mainBundle] pathForResource:@"001" ofType:@"gif"];
    /*
         NSData *data = [NSData dataWithContentsOfFile:path];
         使用loadData:MIMEType:textEncodingName: 則有警告
         [webView loadData:data MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
     */
    NSURL *url = [NSURL URLWithString:path];
    [webView loadRequest:[NSURLRequest requestWithURL:url]];

但是使用UIWebView的弊端在于,不能設置Gif動畫的播放時間。

2、將Gif拆分成多張圖片,使用UIImageView播放

最好把所需要的Gif圖片打包到Bundle文件內(nèi),如下圖所示

Loading.png

- (NSArray *)animationImages
{
    NSFileManager *fielM = [NSFileManager defaultManager];
    NSString *path = [[NSBundle mainBundle] pathForResource:@"Loading" ofType:@"bundle"];
    NSArray *arrays = [fielM contentsOfDirectoryAtPath:path error:nil];
    
    NSMutableArray *imagesArr = [NSMutableArray array];
    for (NSString *name in arrays) {
        UIImage *image = [UIImage imageNamed:[(@"Loading.bundle") stringByAppendingPathComponent:name]];
        if (image) {
            [imagesArr addObject:image];
        }
    }
    return imagesArr;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:frame];
    gifImageView.animationImages = [self animationImages]; //獲取Gif圖片列表
    gifImageView.animationDuration = 5;     //執(zhí)行一次完整動畫所需的時長
    gifImageView.animationRepeatCount = 0;  //動畫重復次數(shù)
    [gifImageView startAnimating];
    [self.view addSubview:gifImageView];
}

3、使用SDWebImage

但是很遺憾,SDWebImagesd_setImageWithURL:placeholderImage:這個方法是不能播放本地Gif的,它只能顯示Gif的第一張圖片而已。So,此方法行不通

    UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:frame];
    [gifImageView sd_setImageWithURL:nil placeholderImage:[UIImage imageNamed:@"gifTest.gif"]];

其實,在SDWebImage這個庫里有一個UIImage+GIF的類別,里面為UIImage擴展了三個方法:

@interface UIImage (GIF)
+ (IImage *)sd_animatedGIFNamed:(NSString *)name;
+ (UIImage *)sd_animatedGIFWithData:(NSData *)data;
- (UIImage *)sd_animatedImageByScalingAndCroppingToSize:(CGSize)size;
@end

大家一看就知道,我們要獲取處理后的Gif圖片,其實只要調(diào)用前面兩個中的其中一個方法就行了

注意:第一個只需要傳Gif的名字,而不需要帶擴展名(如Gif圖片名字為001@2x.gif,只需傳001即可)



我們就使用第二個方法試一試效果:

    NSString *path = [[NSBundle mainBundle] pathForResource:@"gifTest" ofType:@"gif"];
    NSData *data = [NSData dataWithContentsOfFile:path];
    UIImage *image = [UIImage sd_animatedGIFWithData:data];
    gifImageView.image = image;

然后通過斷點,我們看下獲取到的image是個什么樣的東東:

img.png

我們發(fā)現(xiàn):

image的isa指針指向了_UIAnimatedImage ,說明它是一個叫作_UIAnimatedImage 的類(當然,這個_UIAnimatedImage 蘋果是不會直接讓我們使用的)

_images 表示:這個Gif包含了多少張圖片

_duration表示:執(zhí)行一次完整動畫所需的時長

其實,動畫執(zhí)續(xù)時間_duration也可以更改!
我們來看下此方法的內(nèi)部實現(xiàn):


+ (UIImage *)sd_animatedGIFWithData:(NSData *)data {
    if (!data) {
        return nil;
    }

    CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);

    size_t count = CGImageSourceGetCount(source);

    UIImage *animatedImage;

    if (count <= 1) {
        animatedImage = [[UIImage alloc] initWithData:data];
    }
    else {
        NSMutableArray *images = [NSMutableArray array];

        NSTimeInterval duration = 0.0f;

        for (size_t i = 0; i < count; i++) {
            CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);

            duration += [self sd_frameDurationAtIndex:i source:source];

            [images addObject:[UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp]];

            CGImageRelease(image);
        }

        if (!duration) {
            duration = (1.0f / 10.0f) * count;
        }

        animatedImage = [UIImage animatedImageWithImages:images duration:duration];
    }

    CFRelease(source);

    return animatedImage;
}

很明顯,duration是可以隨意更改的,只不過此方法設置了一個默認值
(duration = (1.0f / 10.0f) * count)

歸根到底,創(chuàng)建新的動態(tài)的Image其實是調(diào)用了系統(tǒng)提供的一個UIImage的類方法而已:

 UIImage *animatedImage = [UIImage animatedImageWithImages:images duration:duration];


二、加載網(wǎng)絡Gif文件

加載網(wǎng)絡的Gif文件就簡單多了。最簡單的方法,我們只需要使用SDWebImagesd_setImageWithURL:這個方法傳入Gif文件是url地址即可。
糾其原因:稍微仔細看了SDWebImage內(nèi)部實現(xiàn)就可以清楚,大概是以下幾個步驟:

1、SDWebImage根據(jù)url將Gif文件下載下來,格式為一個NSData
2、如果判斷是Gif格式,則會調(diào)用** sd_animatedGIFWithData:** 將Data轉換成我們需要的Gif格式
3、通過上面的方法二即可顯示出Gif圖片

UIImage *image = [UIImage sd_animatedGIFWithData:data];
gifImageView.image = image;

............................................................

總結

一、加載本地Gif文件

1、使用UIWebView不可以設置duration,其他兩種方法都可設置。而且方法1的容器為UIWebView ,其余兩種的容器都是大家熟悉的UIImageView
2、方法2和方法3需要對應看應用場景

如:下拉、上拉加載控件需要一個根據(jù)拉動距離設置特定的Image,則需要使用方法2

直接顯示Gif圖片,則使用方法3會更方便

二、加載網(wǎng)絡Gif文件

直接使用SDWebImagesd_setImageWithURL:這個方法傳入Gif文件是url地址即可

............................................................

PS:簡單小Demo


最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,533評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,055評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,365評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,561評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,346評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,889評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,978評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,118評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,637評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,558評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,739評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,246評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 43,980評論 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,362評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,619評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,347評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,702評論 2 370

推薦閱讀更多精彩內(nèi)容

  • Gif圖片是非常常見的圖片格式,尤其是在聊天的過程中,Gif表情使用地很頻繁。但是iOS竟然沒有現(xiàn)成的支持加載和播...
    weicyNO_1閱讀 1,796評論 0 0
  • Gif圖片是非常常見的圖片格式,尤其是在聊天的過程中,Gif表情使用地很頻繁。但是iOS竟然沒有現(xiàn)成的支持加載和播...
    iOS_大菜鳥閱讀 3,023評論 1 5
  • Gif圖片是非常常見的圖片格式,尤其是在聊天的過程中,Gif表情使用地很頻繁。但是iOS竟然沒有現(xiàn)成的支持加載和播...
    CoderSC閱讀 2,464評論 0 0
  • 技術無極限,從菜鳥開始,從源碼開始。 由于公司目前項目還是用OC寫的項目,沒有升級swift 所以暫時SDWebI...
    充滿活力的早晨閱讀 12,666評論 0 2
  • 1.WebView UIWebView WKWebView WKWebView實習和UIWebView一樣,也是將...
    壯骨閱讀 4,797評論 2 6