LoginSignup
0
1

More than 1 year has passed since last update.

NewsPicksっぽい遷移アニメーションの実装方法

Posted at

このモーダル遷移アニメーションを実装してみました。
Videotogif.gif

作ったのがこれです。(ごちゃごちゃしてる方が動きが見えやすかったのでwebViewで表示してます。)
Videotogif (1).gif

中身としてはCATransitonを使用して、

   func transitonAnimation() {
        let transition = CATransition()
        transition.duration = 0.4
        transition.type = .fade
        self.view.window?.layer.add(transition, forKey: kCATransition)
    }

遷移時に↑の関数を挟みます。
presentのanimationはfalseにしておきます。
trueだと下から画面が出てくる動きが見えるので

   let vc = UIStoryboard(name: "HogeVC", bundle: nil).instantiateViewController(withIdentifier: "HogeVC") as! HogeVC
   vc.modalPresentationStyle = .overFullScreen
   transitonAnimation()
   self.present(vc, animated: false)

そして遷移先の画面のviewDidLoad内で↓のようにtransformアニメーションをするようにしています。

   self.view.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
   UIView.animate(withDuration: 0.3) {
      self.view.transform = CGAffineTransform(scaleX: 1, y: 1)
   }

画面を戻るときも同様でボタン閉じて戻る時に↓のような感じで処理を書いてます。

  @IBAction func tappedCloseButton(_ sender: Any) {
        transitonAnimation()
        UIView.animate(withDuration: 0.1) {
            self.view.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
        } completion: { _ in
            self.dismiss(animated: false)
        }
    }

もうちょっと調整したらまだ近づけるとは思ってますが、まぁ割とそれっぽく出来たのではと自負しています。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1