http://www.code4app.com/forum.php?mod=viewthread&tid=7632&extra=page%3D2%26filter%3Dsortid%26orderby%3Ddateline%26sortid%3D1

封面圖:

文／Flying_Einstein（簡書作者） 常見的幾種啟動圖風格 靜態圖類型?：微信 圖片不變，有動畫效果?：京東 ? 隨著節日或者時間動態更換的?：百度云、網易公開課 網易公開課 注意：筆者說的啟動圖并不是廣告頁，啟動圖是不接受點擊事件的，但是廣告頁是接受點擊事件的，點擊后一般會跳轉到網頁。如下： ? 這幾種風格的啟動圖怎么實現的？ 靜態圖類型?：這種比較簡單，開發者可以使用LaunchImage和LaunchScreen.storyboard的任何一種方式添加所需的正確格式的圖片 圖片不變，有動畫效果?：這種方式，筆者認為在實現方式上和第三種是一樣的，就不在贅述，感興趣的讀者在看完第三種實現方式后，可以嘗試去做。 隨著節日或者時間動態更換的?：這種方式，也就是筆者今天著重要講的，原理及實現方式。 像百度云或者網易公開課一樣動態更換APP啟動圖原理 其實你看到的不是一張圖片?：讀者仔細觀察就會發現，使用這種方式的的啟動圖，用的不是一張圖片，而是兩張。我們拿百度云來舉例： ? 可以看到，兩張圖片的區別就是，底部都是一樣的，而第一張上半部分是空白。其實，網易公開課和支付寶德也是如此。第一張圖片是內容兼容性很強的圖片，就是一個版權說明加上一個類似于app logo的樣式，上面空白部分可以根據節日的不同，調整展示的樣式 這兩張圖片還有其他的不同嗎?：因為筆者經常使用這幾款app，發現有的時候第二張圖片是不顯示的，顯示完第一張圖片直接跳到app主頁了。筆者認為，第一張圖片就是放在[LaunchImage或者LaunchScreen.xib中的圖片，是不會改變的。第二張圖片則是從網上獲取的，而且可以根據是否獲取到相應的圖片網址決定第二張圖片能否顯示。 為什么要這么做?：有的讀者可能有疑問，為什么要這么做？難道不可以直接更換掉第一張啟動圖嗎，或者不顯示第一張只顯示第二張？答案：NO! 更換第一張圖片？抱歉，更換不了，如果你使用的是LaunchScreen.xib或者LaunchScreen.Storyboard,只要你的app啟動過，那張圖片就永遠的緩存在app里了，以后每次啟動都會出現。 網絡請求有延時，如果不放第一張圖片，只放第二張圖片，會出現短暫的黑屏。 從產品的角度來講，也不合理。比如：植樹節的時候我展示了和環保有關的內容，如果過了植樹節，那么正常情況下我不展示該內容就可以了，后臺不返回相應的圖片網址，展示完第一張圖片就ok了。如果沒有第一張圖片，那么過了植樹節，我就需要把網址更換，需要一個下載圖片的過程，從用戶體驗來講也不好，時間延遲也會浪費流量。 關于猜測的一點驗證？ 為了驗證自己的猜想，筆者使用抓包工具青花瓷進行了抓包 筆者抓的是百度云的包，我們先來看第一張截圖 ? 這是一個post的請求方式，可以看到在url路徑中，有image/diff這段，筆者判斷這段路徑返回 的參數是用來決定是否更換第二張圖片的 我們再來看第二張截圖 ? 緊接著第一次網絡請求，就進行了這次網絡請求，我們在path路徑下可以看到app.gif,筆者認為這個網址就是圖片的地址，百度云的第二張圖片有動畫效果，筆者猜測可能是gif格式的圖片 代碼怎么實現這種啟動圖方式？ 第一張圖片使用LaunchScreen.Storyboard方式 這一步相信讀者都會，筆者就不再贅述 第二張圖片如何展示 第一步就是進行一次網絡請求，判斷有沒有相應的圖片網址，沒有的話就就不顯示，有的話拿到圖片的網址進行第二次網絡請求 請求下來圖片后，筆者參考通過LaunchScreen自定義啟動動畫實現啟動圖更換圖片，而且可以給啟動圖添加動畫效果 這一步是獲取LaunchScreen.storyboard里的UIViewController,UIViewController 的identifer是LaunchScreen [Objective-C]? 查看源文件? 復制代碼 ? 1 2 3 4 5 UIViewController *viewController = [[UIStoryboard storyboardWithName: @"LaunchScreen" bundle:[ NSBundle mainBundle]] instantiateViewControllerWithIdentifier: @"LaunchScreen" ]; UIView *launchView = viewController.view; UIImageView? * Imageview= [[UIImageView? alloc]initWithFrame:[UIScreen mainScreen].bounds]; [launchView addSubview:Imageview]; [ self .view addSubview:launchView]; 這一步是獲取上次網絡請求下來的圖片，如果存在就展示該圖片，如果不存在就展示本地保存的名為test的圖片 [Objective-C]? 查看源文件? 復制代碼 ? 1 2 3 4 5 6 7 NSMutableData * data = [[ NSUserDefaults standardUserDefaults]objectForKey: @"imageu" ]; if (data.length>0) { ??? Imageview.image = [UIImage imageWithData:data]; } else { Imageview.image = [UIImage imageNamed: @"Test" ]; } 下面這段代碼，是調用AFN下載文件的方法，異步方式下載，但是在這里異步方式下載有一個問題，就是這次下載完成的圖片，下次啟動時才會展示，讀者可以換成同步的，但是同步下載會有時間延遲，用戶體驗不好，下載完圖片后，將圖片以二進制的形式存在本地，筆者用的是userdefault,這是不科學的，讀者可以存在其他文件夾， ? ?? ? [Objective-C]? 查看源文件? 復制代碼 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 NSURLSessionConfiguration *configuration = [ NSURLSessionConfiguration defaultSessionConfiguration]; AFURLSessionManager *manager = [[AFURLSessionManager alloc] initWithSessionConfiguration:configuration]; NSURL *URL = [ NSURL URLWithString: @"http://s16.sinaimg.cn/large/005vePOgzy70Rd3a9pJdf&690" ]; NSURLRequest *request = [ NSURLRequest requestWithURL:URL]; NSURLSessionDownloadTask *downloadTask = [manager downloadTaskWithRequest:request progress: nil destination:^ NSURL *( NSURL *targetPath, NSURLResponse *response) { ?? NSURL *documentsDirectoryURL = [[ NSFileManager defaultManager] URLForDirectory: NSDocumentDirectory inDomain: NSUserDomainMask appropriateForURL: nil create: NO error: nil ]; ?? return [documentsDirectoryURL URLByAppendingPathComponent:[response suggestedFilename]]; } completionHandler:^( NSURLResponse *response, NSURL *filePath, NSError *error) { ?? NSLog ( @"File downloaded to: %@" , filePath); ?? NSData * image = [ NSData dataWithContentsOfURL:filePath]; ?? [[ NSUserDefaults standardUserDefaults]setObject:image forKey: @"imageu" ]; }]; [downloadTask resume]; 筆者在展示完第二張圖片后，又添加了展示廣告位的代碼，這樣就是app啟動時比較完整的過程了。 這段代碼，可以實現第二張圖片有3D的動畫效果，動畫結束后，進行同步的網絡請求，請求的是廣告頁圖片，之所以用同步的是因為，如果用同步的話主頁面顯示后，圖片才會加載完成顯示。 [Objective-C]? 查看源文件? 復制代碼 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 [UIView animateWithDuration:6.0f delay:0.0f options:UIViewAnimationOptionBeginFromCurrentState animations:^{ ??????? //launchView.alpha = 0.0f; ??????? launchView.layer.transform = CATransform3DScale(CATransform3DIdentity, 1.5f, 1.5f, 1.0f); ??? } completion:^( BOOL finished) { ??????????????? NSString * ad_imgUrl? = @"http://www.uimaker.com/uploads/allimg/121217/1_121217093327_1.jpg" ; ??????????????? AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate]; ??????????????? [BBLaunchAdMonitor showAdAtPath:ad_imgUrl ???????????????????????????????????????? onView:appDelegate.window.rootViewController.view ?????????????????????????????????? timeInterval:5 ?????????????????????????????? detailParameters:@{ @"carId" :@(12345), @"name" : @"奧迪-品質生活" }]; ?????????????????? [launchView removeFromSuperview]; ??? }]; demo效果 ? 總結：這是筆者的實現過程，希望可以給讀者一點思路，如果讀者覺得有什么不明白的，或者有更好的方式，希望能聯系筆者，或者在評論中給出建議。

總結

以上是生活随笔為你收集整理的如何做到像百度云或者网易公开课一样动态更换APP启动图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。