이 페이지에서 다룰 내용

이전 글에 이어서 다음과 같은 내용에 대해 다루려고 합니다!

• 레이어에 애니메이션을 추가하는 방법
• 애니메이션 실행 순서를 부여하는 방법

아래 그림과 같이 파이 차트의 경우 애니메이션을 순차적으로 실행하도록 구현했고,

막대 차트는 순서와 관련 없이 동시에 애니메이션이 동작하도록 구현했습니다.

CALayer와 Animation

이전 글에서 애니메이션은 레이어 단위로 추가할 수 있다라고 작성을 했었는데요,

이렇게 적은 이유는 CALayer에 add(_:forKey:) 요 메서드가 있기 때문입니다.

Apple Developer Documentation

CAAnimation과 애니메이션 keyPath 값만 지정해서 add 메서드를 실행하면 애니메이션은 자동으로 동작하게 됩니다!

역시나 글로 작성해둔 것보다는 코드가 더 직관적이므로 예제도 함께 보겠습니다!

private func configureSubLayer() {
    let customLayer = CustomLayer()
    layer.addSublayer(customLayer)

    let customAnimation = configureAnimation()
    customLayer.add(customAnimation, forKey: "strokeEnd")
}

private func configurAnimation() -> CABasicAnimation {
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.toValue = 1
    animation.duration = 3
    
    return animation
}

이전에 구현했던 부채꼴을 선분을 따라 그리는 애니메이션을 적용한 모습입니다.

strokeEnd는 CABasicAnimation의 keyPath 종류 중 하나로, 이 외에도 opacity, backgroundColor 등 다양한 keyPath가 존재합니다.

또한, fromValue와 toValue를 지정하여 애니메이션 값이 어떻게 변화해야하는 지 지정해줄 수 있고,