当前位置: > > > Swift - 启动画面放大淡出效果的实现2(使用LaunchScreen.storyboard)

Swift - 启动画面放大淡出效果的实现2(使用LaunchScreen.storyboard)

在前文中:Swift - 启动画面放大淡出效果的实现1(使用launch image)。演示了如何让启动画面消失的时候有动画效果。当时是使用 launch image 来实现启动图片。本文演示在使用 LaunchScreen.storyboard 作为启动画面的情况下,如何实现同样的过渡效果。

1,效果图如下:
启动页面同样会放大淡出直至消失。
           

2,实现原理:
我们知道启动页通常有两种方式实现。一种是使用 LaunchImage 来设置,另一种是使用 LaunchScreen.storyboard
不管哪种方式,我们都不能直接在它上面做动画。我们可以在程序载入后,往页面上再添加一个同启动页一样的视图。由于内容一样,时间又衔接在一起,用户看不出其实启动页面已经被替换掉。
最后,我们在新添加的视图上做动画即可。

3,本文介绍使用LaunchScreen.storyboard实现启动页的情况:
(1)App默认情况下,就是以 LaunchScreen.storyboard 作为启动界面。作为演示,我们先在上面添加一些组件。

(2)在 LaunchScreen.storyboard 中将 Storyboard ID 设置为 launch

(3)下面是完整代码。关键在于当程序启动后,我们要根据 Storyboard ID,将我们应用的启动页获取到并显示。
import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //播放启动画面动画
        launchAnimation()
    }
    
    //播放启动画面动画
    private func launchAnimation() {
        //获取启动视图
        let vc = UIStoryboard(name: "LaunchScreen", bundle: nil)
            .instantiateViewController(withIdentifier: "launch")
        let launchview = vc.view!
        let delegate = UIApplication.shared.delegate
        delegate?.window!!.addSubview(launchview)
        //self.view.addSubview(launchview) //如果没有导航栏,直接添加到当前的view即可
        
        //播放动画效果,完毕后将其移除
        UIView.animate(withDuration: 1, delay: 1.5, options: .beginFromCurrentState,
        animations: {
                launchview.alpha = 0.0
                let transform = CATransform3DScale(CATransform3DIdentity, 1.5, 1.5, 1.0)
                launchview.layer.transform = transform
        }) { (finished) in
            launchview.removeFromSuperview()
        }
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

4,源码下载
hangge_1247.zip(2016-07-15 Swift 2)
hangge_1247.zip(2016-10-04 Swift 3 最新版)
评论6
  • 6楼
    2017-09-15 17:22
    小曹

    谢谢站长!但是, 内置的启动页怎么通过代码替换我下载下来的图片呢? 启动页我是通过LaunchImage设置的.
    还有一个问题请教 就是内置的启动页怎么取消呢?意思就是我不要启动页该怎么办呢

    站长回复

    启动页的图片是没法在代码中更换的,要实现动态的启动图片其实还是像本文一样:在启动后再显示一个自定义的广告页,这个广告页里就是上一次下载的图片。广告页延迟一段时间消失,显示主界面。

    整个流程是:启动页->广告页->主界面。
    不要启动页的话只能将启动图片删除,或者设置为一些纯色图片。

  • 5楼
    2017-08-31 17:11
    小曹

    想请教一个问题 我该怎么在启动页中加载服务器图片呢? 如果按照你这样的设计 默认的启动页空白时间怎么取消呢?

    站长回复

    一般App都会内置一个初始的启动图片,第一次安装运行使用这张图片。启动后会去服务器请求新的图片,下次启动就用下载下来的新图片。

  • 4楼
    2017-06-21 15:57
    Shayne

    漂亮!

    站长回复

    多谢夸奖:)

  • 3楼
    2017-02-17 18:41
    YzStyle

    有个问题:根据你的其他文章,做了一个引导页,如果之前引导页也要这个效果的话,引导页完后进入主界面又回重新进入启动页。请问这种情况怎么解决呢?

    站长回复

    你要做个判断,如果前面出现过引导页的话,后面就不要再次显示启动页了。

  • 2楼
    2016-08-03 15:19
    人丑多读书丶

    航哥, 为什么启动效果直接对ViewController无效? 要在viewController添加一个NavgationController才有效?

    站长回复

    如果没有NavgationController,直接将launchview添加到当前View即可。
    self.view.addSubview(launchview)

  • 1楼
    2016-07-07 21:29
    小帅

    为什么会出现闪屏呢?

    站长回复

    多谢你的提醒,动画代码应该放在viewDidLoad中执行。现已修正。