[iOS/UIKit] Keyframe Animation 으로 연속적인 변화를 Animate 하기

UIView.animateKeyframes

한 개 또는 여러개의 Keyframe 으로 구성된 Animation 을 동작시킨다. 

 

func changeSummary(to summaryText: String) {
        UIView.animateKeyframes(
            withDuration: 1.0, delay: 0,
            animations: { [summary = self.summary!] in
                // Move label upward.
                UIView.addKeyframe(
                    withRelativeStartTime: 0, relativeDuration: 0.5,
                    animations: { summary.center.y -= 100 }
                )
                // Move label down.
                UIView.addKeyframe(
                    withRelativeStartTime: 0.5, relativeDuration: 0.5,
                    animations: { summary.center.y += 100 }
                )
            }
        )
}​

 

 

addKeyframe 의 withRelativeStartTime, relativeDuration 은 animateKeyframes 의 withDuration 에 대한 상대적 수치(0~1 사이의 값) 이다.

 

animateKeyframes 의 withDuration 이 1 초이므로 첫번째 Keyframe 은 전체 1초 중에서 0 의 위치 (= 0초) 에서 시작하여 전체 1 초의 0.5 (= 0.5초 동안) 에 걸쳐 animate 된다. 두번째 Keyframe 은 전체 1 초 중 0.5 의 위치 (= 0.5초) 에서 시작하여 전체 1 초의 0.5 (= 0.5초 동안) 에 걸쳐 animate 된다. 

 

즉, 총 1 초 동안 Animate 하는데, 시작하는 즉시 0.5 초 동안 라벨을 위로 올리고, 전체 1 초의 중간 지점인 0.5 초 부터는 0.5 초에 걸쳐 라벨을 아래로 내린다.

 

만약 animateKeyframes 의 withDuration 이 2 초라면 각 Keyframe 은 0 초에서 1 초까지 1 초 동안 라벨을 올리고, 1 초에서 2 초까지 1 초동안 라벨을 내린다.