이번 포스트에서는 애니메이션 효과와 함께 뷰(View)의 배경색을 변경하는 방법을 알아보겠습니다.
예제는 간단합니다. 버튼을 클릭할 때마다 배경색이 빨간색 → 파란색 → 빨간색으로 번갈아 전환되도록 구현할 것입니다.
프로젝트 설정
1단계 — 프로젝트 생성
Xcode를 실행한 뒤 New Project → Single View Application을 선택하고, 프로젝트 이름을 ChangeBGColor로 지정합니다.
2단계 — 버튼 추가
Main.storyboard를 열고 아래 이미지와 같이 버튼을 하나 추가합니다.
3단계 — IBAction 연결
'Change Background' 버튼의 touchUpInside 이벤트에 @IBAction을 연결하고, 함수 이름은 changeBackgroundClicked로 지정합니다.
애니메이션 코드 작성
4단계 — UIView.animate 활용
배경색 변경에는 UIView가 제공하는 animate 함수를 사용합니다. 이 함수는 애니메이션 지속 시간(duration)과 선택적으로 완료 시 호출될 completion 핸들러를 매개변수로 받습니다.
changeBackgroundClicked 함수 안에서 현재 배경색이 빨간색이면 파란색으로, 그렇지 않으면 빨간색으로 전환하도록 아래 코드를 작성합니다.
@IBAction func changeBackgroundClicked(_ sender: Any) {
if self.view.backgroundColor == UIColor.red {
UIView.animate(withDuration: 2) {
self.view.backgroundColor = UIColor.blue
}
} else {
UIView.animate(withDuration: 2) {
self.view.backgroundColor = UIColor.red
}
}
}실행 결과 확인
5단계 — 앱 실행 및 테스트
코드를 실행한 뒤 'Change Background Color' 버튼을 클릭해 보세요. 뷰의 배경색이 빨간색과 파란색 사이에서 부드러운 애니메이션 효과와 함께 전환되는 것을 확인할 수 있습니다.
