如何做到像百度云或者网易公开课一样动态更换APP启动图

demo:https://github.com/Flying-Einstein/LaunchScreenTest喜欢就给个star吧

常见的几种启动图风格

  • 静态图类型 :微信

    微信.gif

  • 图片不变,有动画效果 :京东

京东.gif
  • 随着节日或者时间动态更换的 :百度云、网易公开课

网易公开课
|
百度云.gif

注意:笔者说的启动图并不是广告页,启动图是不接受点击事件的,但是广告页是接受点击事件的,点击后一般会跳转到网页。如下:
有道词典.gif

这几种风格的启动图怎么实现的?

  • 静态图类型 :这种比较简单,开发者可以使用LaunchImageLaunchScreen.storyboard的任何一种方式添加所需的正确格式的图片,但是在使用的过程中需要注意的事项,读者可以看我的这篇文章LaunchImage和LaunchScreen.xib混用出现的坑

  • 图片不变,有动画效果 :这种方式,笔者认为在实现方式上和第三种是一样的,就不在赘述,感兴趣的读者在看完第三种实现方式后,可以尝试去做。

  • 随着节日或者时间动态更换的 :这种方式,也就是笔者今天着重要讲的,原理及实现方式。

像百度云或者网易公开课一样动态更换APP启动图原理

  • 其实你看到的不是一张图片 :读者仔细观察就会发现,使用这种方式的的启动图,用的不是一张图片,而是两张。我们拿百度云来举例:
    1.pic.jpg

    2.pic.jpg

    可以看到,两张图片的区别就是,底部都是一样的,而第一张上半部分是空白。其实,网易公开课和支付宝德也是如此。第一张图片是内容兼容性很强的图片,就是一个版权说明加上一个类似于app logo的样式,上面空白部分可以根据节日的不同,调整展示的样式
  • 这两张图片还有其他的不同吗 :因为笔者经常使用这几款app,发现有的时候第二张图片是不显示的,显示完第一张图片直接跳到app主页了。笔者认为,第一张图片就是放在[LaunchImage或者LaunchScreen.xib中的图片,是不会改变的。第二张图片则是从网上获取的,而且可以根据是否获取到相应的图片网址决定第二张图片能否显示。
  • 为什么要这么做 :有的读者可能有疑问,为什么要这么做?难道不可以直接更换掉第一张启动图吗,或者不显示第一张只显示第二张?答案:NO!
  • 更换第一张图片?抱歉,更换不了,如果你使用的是LaunchScreen.xib或者LaunchScreen.Storyboard,只要你的app启动过,那张图片就永远的缓存在app里了,以后每次启动都会出现。我的这篇简书讲过这个问题LaunchImage和LaunchScreen.xib混用出现的坑
  • 网络请求有延时,如果不放第一张图片,只放第二张图片,会出现短暂的黑屏。
  • 从产品的角度来讲,也不合理。比如:植树节的时候我展示了和环保有关的内容,如果过了植树节,那么正常情况下我不展示该内容就可以了,后台不返回相应的图片网址,展示完第一张图片就ok了。如果没有第一张图片,那么过了植树节,我就需要把网址更换,需要一个下载图片的过程,从用户体验来讲也不好,时间延迟也会浪费流量。

关于猜测的一点验证?

屏幕快照 2016-04-12 下午6.25.55.png

这是一个post的请求方式,可以看到在url路径中,有image/diff这段,笔者判断这段路径返回 的参数是用来决定是否更换第二张图片的

  • 我们再来看第二张截图


    屏幕快照 2016-04-12 下午6.26.19.png

    紧接着第一次网络请求,就进行了这次网络请求,我们在path路径下可以看到app.gif,笔者认为这个网址就是图片的地址,百度云的第二张图片有动画效果,笔者猜测可能是gif格式的图片


代码怎么实现这种启动图方式?

  • 第一张图片使用LaunchScreen.Storyboard方式
  • 这一步相信读者都会,笔者就不再赘述
  • 第二张图片如何展示
  • 第一步就是进行一次网络请求,判断有没有相应的图片网址,没有的话就就不显示,有的话拿到图片的网址进行第二次网络请求
  • 请求下来图片后,笔者参考通过LaunchScreen自定义启动动画实现启动图更换图片,而且可以给启动图添加动画效果
    ** 这一步是获取LaunchScreen.storyboard里的UIViewController,UIViewController 的identifer是LaunchScreen**
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的图片**

NSMutableData * data = [[NSUserDefaults standardUserDefaults]objectForKey:@"imageu"];
    if (data.length>0) {
         Imageview.image = [UIImage imageWithData:data];
    }else{
    
     Imageview.image = [UIImage imageNamed:@"Test"];
    }

** 下面这段代码,是调用AFN下载文件的方法,异步方式下载,但是在这里异步方式下载有一个问题,就是这次下载完成的图片,下次启动时才会展示,读者可以换成同步的,但是同步下载会有时间延迟,用户体验不好,下载完图片后,将图片以二进制的形式存在本地,笔者用的是userdefault,这是不科学的,读者可以存在其他文件夹,**

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的动画效果,动画结束后,进行同步的网络请求,请求的是广告页图片,之所以用同步的是因为,如果用同步的话主页面显示后,图片才会加载完成显示。**

 [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效果

demo.gif

总结:

这是笔者的实现过程,希望可以给读者一点思路,如果读者觉得有什么不明白的,或者有更好的方式,希望能联系笔者,或者在评论中给出建议。

如有转载,请告知笔者

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25 707
  • Xcode6和iOS 8以后,苹果给开发者新添加了一种配置启动图的方式LaunchScreen.xib。 笔者觉得...
    以技术之名阅读 19,040评论 49 45
  • Xcode6和iOS 8以后,苹果给开发者新添加了一种配置启动图的方式LaunchScreen.xib。笔者觉得,...
    贝勒老爷阅读 1,378评论 1 4
  • “夜阑卧听风吹雨”,这是我此刻脑海里无端浮萦的一句话。尽管此刻无风无雨,可总觉得那窗外路与桥声声的鸣笛,像风雨般飘...
    郭威铭阅读 204评论 0 0
  • 人是很奇怪的,越是闲,越是有大把大把的时间,却是一点正经事都做不出来。如果,稍微忙些,时间紧起来,除了可以完成硬性...
    秦毛毛阅读 256评论 1 2