Swift ) SnapKit Animation ( AutoLayout, Animate )

 

디자인팀의 요구사항은, 올라왔다가 내려가는 Toast.

 

Frame으로 Animate하는거야 뭐 아주 쉽다.

그런데 Label의 줄 수에 따라 동적으로 높이가 변하는 Toast.

때문에 FrameBasedLayout이 아닌, AutoLayout을 사용한다.

 

AutoLayout Animate로 리서칭을 하였는데,

 

animate 밖에서 Constraint 수정하고, animate 안에서 layoutIfNeeded() 하기?

잘 안되면 setNeedsUpdateConstraints() 하기?

 

다 필요없다

 

animate 함수 안에 아래처럼만 해주면 된다.

 

갓갓 SnapKit..

( 진작에 SnapKit Animate로 검색할걸 ㅇㄴㅁㄹㄴㅁㅇㅁㄹㅁㄴ )

 

UIView.animate(withDuration: 1.0, delay: 0, options: .curveEaseOut, animations: {
	// 위로 올리기
    container.snp.updateConstraints {
    	$0.bottom.equalToSuperview().offset(-20)
    }
    container.superview?.layoutIfNeeded()
}

 

 

 

---

[ ToastManager의 애니메이션 부분 ]

UIView.animate(withDuration: 0.1, delay: 0, animations: {
	// 일단 밑에 레이아웃하기 위한 버퍼 애니메이션
	container.alpha = 1
},
completion: { _ in
	UIView.animate(withDuration: 1.0, delay: 0, options: .curveEaseOut, animations: {
	// 위로 올리기
		container.snp.updateConstraints {
			$0.bottom.equalToSuperview().offset(-20)
		}
		container.superview?.layoutIfNeeded()
	}, 
    completion: { _ in
		UIView.animate(withDuration: 1.0, delay: 2, options: .curveEaseOut, animations: {
		// 밑으로 내리기
		container.snp.updateConstraints {
			$0.bottom.equalToSuperview().offset(100)
		}
		container.superview?.layoutIfNeeded()
		}, 
        completion: { _ in
			container.removeFromSuperview()
		})
	})
})

---

 

 

 

 

---

[ 간략한 설명 시작 ]

 

3단 animate함수이다.

3개의 animate 모두 container라는 Toast 뷰를 움직인다.

 

 

1. 첫번째 animate 

container.snp.makeConstraints {
	$0.trailing.leading.equalToSuperview().inset(sideMargin)
	$0.bottom.equalToSuperview().offset(100)
}

 

처음에 레이아웃 하는 과정이 필요한데,

( 처음에 레이아웃하고, 그다음에 올리고 내려야하니까. )

 

이 코드를 실행한 직후, AutoLayout을 설정해 줬다고 해서,

그 순간에 바로 뷰가 레이아웃 되는게 아니다.

( debug로 bounds이나 frame 찍어보면 알 수 있다. )

 

다른 뷰컨에서 아무때나 호출해서 사용하는 ToastManager 특성상,

Life Cycle 함수들을 사용할 수 없기 때문에, 

animate를 활용해서 레이아웃 했다.

 

그게 첫번째 애니메이션의 역할이다.

 

첫번째 애니메이션이 실행되면서,

container은 화면 아래 안보이는 곳에 레이아웃 된다.

 

 

2. 두번째 animate

container을 위로 올린다

 

 

3. 세번째 animate

container을 내린다

 

-끝-

 

---

delay 매개변수.. 직관으로는 "애니메이션이 완료된 후 얼마나 유지할거냐?" 인줄 알았는데..

"얼마나 있다가 애니메이션을 실행할거냐?" 였다..

저거 때문에 한 30분 더 버렸네 ㄹㅁㄴㅇㄴㅁ