우리가 어플을 사용하다보면 빠질 수 없는게 애니메이션 효과다. 애니메이션 효과를 적용하는 방법과 원리에 대해서 공부를 해보았다!
출처 : Animation방법 - jinnify 기술 블로그
API
iOS에서 자주 사용하는 애니메이션은 크게 2가지다.
-
UIKit을 이용한 UIView의 API(저는 이거밖에 안써봤습니다..)
-
Core Animation을 이용한 API
오늘은 1번 애니메이션에 대해서만 알아보자.
원 글에 의하면 공식 문서에서는 UIViewPropertyAnimator 사용을 권장하고 있다고 한다. 이 글이 2019년 말 글이니까 아마 2021년인 지금은 권장하는 API를 더 많이 쓰지 않을까 싶다. 그래서 다음에는 저것도 공부해서 다뤄볼거다!
Animate
공부하기에 가장 좋은 것은 공식 문서라기에, 공식 문서부터 먼저 찾아보았다!
Delcaration
class func animate(withDuration duration: TimeInterval,
delay: TimeInterval,
options: UIView.AnimationOptions = [],
animations: @escaping () -> Void,
completion: ((Bool) -> Void)? = nil)공식 문서에있는 매서드는 이렇다. 근데 모든 파라미터들을 작성해줄 필요는 없다. 파라미터에 대해서 먼저 알아보고, 그 다음 여러가지 매서드들을 살펴보겠다.
Parameters
-
Duration
이 시간만큼 애니메이션이 동작한다. 단위는 초이고, 예를 들어withDuration : 1.0이면 애니메이션이 1초동안 동작한다. -
Delay
이 시간만큼 딜레이를 가진 다음에 애니메이션이 동작함. 이것도 역시 초단위다. -
Options
애니메이션에 다양한 옵션을 줄 수 있다. UIView.AnimationOptions 에 다양한 옵션들이 있다. 아래에서 더 자세히 설명할 것! -
Animations
Duration 동안 애니메이션이 동작하는 구간이라고 보면 된다. 절대 널 값이 올 수 없음!
(원문 : This block takes no parameters and has no return value. This parameter must not be NULL.) -
Completion
Duration 동안의 애니메이션이 끝나고 나서 동작하는 구간이다.
Methods
- animate(withDuration: animations:)
duration, animations를 파라미터로 받는 기본 매서드다.
class func animate(
withDuration duration: TimeInterval,
animations: @escaping () -> void
)- animate(withDuration: animations: completion:)
duration, animations를 파라미터로 받고 애니메이션이 완료되면 completion이 작동하는 매서드.
class func animate(
withDuration duration: TimeInterval,
animations: @escaping () -> Void,
completion: ((Bool) -> Void)? = nil
)이 매서드를 이용해서 크기와 사이즈를 바꾸는 애니메이션을 구현한 간단한 코드
var object = CGRect(x: 50, y: 150, width: 50, height: 50)
UIView.animate(withDuration: 2.0, animations: {
// duration동안 ( 이 코드에서는 2.0초) 애니메이션이 동작하는 구간.
object.frame = CGRect(x: 100, y: 400, width: 200, height: 200)},
// 좌표 (50,150)에서 (100,400)으로, size(50)에서 size(200)으로
completion: { finished in
// 애니메이션이 끝나고 나서 동작하는 구간
})AnimationOptions
자주 사용되는 옵션들만 정리해보았다.
나머지는 UIView.AnimationOptions 에서 확인하면 된다.
옵션들은 배열을 통해서 동시에 사용 가능!
-
static var allowUserInteraction: UIView.AnimationOptions
애니메이션 중에는 유저의 터치를 입력받지 않는데, 터치를 활성화하고 싶을 때 사용하는 옵션. -
static var repeat: UIView.AnimationOptions
무한으로 애니메이션을 반복하고싶을 때 사용하는 옵션. -
static var autoreverse: UIView.AnimationOptions
애니메이션을 반대로도 실행할 수 있게 해주는 옵션(repeat와 함께 사용해야함) -
static var curveEase(In, Out, InOut): UIView.AnimationOptions
In: 천천히 진행됐다가 진행되면서 조금씩 속도가 높아짐.
Out: 빠르기 진행됐다가 조금씩 속도가 줄어듦.
InOut: 천천히 시작 되면서 빠르게, 그러다가 다시 천천히 진행되면서 완료된다.
사용 예제
UIView.animate(withDuration:1.0,
delay: 0,
options: [.repeat, .autoreverse],
animations: ~~~
completion: nil)앞서 말했듯이 배열을 통해서 동시에 사용하면 된다.
.repeat, .autoreverse 이런식으로 작성한다.
