[코드베이스] Custom PopUp Modal Animation

[참고 영상]

https://youtu.be/u6TpJrZNuPU

---

[학습 목표]

모달뷰를 사용할때 해당 뷰의 애니메이션 효과를 조정해보자.

---

[구현 방법]

1. 팝업을 하기 위해서 뷰를 작성해보자.

import Foundation
import UIKit

class Popup: UIView {
    
    fileprivate let titleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = UIFont.systemFont(ofSize: 28, weight: .bold) //font 크기를 28로 변환 및 bold체
        label.text = "1 credit"
        label.textAlignment = .center //text 가운데 정렬
        return label
    }()
    
    fileprivate let subtitleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = UIFont.systemFont(ofSize: 24, weight: .bold)
        label.text = "in app purchase for one book credet"
        label.textAlignment = .center //text 가운데 정렬
        label.numberOfLines = 3
        return label
    }()
    
    fileprivate let container: UIView = {
       let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .white
        v.layer.cornerRadius = 24
        return v
    }()
    
    fileprivate lazy var stack: UIStackView = {
        let stack = UIStackView(arrangedSubviews: [titleLabel, subtitleLabel]) // stack에 subview들을 추가.
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.axis = .vertical // stack을 vertical로 바꿔주는 코드
        return stack
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
         
        self.backgroundColor = UIColor.gray.withAlphaComponent(0.6)
        self.frame = UIScreen.main.bounds
        self.addSubview(container)
        
        container.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
        container.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
        container.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 0.7).isActive = true
        container.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 0.45).isActive = true
        
        container.addSubview(stack)
        stack.leadingAnchor.constraint(equalTo: container.leadingAnchor).isActive = true
        stack.centerYAnchor.constraint(equalTo: container.centerYAnchor).isActive = true
        stack.trailingAnchor.constraint(equalTo: container.trailingAnchor).isActive = true
        stack.bottomAnchor.constraint(equalTo: container.bottomAnchor).isActive = true
        
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

 

2. 해당 화면에 이제 애니메이션 효과를 더할 함수를 만들어 주자.

@objc fileprivate func animateOut() {

    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 1, options: .curveEaseIn, animations: {
        self.container.transform = CGAffineTransform(translationX: 0, y: -self.frame.height)
    }) {(complete) in
        if complete {
            self.isHidden = true //영상에서는 remove subview로 되어 있지만 재사용 가능성이 있는 뷰에는 ishidden을 쓰는 것이 좋기에 ishidden을 사용하였다.
        }
    }
}

@objc fileprivate func animateIn() {
    self.container.transform = CGAffineTransform(translationX: 0, y: -self.frame.height)
    self.alpha = 1
    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 1) {
        self.container.transform = .identity
        self.alpha = 1
    }
}

해당 함수들은 해당 팝업창이 만들어질때와 끝날때 애니메이션 효과를 더해줄 것이다.

이제 해당 함수들을 popup 클래스의 init에 넣어주도록 하자.

self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(animateOut)))

animateIn()

 

---

* 해당 방법을 사용해 이제 modal view에서 애니메이션 효과를 입히는 방법에 대해서 알아 보았다. 앞으로 modal view를 쓸 때 디자이너가 애니메이션 효과를 원할 때 조금 더 능동적으로 대처하도록 하자.