[iOS] Keyframe Animation으로 애니메이션 구현하는 방법

순차적으로 애니메이션이 실행되어야 한다면 아래와 같이 UIView Animation 을 중첩하여 구현할 수 있습니다.

 

UIView.animate(withDuration: 1.0, animations: {
    self.animate1()
}, completion: { finished in
    UIView.animate(withDuration: 1.0, animations: {
        self.animate2()
    }, completion: { finished in
        UIView.animate(withDuration: 1.0, animations: {
            self.animate3()
        })
    })
})

 

중첩이 많아 가독성이 떨어져 보입니다. 애니메이션이 추가될 수록 더 악화될 것입니다.

이 코드는 아래처럼 animateKeyframes 메소드를 통해 해결할 수 있습니다.

 

UIView.animateKeyframes(withDuration: 3.0, delay: 0.0, options: [], animations: {
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.3, animations: {
        // 0.0초 ~ 0.9초
        self.animate1()
    })

    UIView.addKeyframe(withRelativeStartTime: 0.3, relativeDuration: 0.3, animations: {
        // 0.9초 ~ 1.8초
        self.animate2()
    })

    UIView.addKeyframe(withRelativeStartTime: 0.6, relativeDuration: 0.4, animations: {
        // 1.8초 ~ 3.0초
        self.animate3()
    })
}, completion: nil)

 

relativeStartTime, relativeDuration 은 0 ~ 1 까지 지정할 수 있습니다. 총 Duration에 대해 비율로 계산되는 것입니다.

절대적인 코드 라인 수는 많아 졌지만 코드가 중첩되지 않아 이해하기 쉽고 깔끔해졌습니다.