Animation 1 - UIView Animation

Animation 구현

iOS에서 보통 Animation을 구현할때 방법 크게 두가지 방법이 존재한다.

1. UIView의 Animaition 관련 api

2. Core Animation을 이용한 api

이번 블로그에서는 UIView의 Animaition 관련 api들을 알아보려고 한다

 

UIView Animation Api

UIView Animation Api를 이용하여 애니메이션을 만들때에 OS 버전별로 두가지 방법이 존재한다

1. UIView.animate() 메소드

2. UIViewPropertyAnimator 클래스

 

 

UIView.animate()

애니메이션이 가능한 프로퍼티 : frame, bounds, center, transform, alpha, backgroundColor

애니메이션이 실행되는 동안에는 유저와 인터렉션이 막힌다

지속시간, 애니메이션의 옵션(타이밍 함수 등), 완료핸들러등을 메소드의 각 인자로 분리하고, 애니메이션이 가능한 프로퍼티들의 변경사항을 클로저안에 작성 (그림1)

(그림1) animatable property animation

반면 Auto Layout의 Constraint 속성은 Animatable한 built-in animation 속성이 아니기 때문에 layoutIfNeeded라는 메소드의 호출로 그 즉시 값을 반영하는 작업을 해주는 수동으로 반드시 해주어야 한다. layoutIfNeeded 메소드로 frame이 동기적으로 즉시 변경됨에따라 애니메이션 시스템은 frame의 마지막 상태를 알수있기 때문! (그림2)

(그림2)

애니메이션은 뷰의 시작상태와 끝 상태를 프로그래머가 이미 알고 있으므로 지속시간과 타이밍 곡선을 이용하여 그 중간 상태의 값들을 계산하면 중첩된(nested) 애니메이션 구조를 통해 중간 프레임들을 만들어 화면에 표현할 수 있다.(그림3)

(그림3)

하지만 중첩이 늘어날수록 가독성이 떨어지기에 이럴때는 UIView.animate()대신 UIView.animatekeyframes() 사용하여 시간 순서대로 애니메이션을 동작시킬수 있다 (그림4)

(그림4)

 

UIViewPropertyAnimator

UIView.animate()는 사용자의 입력과 상호작용하는 애니메이션을 작성하는데 한계를 극복하고자 iOS 10부터 UIViewPropertyAnimator 도입되었다

기존의 UIView.animate()와 같이 지속시간과 타이밍 곡선 그리고 애니메이션의 내용을 담은 클로저를 기반으로 생성하나, 애니메이션이 시작되었을 때, 이를 일시정지나 중단할 수 있고, 역방향으로 되감거나 특정 위치로 옮겨가는 등의 동작을 처리할 수 있게 해준다.

기본적으로 정의와 실행을 분리할수 있다(그림1)

// 애니메이션 정의 및 즉시실행 
UIViewPropertyAnimator
	.runningPropertyAnimator(withDuration: duration, delay: 0, options: [.curveEaseInOut]) { 
    	self.sampleView2.frame = .init(x: 100, y: 300, width: 150, height: 200) 
    } 
    
// 방법2: 애니메이션 정의, 실행 분리
// 정의
let animation = UIViewPropertyAnimator(duration: duration, curve: .easeInOut) { 
	self.sampleView2.frame = .init(x: 100, y: 300, width: 150, height: 200) 
} 
// 실행
animation.startAnimation()

이외에 제공되는 api를 통해 애니메이션이 완료되기 전까지 동적으로 애니메이션을 수정할 수 있다.

=> Start, pause, resume, and stop animations; see the methods of the UIViewAnimating protocol.

 

 

 

 

 

 

참고자료

https://developer.apple.com/documentation/uikit/uiviewpropertyanimator

https://developer.apple.com/documentation/uikit/uiview/1622418-animate

https://nsios.tistory.com/167

https://jongwonwoo.medium.com/%EC%99%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EB%B8%94%EB%9F%AD%EC%97%90%EC%84%9C-layoutifneeded%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-6ac5280855e1

https://soooprmx.com/ios%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8A%94-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EA%B5%AC%ED%98%84-%EA%B8%B0%EB%B2%95%EB%93%A4%EC%97%90-%EB%8C%80%ED%95%9C/

https://jinnify.tistory.com/66?category=804637

https://developer.apple.com/documentation/uikit/uiviewpropertyanimator