Twitterのような動くスプラッシュ画面をふろぐんで作ってみた

こんちは。渡部です。
コメダ珈琲のコーヒーと一緒に出てくる豆が好きです。

Twitterとか海外のアプリでちょいちょい見かけるスプラッシュ画面が動くやつ。
こういうのさりげなく実装できてるとかっこいいなーと思ったんで作ってみました。
こういうの↓
f:id:watabe1028:20170719161417g:plain
引用：twitter / animation / splash screen | UI design | Pinterest | スプラッシュ画面、アニメ、スクリーン

やり方

・LaunchScreenに画像を設定
・LaunchScreenと同じviewを起動時に表示
・viewをアニメーションさせる

LaunchScreenに画像を設定

普通にLaunchScreenにImageViewを追加します。
画像には弊社サービスを牛耳るふろぐんを使用しています。

わかりやすいように画面中央に設定します。
f:id:watabe1028:20170719171044p:plain

LaunchScreenと同じviewを起動時に表示

初期起動時に読み込まれるViewControllerにLaunchScreenと同様のImageViewを追加します。

ここではわかりやすいようにStoryboardを使わずコードで実装します。
viewDidLoad内でこんな感じで

class ViewController: UIViewController {
    
    var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
                
        //imageView作成
        self.imageView = UIImageView(frame: CGRectMake(0, 0, 200, 200))
        //中央寄せ
        self.imageView.center = self.view.center
        //画像を設定
        self.imageView.image = UIImage(named: "hrog")
        //viewに追加
        self.view.addSubview(self.imageView)
    }

未だにCGRectMakeじゃないとしっくりこないのでCGRectMakeをwrapするメソッドを書いてます。
みんなCGRectMakeなしでどうやっているんでしょうか？

    // CGRectMakeをwrap
    func CGRectMake(_ x: CGFloat, _ y: CGFloat, _ width: CGFloat, _ height: CGFloat) -> CGRect {
        return CGRect(x: x, y: y, width: width, height: height)
    }

viewをアニメーションさせる

アニメーションさせて、ImageViewを消す処理を追加します。
処理はviewDidAppearに書きます。

Twitterでは少しバウンドしてる感じなので
・標準よりちょっと小さくする
・そこから拡大していく
・消える
アニメーションを追加します。

override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        //80%まで縮小させて・・・
        UIView.animate(withDuration: 0.3,
                       delay: 1.0,
                       options: UIViewAnimationOptions.curveEaseOut,
                       animations: { () in
                        self.imageView.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
        }, completion: { (Bool) in
            
        })
        
        //8倍まで拡大！
        UIView.animate(withDuration: 0.2,
                       delay: 1.3,
                       options: UIViewAnimationOptions.curveEaseOut,
                       animations: { () in
                        self.imageView.transform = CGAffineTransform(scaleX: 8.0, y: 8.0)
                        self.imageView.alpha = 0
        }, completion: { (Bool) in
            //で、アニメーションが終わったらimageViewを消す
            self.imageView.removeFromSuperview()
        })
    }