애니메이션

 1. 애니메이션

UI 상태의 변화를 시간의 흐름에 따라서 시각적으로 표현하는 것.
자연스러운 애니메이션은 앱의 완성도, 직관성, 사용성을 높여줌
솔직히 잘 쓰면 있어보이는 효과를 얻을 수 있음.....ㅎ

왜 중요한가?

사용자에게 피드백을 제공함으로써 동작을 이해시키고
앱의 전환과 흐름을 부드럽게 만듦

 2. 스프링 애니메이션

탄성이나 마찰같이 물리적인? 것들을 기반하는 모델을 구현한(?) 애니메이션
애플의 기본 애니메이션 API에서도 지원 (UIView.animate 사용 시에)

예시

UIView.animate(
    withDuration: 0.6,
    delay: 0,
    usingSpringWithDamping: 0.7,
    initialSpringVelocity: 1.0,
    options: [],
    animations: {
        self.myView.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
    }
)

파라미터

파라미터	설명
usingSpringWithDamping	1에 가까울수록 덜 튐
initialSpringVelocity	시작 속도 (높을수록 빠르게 시작)

 3. 애니메이션 커브

애니메이션의 속도 변화 곡선
시각적 리듬을 설정할 수 있음

커브 종류

커브 종류	설명
.easeIn	느리게 시작, 빠르게 끝남
.easeOut	빠르게 시작, 느리게 끝남
.easeInOut	양쪽 천천히
.linear	일정한 속도로 진행

예시

UIView.animate(
    withDuration: 0.4,
    delay: 0,
    options: [.curveEaseOut],
    animations: {
        self.myView.alpha = 0
    }
)

 4. 커스텀 트랜지션

뷰 컨트롤러 간 전환에 나만의 애니메이션 효과 적용.
기본 전환 효과 대신 직접 구현 가능.

예시

class CustomAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.3
    }

    func animateTransition(using context: UIViewControllerContextTransitioning) {
        guard let toView = context.view(forKey: .to) else { return }
        context.containerView.addSubview(toView)
        toView.alpha = 0
        UIView.animate(withDuration: 0.3, animations: {
            toView.alpha = 1
        }) { _ in
            context.completeTransition(true)
        }
    }
}

 5. Lottie 애니메이션

벡터 애니메이션을 앱에 삽입하는 라이브러리
가볍고 해상도 독립적

예시

import Lottie

let animationView = LottieAnimationView(name: "success")
animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
animationView.center = view.center
animationView.loopMode = .playOnce
animationView.play()
view.addSubview(animationView)

 6. UIViewPropertyAnimator

정밀 제어 가능한 애니메이션 컨트롤러
→ 중단/재개, 진행률 수동 조정 (인터랙티브 애니메이션)

기본 사용

let animator = UIViewPropertyAnimator(duration: 0.5, curve: .easeInOut) {
    self.myView.alpha = 0
}
animator.startAnimation()

진행률 조절

animator.pauseAnimation()
animator.fractionComplete = 0.3 // 30% 진행 상태로 설정

 7. Stop 애니메이션과 피니시 상태

애니메이션이 끝났을 때의 정지 상태 표현
단순 멈춤이 아니라 pulse 효과로 피드백을 주는 것
pause, stop, finish 상태 구분 필요함

 8. Auto Layout 애니메이션

레이아웃 변경 할 때 layoutIfNeeded()를 사용해서 애니메이션 적용

예시

self.topConstraint.constant = 100
UIView.animate(withDuration: 0.3) {
    self.view.layoutIfNeeded()
}

개념	설명	키워드
스프링 애니메이션	탄성감 있는 UI 변화	usingSpringWithDamping
커브 애니메이션	시간에 따른 속도 조절	.easeInOut, .linear
커스텀 트랜지션	화면 전환 애니메이션 직접 구현	UIViewControllerAnimatedTransitioning
Lottie	벡터 기반 고퀄리티 애니메이션	LottieAnimationView
Property Animator	애니메이션 상태 수동 제어	pause(), fractionComplete
Stop 애니메이션	종료 후 효과 또는 상태	pulse, finish, inactive 상태
AutoLayout 애니메이션	제약조건 기반 UI 변화	layoutIfNeeded()

---

아 너무 내스타일임ㅁ
너무 재밌음

그냥 가지고 놀아보는 중. ing