들어가며

앱을 개발 하던 중 유려한 애니메이션 효과나 부드러운 화면 구성을 위해 애니메이션 효과를 넣고 싶어졌다. UIkit을 주로 사용 했었지만 빠르고 쉬운 애니메이션 효과는 SwiftUI로 작업을 하는 것이 좋다는 GPT의 고견에 따라 우선 SwiftUI를 통해 List (Tabel view)로 여러 애니메이션 효과를 나열하고 그걸 누르면 애니메이션 효과를 나타내는 방식으로 개발 해보았다.

SwiftUI : 빠르고 쉬운 애니메이션 구현이 가능하며, 선언적 코드 스타일로 직관적입니다. 간단한 애니메이션에 적합하며, 최신 SwiftUI 기능을 활용하려는 경우에 추천합니다.

UIKit : 더 복잡하고 세밀한 애니메이션에 적합하며, 레거시 프로젝트나 세밀한 UI 컨트롤이 필요할 때 유용합니다.

애니메이션의 종류

애니메이션은 크게 4종류로 분류 할 수 있다. 아래는 그 종류를 간략히 설명한 글이다.

Scale 효과

오브젝트의 크기가 커지거나 확대 되는 효과를 표현 할 수 있는 효과이다.

 Circle()
 .frame(width: 100, height: 100)
 .foregroundColor(.red)
 .scaleEffect(scale)
 .animation(.easeInOut, value: scale)

간단하게 원형의 구 오브젝트를 만들고 scaleEffect를 통해 원의 크기를 조절 한다. 버튼을 통해 커지고 작아지게 했음으로 버튼 코드에 크기 효과를 넣는다.

   Button("Toggle Scale") {
   // 스케일 변경
   scale = scale == 1.0 ? 1.5 : 1.0
   }

그리고 애니메이션 효과로 부드럽게 커지는 효과를 적용 한다.

.animation(.easeInOut, value: scale)

이렇게 하면 부드럽게 커지고 작아지는 애니메이션 효과가 완성 된다.

Rotate 효과

오브젝트를 회전 하거나 돌릴 수 있는 효과이다.

Rectangle()
.frame(width: 100, height: 100)
.foregroundColor(.red)
.rotationEffect(.degrees(rotate))
.animation(.easeInOut, value: rotate)

사각형을 만들고 rotationEffect를 통해 돌아가는 효과를 적용 한다. 그리고 위와 마찬가지로 animation을 적용 하여 부드럽게 처리 한다.

Button("Toggle Rotate") {
rotate = rotate == 0 ? 60 : 0
}

버튼을 눌렀을 때 60도로 돌아가는 뷰를 구현 하였다.

Fade 효과

오브젝트가 자연스럽게 흐려지거나 사라지는 효과이다.

Circle()
.frame(width: 100, height: 100)
.foregroundColor(.red)
.opacity(opacity)
.animation(.easeInOut, value: opacity)

이번엔 opacity 효과를 통해 서서히 사라지는 효과를 만들었다. 이 또한 그 후 animation을 적용하여 자연스러운 효과를 구성 한다.

opacity = opacity == 1.0 ? 0.3 : 1.0

Move 효과

오브젝트의 위치를 이동할 수 있는 효과이다.

Circle()
.frame(width: 100, height: 100)
.foregroundColor(.red)
.offset(x: move, y: 0)
.animation(.easeInOut, value: move)

이번엔 offset을 통해 위치를 옮기고 animation을 통해 자연스럽게 구현한다.

 Button("Toggle Move") {
 move = move == 0 ? 100 : 0
 }

위치 값을 조정 하여 오브젝트를 옮긴다.

마치며

간단하게 4가지 대표적인 효과를 알아보았다. 순차적으로 구현하는 법을 생각해보면 우선 효과를 적용 하고 그 효과를 animation을 통해서 부드럽게 구현 하는 것이라고 생각 할 수 있겠다. 매우 간단하고 직관적으로 구현 할 수 있지만 추가적으로 UIKit을 통해 좀 더 디테일 하게 조정 하는 법도 공부 하면 좋겠다는 생각이 들었다.

좀 더 자연스럽고 실제 세계와 비슷한 숨쉬는 것 같은 앱을 위해 디테일을 더 해보는 방법을 꾸준히 알아보자.