SnapKit + Animation

Hose KIM·2020년 12월 23일
0

iOS 개발

목록 보기
2/4

iOS autolayout 라이브러리인 Snapkit을 이용해서 Animation을 쉽게 구현할 수 있다.

사용방법은 간단하다.

먼저 기본화면을 구성한다.

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    let label: UILabel = {
        
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.textAlignment = .center
        label.text = "Label"
        label.backgroundColor = .blue
        label.textColor = .white
        return label
    }()
    
    
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setLayout()
    }
    
    func setLayout() {
        self.view.addSubview(label)
        label.snp.makeConstraints { ( make ) in
            make.width.equalTo(200)
            make.height.equalTo(50)
            make.centerX.equalTo(view.snp.centerX)
            make.centerY.equalTo(view.snp.centerY)
        }
    }
    
    
}

Label을 움직이려면 View Controller의 LifeCycle를 알아야하는데 여기서 간단히 언급하고 가자면

init - > loadView -> viewDidLoad -> viewWillAppear -> viewDidAppear -> viewWillDisapper -> viewDidDisappear -> viewDidUnload

방대한 양이라 자세한 건 생락하겠지만, 보통 애니메이션에 대한 것은 viewDidAppear에서 선언한다고 보면 된다.

이제 Snapkit을 이용한 애니메이션을 구현해본다.

 func updateView_() {
        label.snp.remakeConstraints{ ( make ) in
            make.width.equalTo(200)
            make.height.equalTo(50)
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top).inset(15)
            make.leading.equalTo(view.snp.leading).inset(20)
        }
    }

Label을 어떻게 업데이트할 지 코드를 작성한다. 이 때, remakeConstraints와 updateConstraints 가 있는데, updateConstaraints를 사용할 때, label에 처음 constarints 건 것만을 사용해야한다.

예를 들면, setLayout()에서 width, height, centerX,centerY에 constaraints를 걸었는데

아래 코드처럼 updateConstraints() 사용하게 된다면

func updateView_() {
        label.snp.updateConstraints{ ( make ) in
            make.width.equalTo(200)
            make.height.equalTo(50)
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top).inset(15)
            make.leading.equalTo(view.snp.leading).inset(20)
        }
    }

다음과 같은 Error를 발생시킨다.

그래서 remakeConstaraint()를 사용하고, 아래 코드를 추가하자

func startAnimation(){
        
        updateView_()
        
        UIView.animate(withDuration: 3, delay: 1, options:.curveEaseOut, animations: {
            
            self.view.layoutIfNeeded()
            
        }, completion: nil)
    }

startAnimation()은 updateView()를 통해, (결과) 뷰가 이렇게 바뀔거에요. 라고 말해주고,
UIView.animate()를 통해 애니메이션을 진행한다.
이 때 animation안에 self.view.layoutIfNeeded()를 선언 해줘야한다.
self.view.layoutIfNeeded()는 constraints의 변경을 self.view에서 업데이트 해주는 것이다.

마지막으로 다음과 같이 코드를 작성해주면 완성

override func viewDidAppear(_ animated: Bool) {
        startAnimation()
    }

0개의 댓글