こんちは。渡部です。
コメダ珈琲のコーヒーと一緒に出てくる豆が好きです。
Twitterとか海外のアプリでちょいちょい見かけるスプラッシュ画面が動くやつ。
こういうのさりげなく実装できてるとかっこいいなーと思ったんで作ってみました。
こういうの↓
引用:twitter / animation / splash screen | UI design | Pinterest | スプラッシュ画面、アニメ、スクリーン
やり方
・LaunchScreenに画像を設定
・LaunchScreenと同じviewを起動時に表示
・viewをアニメーションさせる
LaunchScreenに画像を設定
普通にLaunchScreenにImageViewを追加します。
画像には弊社サービスを牛耳るふろぐんを使用しています。
わかりやすいように画面中央に設定します。
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() }) }
するとこんな感じになります。
お、意外と簡単!
動きがカクカクしてるのはgifのせいです。
うまく作れない・・・
ちなみに・・・
たまにスプラッシュ画面が動かない、画像を更新しても反映されない、なんてことがあります。
そんな時は以下を試してください。
・プロジェクトのクリーン
「command」+「shift」+「k」でクリーンされます。
・実機の場合はアプリを入れ直す
一回消して入れ直すだけです。
時間がたつと反映されるとの噂もあります。
・シュミレータの場合はキャッシュを消す
Simulatorを選択して、「Reset Content and Settings…」でキャッシュを消します。
その後ビルドすれば反映されます。
まとめ
意外にやってみると結構簡単でした。
アニメーションの実装次第で色々な見せ方が出来て良いかもしれません。
これからもいかに手間を取らずにそれっぽいアプリに見せるテクニックを磨いていきたいと思います。