Animate Method

Animate View

• UIView 클래스 중 다음 속성들은 애니메이션 효과를 줄 수 있음
• frame
• bounds
• center
• transform
  • Rotate : 객체 회전
  • Scale : 객체 크기 조정
  • Translate : 객체 변환
  • Skew : 객체 기울이기

• alpha
• backgroundColor

    Timing Function

• 애니메이션의 간격 동안 속성 값의 변화 속도를 제어하는 데 사용
• Ease-In (가속): 이 함수는 애니메이션이 시작할 때 느리게 시작하고, 시간이 흐를수록 가속하는 형태를 가짐. 오브젝트가 처음에 움직이기를 더 어렵게 만들며, 점차적으로 빨라짐.
• Ease-Out (감속): 이 함수는 애니메이션이 빠르게 시작하고, 시간이 흐를수록 감속하는 형태를 가짐. 오브젝트가 처음에 움직이기를 쉽게 만들며, 점차 느려짐
• Ease-In-Out (가속-감속): 이 함수는 애니메이션이 시작할 때 느리게 시작하고, 중간에는 가속하고, 다시 끝날 때 느리게 끝나는 형태를 가짐. 이것은 일반적으로 부드럽고 자연스러운 애니메이션 효과를 만들 때 사용됨.
• Linear (선형): 이 함수는 애니메이션 동안 일정한 속도로 움직임. 시간과 상관없이 속성 값이 일정하게 변함.
• Spring (스프링): 이 함수는 스프링처럼 튕기는 효과를 가지며, 애니메이션을 부드럽게 시작하고 끝냄.
• Custom (사용자 정의): 사용자가 직접 정의한 타이밍 함수도 사용할 수 있음. 이 때, 원하는 속도 곡선을 정확하게 제어할 수 있음.

animate(withDuration:delay:options:animations:completion:)

class func animate(
    withDuration duration: TimeInterval,
    delay: TimeInterval,
    options: UIView.AnimationOptions = [],
    animations: @escaping () -> Void,
    completion: ((Bool) -> Void)? = nil
)

• UIView의 메소드
• duration : 총 애니메이션 지속 시간(초 단위). 음수나 0 입력 시 애니메이션 효과가 없음
• delay : 애니메이션 시작 전 대기 시간(초 단위). 0 입력 시 바로 애니메이션 시작
• options : 애니메이션 동작 방법 선택 가능. 
• 🍎 참고 링크 - UIView.AnimationOptions
• animations : 실질적인 뷰에 변경 내용을 입력. 반환값이 없는 클로저 형태가 들어가야함. NULL 불가능
• completion : 애니메이션이 끝난 후 실행 할 블록. Bool 타입을 매개변수로 받는 반환값이 없는 클로저 형태가 들어감. NULL 가능

---

별개로 새로운 메서드가 출시되어서 링크만 첨부

🍎 참고 링크 - animate(springDuration:bounce:initialSpringVelocity:delay:options:animations:completion:)

🍎 참고 링크 - What’s new in UIKit - WWDC23 - Videos

 

animateKeyframes(withDuration:delay:options:animations:completion:)

class func animateKeyframes(
    withDuration duration: TimeInterval,
    delay: TimeInterval,
    options: UIView.KeyframeAnimationOptions = [],
    animations: @escaping () -> Void,
    completion: ((Bool) -> Void)? = nil
)

• animate 메서드와 달리 Keyframe 기반으로 애니메이션을 설정
• animate 메서드와 달리 비동기 메서드로 호출이 가능함
• -> swift concurrency 가능

class func animateKeyframes(withDuration duration: TimeInterval, delay: TimeInterval, options: UIView.KeyframeAnimationOptions = [], animations: @escaping () -> Void) async -> Bool

• animations 블록 내에 addKeyframe 메서드를 한번 이상 호출 하여 여러 애니메이션 동작 설정이 가능
• -> 여러 개의 Keyframe을 사용할 수 있기 때문에 보다 복잡한 동작을 할 수 있음
• → 여러 애니메이션을 호출할 때 콜백 지옥에 빠지지 않을 수 있다는 장점이 존재
• → animations 블록 내에 addKeyframe을 추가하지 않으면 animate 메서드와 차이가 없다는 것!

// 여러 애니메이션 효과를 줄 때 콜백지옥
UIView.animate(withDuration: 0.5, animations: {
            //code1
        }, completion: { (_) in
            UIView.animate(withDuration: 0.5, animations: {
                //code2
            }, completion: { (_) in
                UIView.animate(withDuration: 0.5, animations: {
                    //code3
								...
                })
        })
})

// animateKeyframes를 사용하여 해결
UIView.animateKeyframes(withDuration: 4.0, delay: 0, options: [], animations: {
	UIView.addKeyframe (withRelativeStartTime: 0.0, relativeDuration: 0.25) { //code1 } 
	UIView.addKeyframe (wi thRelativeStartTime: 0.25, relativeDuration: 0.25 { //code1 }  
	UIView.addKeyframe(withRelativeStartTime: 0.50, relativeDuration: 0.25) { //code1 }  
	UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) { //code1 } 
}, completion: nil)

addKeyframe(withRelativeStartTime:relativeDuration:animations:)

class func addKeyframe(
    withRelativeStartTime frameStartTime: Double,
    relativeDuration frameDuration: Double,
    animations: @escaping () -> Void
)

• animateKeyframe 메서드에 들어가는 단일 프레임에 대한 애니메이션 값 지정
• 3가지의 매개변수를 갖음
• 이때 변수 시간값은 animateKeyframe의 매개변수 중 duration(전체 애니메이션 지속 시간)과 상대적인 값으로 계산됨
  • frameStartTime : 해당 frame의 애니메이션 시작 시간. (원하는 delay 시간) / (전체 애니메이션 지속 시간)
  • frameDuration : 해당 frame의 애니메이션 지속 시간. (원하는 지속 시간) / (전체 애니메이션 지속 시간)
  • animations : 실질적인 뷰에 변경 내용을 입력. 반환값이 없는 클로저 형태가 들어가야함. NULL 불가능

---

참고링크

🍎 참고 링크 - animate(withDuration:delay:options:animations:completion:)

🍎 참고 링크 - animateKeyframes(withDuration:delay:options:animations:completion:)

📒 참고 링크 - https://zeddios.tistory.com/636

📒 참고 링크 - https://jinnify.tistory.com/67