關(guān)于iOS中Gif播放

最近看了一下Gif播放,因為iOS是沒有可以直接播放Gif資源的控件的铅协,所以捷沸,這就需要我們想辦法了。狐史。痒给。

準備


通過上網(wǎng)Google说墨,也查到了一些相關(guān)方法,下面列舉一下:

  • UIWebView播放
    NSString *path = [[NSBundle mainBundle] pathForResource:@"niconiconi" ofType:@"gif"];
    NSData *gifData = [NSData dataWithContentsOfFile:path];
    UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    webView.scalesPageToFit = YES;
    [webView loadData:gifData MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
    webView.backgroundColor = [UIColor clearColor];
    webView.opaque = NO;
    [self.view addSubview:webView];
  • 將GIF分解成多張PNG圖片侈玄,使用UIImageView播放
 // 需導(dǎo)入 #import <ImageIO/ImageIO.h> 

     NSURL *fileUrl = [[NSBundle mainBundle] URLForResource:@"niconiconi" withExtension:@"gif"]; 
    // 將GIF圖片轉(zhuǎn)換成對應(yīng)的圖片源
    CGImageSourceRef gifSource = CGImageSourceCreateWithURL((CFURLRef) fileUrl, NULL);           
    // 獲取圖片源個數(shù)婉刀,即由多少幀圖片組成
    size_t frameCout = CGImageSourceGetCount(gifSource);                                         
    NSMutableArray *frames = [[NSMutableArray alloc] init];                                      
    for (size_t i = 0; i < frameCout; i++) {
       // 從GIF圖片中取出源圖片
        CGImageRef imageRef = CGImageSourceCreateImageAtIndex(gifSource, i, NULL); 
        UIImage *imageName = [UIImage imageWithCGImage:imageRef];                  
        [frames addObject:imageName];                                              
        CGImageRelease(imageRef);
     }
    UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
    gifImageView.animationImages = frames; 
    gifImageView.animationDuration = 0.1;
    [gifImageView startAnimating];    
    [self.view addSubview:gifImageView];
  • 使用 SDWebImage 播放NSData數(shù)據(jù)的GIF + (UIImage *)sd_animatedGIFWithData:(NSData *)data
    NSString  *filePath = [[NSBundle bundleWithPath:[[NSBundle mainBundle] bundlePath]] pathForResource:@"niconiconi" ofType:@"gif"];
    NSData  *imageData = [NSData dataWithContentsOfFile:filePath];
    UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
    gifImageView.backgroundColor = [UIColor clearColor];
    gifImageView.image = [UIImage sd_animatedGIFWithData:imageData];
    [self.view addSubview:gifImageView];

FLAnimatedImage 使用

    NSURL *url = [[NSBundle mainBundle] URLForResource:@"niconiconi" withExtension:@"gif"];
    NSData *data = [NSData dataWithContentsOfURL:url];
    FLAnimatedImage *animatedImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:data];
    FLAnimatedImageView *imageView = [[FLAnimatedImageView alloc] init];
    imageView.animatedImage = image;
    imageView.frame = CGRectMake(0.0, 0.0, 100.0, 100.0);
    [self.view addSubview:imageView];

YYImage 使用

    // YYImage可以加載包括gif,WebP,APNG等圖片
    YYImage * image = [YYImage imageNamed:@"niconiconi"];
    YYAnimatedImageView *imageView = [[YYAnimatedImageView alloc] initWithImage:image];
    imageView.frame = CGRectMake(0, 0, 300, 300);
    [self.view addSubview:imageView];
  • 對比總結(jié)

UIWebView實現(xiàn)播放Gif簡單直接,如果只想單純的播放一下建議使用此方法序仙。弊端就是只能循環(huán)播放突颊,無法控制它的暫停和其他操作, 不夠靈活。

UIImageView采用幀動畫將圖片一張張顯示潘悼,可以調(diào)節(jié)播放次數(shù)和速度但圖片過多過大內(nèi)存會很有壓力律秃。另外在保證播放的動畫清晰和時長的情況下Gif文件大小會遠小于多張PNG圖片的大小。

使用第三方播放Gif動畫可以對動畫進行一系列操作治唤,暫桶舳或者快進等操作,適合Gif文件比較大的情況下使用宾添。

簡單應(yīng)用


這里呢船惨,我使用 FLAnimatedImage 第三方庫, 簡單實現(xiàn)了一個新特性引導(dǎo)動畫缕陕, 直接進行Gif播放粱锐,使用起來還算不錯 , 性能消耗也不是很大, 如下:

性能使用圖

實現(xiàn)原理也是很簡單扛邑,UIScrollView + FLAnimatedImageView 根據(jù) contentOffset 控制當前頁數(shù)怜浅。

下面是幾個核心代碼:

// 設(shè)置初始顯示樣式
- (void)setupDefault {
    self.scrollView.contentSize = CGSizeMake(SCREEN_WIDTH * TOTALCOUNT, 0);
    for (int i = 0; i<TOTALCOUNT; i++) {
        FLAnimatedImageView *imageView = [[FLAnimatedImageView alloc] init];
        FLAnimatedImage *image = [self animatedImageWithURLForResource:[NSString stringWithFormat:@"引導(dǎo)頁%d",i+1]];
        if (i == 0) {
            imageView.animatedImage = image;
        } else {
            // 設(shè)置首幀圖片
            imageView.image = image.posterImage;
        }
        imageView.frame = CGRectMake(SCREEN_WIDTH * i, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
        [_scrollView addSubview:imageView];
        [self.animatedImageViews addObject:imageView];
    }
    self.pageControl.numberOfPages = TOTALCOUNT;
}

// 根據(jù)Gif資源獲取FLAnimatedImage
- (FLAnimatedImage *)animatedImageWithURLForResource:(NSString *)fileName {
    NSURL *url = [[NSBundle mainBundle] URLForResource:fileName withExtension:@"gif"];
    NSData *data = [NSData dataWithContentsOfURL:url];
    FLAnimatedImage *animatedImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:data];
    return animatedImage;
}

// 滑到當前顯示頁數(shù)
- (void)setupAnimateImage:(int)page {
    FLAnimatedImageView *imageView = self.animatedImageViews[page];
    FLAnimatedImage *image = [self animatedImageWithURLForResource:[NSString stringWithFormat:@"引導(dǎo)頁%d",page+1]];
    imageView.animatedImage = image;
    
    if (page == TOTALCOUNT - 1) {
        imageView.loopCompletionBlock= ^(NSUInteger loopCountRemaining) {
            [UIView animateWithDuration:0.3 animations:^{
                self.entryBtn.hidden = NO;
                self.entryBtnBottom.constant = 75;
                [self.entryBtn layoutIfNeeded];
            }];
        };
    } else {
        self.entryBtn.hidden = YES;
        self.entryBtnBottom.constant = 0;
        [self.entryBtn layoutIfNeeded];
    }
}

// 每次滑到當前頁確保從首幀播放
- (void)setupFistFrameImageWithPage:(int)page {
    // 設(shè)置首幀圖片,每次播放從首幀開始(如果不設(shè)置蔬崩,滑回上一個會顯示最后一幀的圖片)
    if (self.lastPage != page) {
        if (self.lastPage < page ) {
            FLAnimatedImageView *imageView1 = self.animatedImageViews[page-1];
            imageView1.animatedImage = [self animatedImageWithURLForResource:[NSString stringWithFormat:@"引導(dǎo)頁%d",page]];
            imageView1.image = imageView1.animatedImage.posterImage;
        } else {
            FLAnimatedImageView *imageView2 = self.animatedImageViews[page+1];
            imageView2.animatedImage = [self animatedImageWithURLForResource:[NSString stringWithFormat:@"引導(dǎo)頁%d",page+2]];
            imageView2.image = imageView2.animatedImage.posterImage;
        }
    }
}

使用效果預(yù)覽 :

guide.gif

附上地址: https://github.com/ismilesky/GifPlay.git

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末恶座,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子沥阳,更是在濱河造成了極大的恐慌跨琳,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件沪袭,死亡現(xiàn)場離奇詭異湾宙,居然都是意外死亡,警方通過查閱死者的電腦和手機冈绊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進店門侠鳄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人死宣,你說我怎么就攤上這事伟恶。” “怎么了毅该?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵博秫,是天一觀的道長潦牛。 經(jīng)常有香客問我,道長挡育,這世上最難降的妖魔是什么巴碗? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮即寒,結(jié)果婚禮上橡淆,老公的妹妹穿的比我還像新娘。我一直安慰自己母赵,他們只是感情好逸爵,可當我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著凹嘲,像睡著了一般师倔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上周蹭,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天趋艘,我揣著相機與錄音,去河邊找鬼凶朗。 笑死致稀,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的俱尼。 我是一名探鬼主播,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼萎攒,長吁一口氣:“原來是場噩夢啊……” “哼遇八!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起耍休,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤刃永,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后羊精,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體斯够,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年喧锦,在試婚紗的時候發(fā)現(xiàn)自己被綠了读规。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡燃少,死狀恐怖束亏,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情阵具,我是刑警寧澤碍遍,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布定铜,位于F島的核電站,受9級特大地震影響怕敬,放射性物質(zhì)發(fā)生泄漏揣炕。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一东跪、第九天 我趴在偏房一處隱蔽的房頂上張望畸陡。 院中可真熱鬧,春花似錦越庇、人聲如沸罩锐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽涩惑。三九已至,卻和暖如春桑驱,著一層夾襖步出監(jiān)牢的瞬間竭恬,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工熬的, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留痊硕,地道東北人。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓押框,卻偏偏與公主長得像岔绸,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子橡伞,可洞房花燭夜當晚...
    茶點故事閱讀 42,762評論 2 345

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫盒揉、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,022評論 4 62
  • Swift版本點擊這里歡迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh閱讀 25,289評論 7 249
  • 線程同步的工具 原子操作原子操作是同步簡單的形式藕漱。它處理簡單的數(shù)據(jù)類型。原子操作的優(yōu)勢它們不妨礙競爭的線程崭闲。 內(nèi)存...
    Crazy2015閱讀 238評論 0 0
  • 擁抱未來精準教育是一家從事3-6歲線上親子教育的培訓(xùn)機構(gòu)刁俭。公司擁有350名員工牺蹄,4000平米辦公場地。 2015年...
    劈波斬浪閱讀 844評論 0 0
  • 從今年2017年過年之后吧薄翅!沙兰,對自己才有一個新的認知氓奈,這期間發(fā)生了很多事,有好的有壞的鼎天,應(yīng)該具體來說是從3月份開始...
    姣_9eb5閱讀 128評論 0 1