모바일 개발의 애니메이션: 정의, 유형 및 사용 방법

Android의 애니메이션: Property Animation 및 View Animation

Android는 두 가지 주요 애니메이션 시스템을 제공합니다: View Animation(레거시) 및 Property Animation(현대). View Animation(또는 Tween Animation)은 시각적 표현에만 작동합니다 — 뷰의 표시를 변경하지만 실제 속성은 변경하지 않습니다(예: 클릭 좌표는 그대로 유지됨). Android 3.0에서 도입된 Property Animation은 Animator(ValueAnimator, ObjectAnimator 또는 AnimatorSet)를 통해 객체의 실제 속성을 변경합니다.

ObjectAnimator 및 ValueAnimator

ObjectAnimator는 Property Animation의 가장 인기 있는 클래스입니다. 지정된 Interpolator를 사용하여 지정된 시간 동안 객체의 특정 속성(예: translationX, alpha, scaleY)을 애니메이션화합니다.

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator는 특정 객체에 바인딩되지 않습니다 — 모든 속성 또는 사용자 정의 로직에 사용할 수 있는 값을 생성합니다.

View Animation 및 XML 애니메이션

View Animation은 XML 파일 res/anim/에 설명됩니다. scale, translate, rotate, alpha의 네 가지 유형이 지원됩니다. 단점은 애니메이션이 View의 실제 매개변수를 변경하지 않는다는 것입니다. 간단한 효과(깜박임, 회전)의 경우 View Animation이 여전히 적용 가능하지만, 새 프로젝트의 경우 Property Animation이 권장됩니다.

Jetpack Compose의 애니메이션

Jetpack Compose는 최신 애니메이션 API를 제공합니다: animateAsState, Animatable, AnimatedVisibility 및 AnimatedContent. Compose의 애니메이션은 반응형입니다: 상태가 변경되면 애니메이션이 자동으로 시작됩니다.

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

iOS의 애니메이션: Core Animation 및 UIView.animate

iOS는 Core Animation — CALayer로 작동하는 저수준 프레임워크를 기반으로 하는 강력한 애니메이션 스택을 제공합니다. UIKit은 편리한 UIView.animate 및 UIViewPropertyAnimator 메서드로 Core Animation 위에 구축됩니다.

UIView.animate

UIView.animate는 iOS에서 애니메이션을 만드는 가장 간단한 방법입니다. frame, alpha, transform, backgroundColor 및 기타 UIView 속성을 애니메이션화할 수 있습니다.

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — 물리적 애니메이션을 위한 프레임워크: 중력, 충돌, 스프링, 인력. 수동 물리 계산 없이 사실적인 객체 동작을 만들 수 있습니다. 사용자 정의 전환, 애니메이션 메뉴 및 게임 요소에 사용됩니다.

CAAnimation 및 Core Animation

Core Animation(CAAnimation, CABasicAnimation, CAKeyframeAnimation) — CALayer 애니메이션을 위한 저수준 API. 3D 변환, 경로 애니메이션(키프레임), 마스킹 및 구성을 지원합니다. SwiftUI는 animation 및 withAnimation 수정자를 통해 내부적으로 Core Animation을 사용합니다.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

대부분의 iOS 프로젝트에서는 SwiftUI와 내장 애니메이션이 사용됩니다. 예를 들어, withAnimation은 상태 변경을 애니메이션 컨텍스트에 래핑합니다.

벡터 애니메이션: Lottie 및 Rive

복잡한 애니메이션(캐릭터, 전환, 로더)을 코드로 구현하는 것은 어렵습니다. Lottie 및 Rive는 디자이너가 비주얼 편집기에서 애니메이션을 만들고 개발자가 기성 컴포넌트로 앱에 삽입할 수 있도록 하여 이 문제를 해결합니다.

Lottie

Lottie — Airbnb(현재 LottieFiles)의 라이브러리로, JSON 형식으로 내보낸 Adobe After Effects 애니메이션을 렌더링합니다. Android, iOS, Flutter, React Native 및 Web에서 지원됩니다. Lottie 애니메이션은 벡터 방식이며 품질 손실 없이 확장 가능하고 프로그래밍 방식으로 사용자 정의할 수 있습니다(속도, 진행률, 색상).

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive(이전 2Dimensions) — 벡터 애니메이션을 위한 고급 도구입니다. Lottie와 달리 Rive는 대화형 애니메이션(상태, 트리거, 전환)을 지원합니다. 애니메이션은 Rive Editor에서 생성되고 앱에서 State Machine을 통해 제어됩니다. Rive는 게임 인터페이스, 애니메이션 아이콘 및 피드백이 있는 복잡한 전환에 적합합니다.

IT Sectr에서는 장식용 애니메이션(로더, 성공적인 작업, 빈 상태)에 Lottie를 사용하고 온보딩 화면의 대화형 요소에 Rive를 사용합니다. 이는 UIKit 또는 Canvas에서 수동 구현에 비해 애니메이션 개발 시간을 60% 단축합니다.

Shared Element Transition 및 Hero Animation

Shared Element Transition — 요소(이미지, 텍스트, 카드)가 화면 간 전환 시 부드럽게 이동하고 변형되는 애니메이션입니다. 이는 연속성의 환상을 만듭니다: 사용자는 새 화면으로 "이동"하지 않고 요소로 "빠져듭니다".

Android Shared Element Transition

Android에서 전환은 ActivityOptionsCompat 및 transitionName 속성을 통해 구현됩니다. FragmentTransaction은 Activity 내 전환을 위해 addSharedElement를 지원합니다. Compose는 SharedContentState와 함께 SharedTransitionLayout을 사용합니다.

iOS Hero Transition

iOS에는 내장 Hero Transition이 없지만 Hero 라이브러리(Luke Zhao 제작)가 UIKit에서 이 패턴을 구현합니다. 두 화면의 요소에 id를 할당하기만 하면 Hero가 자동으로 부드러운 전환을 만듭니다. SwiftUI에서는 전환 애니메이션이 NavigationStack 및 matchedGeometryEffect를 통해 내장되어 있습니다.

Flutter Hero

Flutter에는 tag 매개변수가 있는 내장 Hero 위젯이 있습니다. 두 페이지에 동일한 tag의 Hero가 포함되어 있으면 Flutter가 자동으로 그 사이의 전환을 애니메이션화합니다. 이는 모바일 애플리케이션에서 복잡한 애니메이션을 구현하는 가장 간단한 방법 중 하나입니다.

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator 및 Easing

애니메이션을 자연스럽게 보이게 하기 위해 속도 곡선이 사용됩니다 — Android에서는 Interpolator, iOS에서는 Easing. 이들은 애니메이션 속도가 시작부터 끝까지 어떻게 변하는지 결정합니다.

Android Interpolator

Android는 여러 내장 Interpolator를 지원합니다: LinearInterpolator(균일), AccelerateDecelerateInterpolator(느림-빠름-느림), FastOutSlowInInterpolator(Material Design), OvershootInterpolator(오버슈트), BounceInterpolator(바운스). 사용자 정의 Interpolator는 XML 또는 TimeInterpolator 클래스를 통해 만들 수 있습니다.

Spring Animation

Spring Animation(스프링 애니메이션)은 감쇠(damping) 및 강성(stiffness) 매개변수로 스프링 물리학을 모델링합니다. 감쇠 0 — 무한 진동, 1 — 진동 없음. 강성은 복귀 속도를 결정합니다. Spring Animation은 iOS(UISpringTimingParameters가 있는 UIViewPropertyAnimator), Android(physics2의 SpringAnimation) 및 SwiftUI(spring())에서 사용할 수 있습니다.

Android의 Spring Animation 문서에는 자세한 구성 예제가 포함되어 있습니다.

타임라인 애니메이션

Timeline(타임라인) — 애니메이션을 시간이 지남에 따라 프레임으로 분할하는 접근 방식입니다. AnimationSet 또는 그룹 애니메이션이 충분히 유연하지 않은 복잡한 시퀀스에 사용됩니다. Android는 AnimatorSet, iOS는 CAAnimationGroup, Flutter는 AnimationController의 Interval을 지원합니다.