[32일차] Animation은 왜 사용하는 것인가?

사용자의 앱 서비스 이용과정에서 보다 재미있게 느껴지도록 하기 위해서 'Animation' 효과를 사용하기도 한다.

그렇다면 'Animation(애니메이션)' 이라는 것은 무엇일까?

 

한마디로 표현하자면, "시간에 따라 뷰의 상태가 바뀌는 것"이다.

 

Animation은 3가지만 기억하면 된다. 

Animation = 시작, 끝, 시간(주기)

 

대표적으로 위와 같이 단순히 ImageView, Label 들이 Transition(회전), usingSpringWithDamping(스프링) 효과를 사용하여

역동적으로 보여질 수도 있다.

    override func viewDidLoad() {
        super.viewDidLoad()
        updateUI()
        prepareAnimation()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        showAnimation()
    }
    
    private func prepareAnimation() {
        // 레이아웃 영역 밖으로 보이지 않게 처리
        nameLableCenterX.constant = view.bounds.width
        bountyLabelCenterX.constant = view.bounds.width
    }
    
    private func showAnimation() {
        nameLableCenterX.constant = 0
        bountyLabelCenterX.constant = 0
        
        // layoutIfNeeded() : 지금 당장 업데이트 해줘!
        // setNeedsLayout() : 다음 업데이트 때 기다릴께
        
        // usingSpringWithDamping : 스프링 효과 옵션
        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: {
            self.view.layoutIfNeeded()
        }, completion: nil)
        
    }

 

위의 코드에서 일반적으로 착각할 수 있는 부분이 있다.

viewDidLoad() 함수가 호출될 때, View가 보이는 것이 완료된 것으로 알고 있는 경우가 많다. 

하지만 이는 올바르지 않다.

 

viewDidAppear() 함수가 호출될 때, 비로소 View가 보이는 것이 완료된 것이다.

그렇다면 viewDidLoad() 함수가 의미하는 것은 무엇일까?

 

viewDidLoad()는 메모리 상에서 View에 출력할 준비가 완료되었음을 의미하는 것이다.

<Swift 공식 사이트 설명>

"Called after the controller'€™s view is loaded into memory"

: 뷰의 컨트롤러가 메모리에 로드되고 난 후에 호출됩니다.

 

위 예제코드를 요약하자면, viewDidLoad() 에서 Label 영역(이름, 현상금)의 위치 값을 디바이스의 가로 크기만큼 설정하여화면상에서 보이지 않도록 설정한다.

 

viewDidAppear() 에서는 위치 값을 0으로 초기화하였고, 해당 과정에서 animate() 함수를 이용하여 스프링 애니메이션 효과를 주었다.추가로 ImageView에 transition() 함수로 회전 효과를 표현하였다.