[Storyboard] Animation 애니메이션

Animation = 시작, 끝, 시간

시간에 따라 뷰의 상태가 바뀌는것

 

사용자가 앱을 사용할 때 더 집중, 몰입 할 수 있다.

너무 조잡하게 쓰면 안되고!

 

 

코드

UIView.animate(
    withDuration: /*TimeInterval*/,		//--> 애니메이션이 진행되는 시간
    animations: /*() -> Void*/			//--> 애니메이션 클로저. 클로저에는 에니메이팅 시킬것 넣어줌.
)

 

Layout constant 이용해서 Animation 만들기

    @IBOutlet weak var imgView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var bountyLable: UILabel!
    @IBOutlet weak var nameLabelCenterX: NSLayoutConstraint!
    @IBOutlet weak var bountyLabelCenterX: NSLayoutConstraint!
    
    let viewModel = DetailViewModel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        updateUI()
        prepareAnimation()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        showAnimation()
        
    }
    
    private func prepareAnimation() {
        nameLabelCenterX.constant = view.bounds.width
        bountyLabelCenterX.constant = view.bounds.width
    }
    
    private func showAnimation() {
        nameLabelCenterX.constant = 0
        bountyLabelCenterX.constant = 0
        
//        UIView.animate(withDuration: 0.3, delay: 0.1, options: .curveEaseIn, animations: {
//            self.view.layoutIfNeeded()
//        }, completion: nil)
        
        UIView.animate(withDuration: 0.5, delay: 0.2, usingSpringWithDamping: 0.6, initialSpringVelocity: 2, options: .allowUserInteraction, animations: {
            self.view.layoutIfNeeded()
        }, completion: nil)
        
        UIView.transition(with: imgView, duration: 0.3, options: .transitionFlipFromLeft, animations: nil, completion: nil)
    }

 

View의 속성 이용해서 Animation 만들기

    @IBOutlet weak var imgView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var bountyLable: UILabel!
    @IBOutlet weak var nameLabelCenterX: NSLayoutConstraint!
    @IBOutlet weak var bountyLabelCenterX: NSLayoutConstraint!
    
    let viewModel = DetailViewModel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        updateUI()
        prepareAnimation()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        showAnimation()
    }
    
    private func prepareAnimation() {
        nameLabel.transform = CGAffineTransform(translationX: view.bounds.width, y: 0).scaledBy(x: 3, y: 3).rotated(by: 180)
        bountyLable.transform = CGAffineTransform(translationX: view.bounds.width, y: 0).scaledBy(x: 3, y: 3).rotated(by: 180)
        
        nameLabel.alpha = 0		// alpha는 투명도. 투명도를 0에서 1로 바꿀거다.
        bountyLable.alpha = 0
    }
    
    private func showAnimation() {
    
/*        UIView.animate(withDuration: 1, delay: 0.2, usingSpringWithDamping: 0.6, initialSpringVelocity: 2, options: .allowUserInteraction, animations: {
            self.bountyLable.transform = CGAffineTransform.identity
            self.nameLabel.transform = CGAffineTransform.identity
            self.nameLabel.alpha = 1
            self.bountyLable.alpha = 1
        }, completion: nil)
이렇게 하면 nameLabel이랑 bountyLabel이 같이 움직인다. 따로 움직이려면 아래처럼 나눈다.*/

        UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.6, initialSpringVelocity: 2, options: .allowUserInteraction, animations: {
                self.nameLabel.transform = CGAffineTransform.identity
                self.nameLabel.alpha = 1
            }, completion: nil)
        
        UIView.animate(withDuration: 1, delay: 0.2, usingSpringWithDamping: 0.6, initialSpringVelocity: 2, options: .allowUserInteraction, animations: {
            self.bountyLable.transform = CGAffineTransform.identity
            self.bountyLable.alpha = 1
        }, completion: nil)
            
        UIView.transition(with: imgView, duration: 0.3, options: .transitionFlipFromLeft, animations: nil, completion: nil) 
    }