[iOS] Lottie Animation Color 수정(ColorValueProvider)

iOS 앱 개발 중 다크모드 적용을 위해 애니메이션의 컬러를 변경해야 했다.

Lottie 애니메이션은 런타임에 기본적으로 렌더링되므로 프로그래밍 방식으로 수정하는 것이 가능하다.

 

Value Provider란, 개발자가 런타임에 애니메이션 속성을 쉽게 수정하기 위해 활용할 수 있는 클래스이다.

Lottie 애니메이션 내의 모든 요소는 노드로 표시되며, 노드에 액세스하려면 해당 노드의 키 경로(key path)를 알아야 한다.

 

 

print(AnimationView.logHierarchyKeypaths())

 

1. AnimationView.logHierarchyKeypaths()로 경로를 확인한다.

모든 애니메이션의 주요 경로가 나열되어 있으므로 Value Provider를 사용하여 Lottie 애니메이션을 수정할 수 있다.

 

2. 색상을 변경하기 위해 "Color"라는 단어를 찾는다.

 

let animationView = Lottie.AnimationView(name: "loading_anim") 
let colorProvider = ColorValueProvider(UIColor.primary.lottieColorValue) // 변경할 색상
let keyPath = AnimationKeypath(keypath: "**.Group 1.Fill 1.Color") // 확인한 경로
animationView.setValueProvider(colorProvider, keypath: keyPath)

 

3. 위처럼 올바른 색상 노드를 keypath에 넣어주어 색상을 변경하면 된다.

Lottie 애니메이션의 키 경로는 단일 별표(*) 및 이중 별표(**) 와일드카드 문자를 허용한다. 
단일 별표는 다음 노드에 대해 단일 깊이를 검색하는 반면, 이중 별표는 모든 깊이를 검색한다.