1. 程式人生 > >[IOS 開發] 利用UIWebView 載入GIF動畫

[IOS 開發] 利用UIWebView 載入GIF動畫

如果你使用過iOS版本的Spotify ,你會注意到在這款應用的新版本中,他們使用了一個播放的視訊作為app啟動的背景。相對於靜態的圖片背景來說,這是一個相當酷的設計。如果你還沒有見過這類設計,可以瞄一下我做的最終結果:

20.gif

僅僅為了讓你覺得有趣,我在從柏林到格拉茨的火車上拍下了這個軌道的慢移視訊

於是我開始著手重新建立一個程式設計的實踐,來達到相同的效果。那麼問題來了:怎樣實現?我首先想到的是,建立一個視訊播放器並且讓這個視訊檔案在背景檢視上重複播放。但是我還要放其他控制元件到檢視上面,而且我也不需要視訊的聲音。

然後我想到了GIF檔案。現在的問題是:要怎麼樣把一個GIF放到一個檢視上去?據我所知,UIImageView和UIImage都不支援GIF動畫。儘管UIImageView可以通過新增多張圖片和動畫結合的方式來實現,我們真的需要從視訊中擷取大量的圖片並把所有的這些圖片全都新增到工程中嗎?這樣製作視訊的工作準備未免太複雜了。那還有什麼支援GIF呢?答案是UIWebView。

工作前準備:處理視訊

準備一個你想作為背景播放的視訊。有無數的軟體和網頁應用可以用來把視訊轉換為GIF圖片,如果你想得到最佳效果,需要把它們裁剪為iPhone的螢幕大小

有一個非常好的指南來教你怎樣製作,更多的資源你也可以從Google獲取。這裡我用的是一個叫做 GIF Brewery的軟體。這個軟體也有一篇非常詳細的指南頁,非常簡單易上手。

把GIF新增到工程中

跟新增其他檔案一樣,直接把GIF檔案拖到你工程的導航目錄中。

21.gif

開始編寫程式碼

我會使用Objective-C和Swift來展示如何達到目的。所有的程式碼都寫在預設載入的viewController中的viewDidLoad 裡。

1.建立一個GIF的檔案路徑,用來讀取你新增的GIF檔案。

Objective-C:

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"railway" ofType:@"gif"];
 
NSData *gif = [NSData dataWithContentsOfFile:filePath];

Swift:
let filePath = NSBundle.mainBundle().pathForResource("railway", ofType: "gif")
 
let gif = NSData(contentsOfFile: filePath!)

2. 建立一個UIWebView並且把GIF轉換成的NSData形式作為它的資料來源。由於需要把它作為背景,因此frame尺寸應該根據iPhone的螢幕尺寸設定。同時,UIWebView類似於scrollview,你需要設定它的userInteractionEnabled 屬性設為NO。然後把UIWebView新增到主檢視上去。

Objective-C:

UIWebView *webViewBG = [[UIWebView alloc] initWithFrame:self.view.frame];
 
[webViewBG loadData:gif MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
 
webViewBG.userInteractionEnabled = NO;
 
[self.view addSubview:webViewBG];

Swift:
let webViewBG = UIWebView(frame: self.view.frame)
 
webViewBG.loadData(gif!, MIMEType: "image/gif", textEncodingName: String(), baseURL: NSUrl())
 
webViewBG.userInteractionEnabled = false;
 
self.view.addSubview(webViewBG)

3.可選:我還需要新增其他按鈕到背景上,因此我使用了另一個黑色的過濾檢視,alpha值設為0.05,覆蓋到UIWebView上。這樣可以淡出背景檢視,同時讓按鈕和按鈕的標題更突出。

Objective-C:

UIView *filter = [[UIView alloc] initWithFrame:self.view.frame];
 
filter.backgroundColor = [UIColor blackColor];
 
filter.alpha = 0.05;
 
[self.view addSubview:filter];

Swift:
Let filter = UIView()
 
filter.frame = self.view.frame
 
filter.backgroundColor = UIColor.blackColor()
 
filter.alpha = 0.05
 
self.view.addSubview(filter)



相關推薦

[IOS 開發] 利用UIWebView 載入GIF動畫

如果你使用過iOS版本的Spotify ,你會注意到在這款應用的新版本中,他們使用了一個播放的視訊作為app啟動的背景。相對於靜態的圖片背景來說,這是一個相當酷的設計。如果你還沒有見過這類設計,可以瞄一下我做的最終結果: 僅僅為了讓你覺得有趣,我在從柏林到格拉茨的火車

iOS開發UIWebView載入html時不顯示網路圖片解決辦法

NSString *html = @"<html><body><p>怎麼顯示網路圖片 <img src=\"http://p0.ifengimg.com/pmop/2017/1218/F9636BB16CC72EC34B5FCB78

iOS 直接載入gif動畫

<pre name="code" class="objc">// iOS 載入gif動畫,不用一幀幀切圖,直接實現載入.gif圖片</pre><pre name="code" class="objc">// 首先我們定義了一個<sp

ios開發之--UIWebView全屬性

ebe excel 武器 秘密武器 可能 自適應 天氣 2個 ntb 最近的項目當中需要用到html和ios的交互,所以就湊空整理一下,所有webView相關的方法和屬性,如有不對的地方,請大家不吝指教! 代碼如下: 1,創建webview並設置代理 UIWebView

iOS開發知識之:Animations 動畫

動畫在軟體開發中用的非常頻繁,沒有動畫的軟體,就類似於殭屍;所以對 iOS 常用的動畫進行歸納總結,參考官方文件以及 UIView 和 QuartzCore 文件,受益頗多   UIViewAnimation UIView 一般形

iOS開發:圖片載入@2x與@3x

myImage = [UIImage imageNamed:@"icon.png"]; 這種方法在一些圖片很少,或者圖片很小的程式裡是ok的。 但是,在大量載入圖片的程式裡,請千萬不要這樣做。 為什麼呢 ??????? 這種方法在application bundle的頂層資料夾尋找由供應的名字的圖象 。

iOS tableViewCell展示 UIWebView載入所有內容後禁止滾動

是這樣 cell 展示一個網頁所有內容然後撐開cell重新整理cell高度, 然後禁掉滾動事件。這樣完美實現一個自適應高度的html/富文字樣式。// 賦值部分 NSUserDefaults 高度儲存 寫在cell裡面NSUserDefaults *user = [NSUse

iOS開發 解決WKWebView載入的h5,無法呼叫撥打電話功能

h5的撥打電話程式碼是 <a href="tel:13112345678">移動WEB頁面JS一鍵撥打號碼諮詢功能</a> UIWebView載入的h5,可以呼叫;但是WKWebView就是不行,找了半天,最後解決,在WKWebView的WKNavi

解決ios下使用uiwebview載入網頁時,插放網頁中視訊或者音訊無聲音解決辦法

<pre name="code" class="objc">- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc

IOS開發之非同步載入網路圖片並快取本地實現瀑布流(一)

</pre><pre name="code" class="objc"></pre><pre name="code" class="objc">在前面的一篇部落格中,我寫了一個瀑布流照片牆的程式,由於之前的程式載入的圖片是本

利用uiwebview顯示GIF動圖,並且使其顯示全面

// 設定位置和大小CGRect frame = CGRectMake(50,[[UIApplication sharedApplication] statusBarFrame].size.height+44+height(120),200,200);    // view生

載入Gif動畫

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:

可以載入Gif動畫和png等圖片的方法和控制元件

final Guide_Result result = new Gson().fromJson(str, Guide_Result.class); // result.setMessage("http://img4.duitang.com/uploads/blog/201405

優化載入gif動畫

專案開發中都會用到各種載入進度的動畫,有幾下幾種方式可以參考: 1、使用animation-list一幀一幀的播放出來 最簡單的方式是將設計同學給的png序列直接放到一個 animation-list中 然後直接,放在設定為一個ImageView就

整合大量開源庫專案(八)可以載入Gif動畫的GifImageView

上週大多數時間都是根據興起,想到什麼做什麼寫了幾個自定義控制元件,把Soyi丟在那沒怎麼動,今天就把寫的東西整合進來,順便把SOyi”個人研發的結構理一下”。 先上一下今天整合之後的效果,以及新加進來的幾個庫: 按照慣例,貼一下Gradle的配置:

IOS開發(90)之動畫檢視的旋轉

1 前言 今天我們來學習如何建立一個旋轉仿射變換並使用 UIView 類的動畫方法來執行旋轉動作。 2 程式碼例項 ZYViewController.m - (void)viewDidLoad { [super viewDidLoad]; UIImage *

1.4 使用UIWebView載入HTML和Gif動畫 [iOS開發中的神兵利器]

1. 本節課將為您演示,如何使用網頁檢視載入網頁程式碼和Gif動畫。此時我們已經在專案中匯入了一張Gif圖片。 2. 然後在左側的專案導航區,開啟檢視控制器的程式碼檔案。 3. 現在開始編寫程式碼,首先實現使用網頁檢視載入網頁程式碼的功能。 4. 新增一個網頁檢視物件,作為當

iOS開發:通過UIWebView載入讀取本地檔案(word文件)

      做過iOS開發的程式猿,對UIWebView都不陌生,因為只要涉及到開發工作,就一定會涉及到這方面的運用。UIWebView是蘋果自帶的框架,也算是蘋果程式內部的瀏覽器,可以瀏覽web網頁,也可以開啟HTML/HTM、PDF、docx、txt等格式的文字檔案,其

iOS開發 ----- 載入動畫之牛頓擺的實現

牛頓擺動畫 自己看動畫有一段時間了,但是還是不是很能理解其中的一些屬性方法之類的東西,琢磨了一下午寫了一個牛頓擺的動畫,這裡記錄一下,一遍以後檢視先上圖 先說下思路 說下牛頓擺的大致運動過程 根據牛頓擺的原理,中間是不動得,只有兩邊

iOS開發之初:根據一張gif圖,返回其中每一幀的圖片陣列(ImageView載入gif))

在APP開發過程中能用到gif圖的地方無非就是重新整理和載入動畫了(等用到小動畫的地方).但是UIImageView是無法直接載入gif圖的,ImageView提供了一個載入動畫圖片陣列的方法..那要有很多幀.png/.jpg的圖片才行…但是像我這種沒有美工的開