[Swift] Animation

1. 사용 목적(개인적인 생각입니다)

- 딱딱한 앱에서 벗어나기 위해

- 시각적인 효과를 통한 이목 집중

 

2. 코드

- 움직일 대상(코드에선 Label)의 Outlet을 미리 선언해야 한다

- view가 Load 되자마자 애니메이션을 수행하기 위해 viewDidLoad() 함수를 Override한다 

- view가 나타난 이후 수행될 애니메이션은 viewDidAppear()의 함수를 Override해서 애니메이션을 설정한다

//Outlet 설정
@IBOutlet weak var nameLabelCenterX: NSLayoutConstraint!
@IBOutlet weak var bountyLabelCenterX: NSLayoutConstraint!


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
        
        //심화버전 -> 회전하면서 들어온다
        nameLabel.transform = CGAffineTransform(translationX: view.bounds.width, y: 0).scaledBy(x: 3, y: 3).rotated(by: 180)       
        bountyLabel.transform = CGAffineTransform(translationX: view.bounds.width, y: 0).scaledBy(x: 3, y: 3).rotated(by: 180)
        //투명도 설정
        nameLabel.alpha = 0
        bountyLabel.alpha = 0
}
    
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)
    */
    
    //이름 라벨 투명도 0->1로 전환 및 기타 설정
    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)
    
    //가격 라벨 투명도 0->1로 전환 및 기타 설정
    UIView.animate(withDuration: 1, delay: 0.2, usingSpringWithDamping: 0.6, initialSpringVelocity: 2, options: .allowUserInteraction, animations: {
        self.bountyLabel.transform = CGAffineTransform.identity
        self.bountyLabel.alpha = 1
    } , completion: nil)
            
    
    //UIImage도 애니메이션 적용(360도 뒤집기)
    UIView.transition(with: imgView, duration: 0.3, 
    options: .transitionFlipFromLeft, animations:{ self.view.layoutIfNeeded()},
    completion: nil)
}