안녕하세요 🌱 Lawn입니다 이번 프로젝트를 통해 공부한 iOS 개발자를 위한 Lottie 적용법을 작성해보겠습니다.
☘️ Lottie 공식문서 정리
로티 문서 사이트 바로가기 -> Lottie.io
Time
Lottie에서 애니메이션을 재생하는 방법에는 여러 가지가 있습니다.
Lottie는 시간을 세 가지 방식으로 애니메이션을 실행합니다.
-
프레임 시간 : (Seconds * Framerate)
예: 프레임 속도가 24일 때 0.5초는 FrameTime 12입니다. -
진행 시간 : 0(애니메이션 타임라인의 시작)에서 1(애니메이션 타임라인의 끝)까지 진행 중인 시간을 설명합니다.
-
시간 : 시간을 초 단위로 설명합니다.
세 가지 모두 AnimationView에서 재생하고 시간을 설정하는 데 사용할 수 있습니다.
Basic Playing
AnimationView.play(completion: LottieCompletionBlock?)애니메이션을 현재 상태에서 타임라인 끝까지 재생합니다. 애니메이션이 중지되면 완료 블록을 호출합니다.
Parameters
completion : 애니메이션이 완료될 때 호출되는 완료 블록. 애니메이션이 완료되면 블록이 true로 전달되고 애니메이션이 중단되면 false로 전달됩니다.
starAnimationView.play { (finished) in
/// Animation stopped
}Play with Progress Time
AnimationView.play(fromProgress: AnimationProgressTime?, toProgress: AnimationProgressTime, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)진행 시간까지 애니메이션을 재생합니다.
Parameters
fromProgress : 애니메이션의 시작 진행률. nil이면 현재 진행 상황에서 애니메이션이 시작됩니다.
toProgress : 애니메이션의 종료 진행률입니다.
loopMode : 애니메이션의 루프 동작입니다. nil이면 뷰의 loopMode 속성이 사용됩니다.
complition : 애니메이션이 중지될 때 호출되는 선택적 완료 클로저입니다.
/// Play only the last half of an animation.
animationView.play(fromProgress: 0.5, toProgress: 1)Play with Frame Time
AnimationView.play(fromFrame: AnimationProgressTime?, toFrame: AnimationFrameTime, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)프레임 시간까지 애니메이션을 재생합니다.
Parameters
fromFrame : 애니메이션의 시작 프레임. nil이면 애니메이션이 현재 프레임에서 시작됩니다.
toFrame : 애니메이션의 끝 프레임입니다.
loopMode : 애니메이션의 루프 동작입니다. nil이면 뷰의 loopMode 속성이 사용됩니다.
complition : 애니메이션이 중지될 때 호출되는 선택적 완료 클로저입니다.
/// Play from frame 24 to 48 of an animation.
animationView.play(fromFrame: 24, toFrame: 48)Play with Marker Names
AnimationView.play(fromMarker: String?, toMarker: String, loopMode: LottieLoopMode?, completion: LottieCompletionBlock?)선택한 Marker에서 다른 Marker로 애니메이션을 재생합니다.
Marker : 애니메이션 데이터로 인코딩되고 이름이 할당되는 시점입니다. 마커가 없으면 재생 명령이 종료됩니다.
Parameters
fromMarker : 애니메이션 재생을 위한 시작 마커. nil이면 현재 진행 상황에서 애니메이션이 시작됩니다.
toMarker : 애니메이션 재생을 위한 종료 마커입니다.
loopMode : 애니메이션의 루프 동작입니다. nil이면 뷰의 loopMode 속성이 사용됩니다.
complition : 애니메이션이 중지될 때 호출되는 선택적 완료 클로저입니다.
/// Play from frame 24 to 48 of an animation.
animationView.play(fromMarker: "ftue1_begin", toMarker: "ftue1_end")Stop
AnimationView.stop()Stop은 현재 재생되는 애니메이션을 중지합니다. 애니메이션 뷰는 시작 frame으로 돌아갑니다. 애니메이션은 false로 종료됩니다.
animationView.stop()Pause
AnimationView.pause()pause는 현재 상태에서 애니메이션을 멈춥니다. 애니메이션은 false로 종료됩니다.
animationView.pause()Animation Settings
애니메이션 뷰는 playback을 하기위한 다양한 컨트롤 셋팅 방법이 있습니다.
/// iOS
var AnimationView.contentMode: UIViewContentMode { get set }
/// MacOS
var AnimationView.contentMode: LottieContentMode { get set }애니메이션 뷰 크기를 어떻게 조정하는지 설명하자면
scaleToFill : AnimationView의 경계를 채우도록 크기가 조정된 애니메이션입니다. AnimationView의 측면이 Animation과 다른 경우 애니메이션이 늘어납니다.
scaleAspectFit : 애니메이션 가로 세로 비율을 유지하면서 AnimationView에 맞게 크기가 조정됩니다.
scaleAspectFill : 애니메이션 가로 세로 비율을 유지하면서 AnimationView를 채우도록 크기가 조정됩니다.
topLeft : 애니메이션은 크기가 조정되지 않습니다.
Background Behavior
var AnimationView.backgroundBehavior: LottieBackgroundBehavior { get set }앱이 background로 이동한 상황에서 애니메이션 뷰의 행동을 설명하자면(iOS만 해당)
- 기본값은 .pause입니다.
stop : 애니메이션을 중지하고 현재 재생 시간의 시작 부분으로 재설정합니다. 완료 블록이 호출됩니다.
pause : 현재 상태에서 애니메이션을 일시 중지합니다. 완료 블록이 호출됩니다.
pauseAndRestore : 애니메이션을 일시 중지하고 앱이 다시 백그라운드에서 벗어날때 재생됩니다.완료 블록은 애니메이션이 완료되면 저장되고 호출됩니다.
Loop Mode
var AnimationView.loopMode: LottieLoopMode { get set }재생에 대한 반복 동작을 설정합니다.
- 기본값은 playOnce입니다.
playOnce : 애니메이션은 한 번 재생된 다음 중지됩니다.
loop : 애니메이션은 멈출 때까지 끝에서 처음으로 반복됩니다.
autoReverse : 애니메이션이 앞으로 재생된 다음 뒤로 재생되고 멈출 때까지 반복됩니다.
repeat(amount) : 애니메이션은 횟수만큼 끝에서 시작까지 반복됩니다.
repeatBackwards(amount) : 애니메이션이 앞으로 재생된 다음 뒤로 재생됩니다.
Is Animation Playing
var AnimationView.isAnimationPlaying: Bool { get set }애니메이션이 현재 재생중일때 true를 Return합니다. 재생중이 아닐시 false를 Return합니다.
Should Rasterize When Idle
var AnimationView.shouldRasterizeWhenIdle: Bool { get set }true인 경우 애니메이션 뷰는 애니메이션을 적용하지 않을 때 내용을 래스터화합니다. 래스터화는 정적 애니메이션의 성능을 향상시킵니다.
- 기본값은 false입니다.
🍀
Comments애니메이션의 자연 해상도보다 높은 해상도에서는 선명한 결과를 생성하지 않습니다.
Respect Animation Frame Rate
var AnimationView.respectAnimationFrameRate: Bool { get set }true인 경우 애니메이션은 애니메이션 모델에 인코딩된 프레임 속도로 재생됩니다. false인 경우 애니메이션은 장치의 프레임 속도로 재생됩니다.
- 기본값은 false입니다.
Animation Speed
var AnimationView.animationSpeed: CGFloat { get set }애니메이션 재생 속도를 설정합니다.
- 기본값은 1입니다.
Current Progress
var AnimationView.currentProgress: AnimationProgressTime { get set }진행 시간으로 현재 애니메이션 시간을 설정합니다. 현재 진행 시간을 반환하거나 애니메이션이 진행 중인 경우 최종 진행 시간을 반환합니다.
🍀
Comments이것을 설정하면 현재 애니메이션이 있는 경우 중지됩니다.
Current Time
var AnimationView.currentTime: TimeInterval { get set }TimeInterval을 사용하여 현재 애니메이션 시간을 설정합니다.
현재 TimeInterval을 반환하거나 애니메이션이 진행 중인 경우 최종 TimeInterval을 반환합니다.
🍀
Comments이것을 설정하면 현재 애니메이션이 있는 경우 중지됩니다.
Current Frame
var AnimationView.currentFrame: AnimationFrameTime { get set }프레임 시간으로 현재 애니메이션 시간을 설정합니다. 현재 프레임 시간을 반환하거나 애니메이션이 진행 중인 경우 최종 프레임 시간을 반환합니다.
🍀
Comments이것을 설정하면 현재 애니메이션이 있는 경우 중지됩니다.
Realtime Frame
var AnimationView.realtimeAnimationFrame: AnimationFrameTime { get }애니메이션이 진행되는 동안 AnimationView의 실시간 프레임 시간을 반환합니다.
Realtime Progress
var AnimationView.realtimeAnimationProgress: AnimationProgressTime { get }애니메이션이 진행되는 동안 AnimationView의 실시간 진행 시간을 반환합니다.
Force Display Update
func AnimationView.forceDisplayUpdate()AnimationView가 콘텐츠를 다시 그리도록 합니다.
Using Markers
마커는 키 이름으로 특정 시점을 설명하는 방법입니다. 마커는 JSON으로 인코딩됩니다. 마커를 사용하여 디자이너는 개발자가 애니메이션 프레임의 트랙에 대해 걱정할 필요 없이 재생 지점을 표시할 수 있습니다. 애니메이션 파일이 업데이트되면 개발자는 재생 코드를 업데이트할 필요가 없습니다.
마커를 사용하여 애니메이션 섹션을 재생하거나 직접 읽을 수 있습니다. Animation과 AnimationView에는 모두 마커 시간을 읽는 메서드가 있습니다.
Reading Marker Time
/// Animation View Methods
AnimationView.progressTime(forMarker named: String) -> AnimationProgressTime?
AnimationView.frameTime(forMarker named: String) -> AnimationFrameTime?
/// Animation Model Methods
Animation.progressTime(forMarker named: String) -> AnimationProgressTime?
Animation.frameTime(forMarker named: String) -> AnimationFrameTime?각 메서드는 이름으로 지정된 마커의 시간을 반환합니다. 마커를 찾을 수 없으면 nil을 반환합니다.
Dynamic Animation Properties
Lottie 애니메이션의 거의 모든 프로퍼티는 combination of Animation Keypaths을 사용하여 런타임에 변경할 수 있습니다. Keypath에 ValueProvider를 설정하면 애니메이션이 콘텐츠를 업데이트하고 새로 공급된 값을 읽게 됩니다. 또한 Animation Keypaths를 사용하여 애니메이션 프로퍼티를 읽을 수 있습니다.
Setting Dynamic Properties
AnimationView.setValueProvider(_ valueProvider: AnyValueProvider, keypath: AnimationKeypath)지정된 키 경로에 대한 ValueProvider를 설정합니다. 값 공급자는 키 경로와 일치하는 모든 속성에 설정됩니다.
valueProvider : 속성에 대한 새 값 공급자입니다.
keypath : 속성을 검색하는 데 사용되는 키 경로입니다.
/// A keypath that finds the color value for all `Fill 1` nodes.
let fillKeypath = AnimationKeypath(keypath: "**.Fill 1.Color")
/// A Color Value provider that returns a reddish color.
let redValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))
/// Set the provider on the animationView.
animationView.setValueProvider(redValueProvider, keypath: fillKeypath)Reading Animation Properties
AnimationView.getValue(for keypath: AnimationKeypath, atFrame: AnimationFrameTime?) -> Any?Keypath에 의해 지정된 속성 값을 읽습니다. 속성이 없으면 nil을 반환합니다.
for : 속성을 검색하는 데 사용되는 키 경로입니다.
atFrame : 쿼리할 값의 프레임 시간입니다. nil이면 현재 프레임이 사용됩니다.
/// A keypath that finds the Position of `Group 1` in `Layer 1`
let fillKeypath = AnimationKeypath(keypath: "Layer 1.Group 1.Transform.Position")
let position = animationView.getValue(for: fillKeypath, atFrame: nil)
/// Returns Vector(10, 10, 0) for currentFrame. Logging Keypaths
AnimationView.logHierarchyKeypaths()애니메이션의 모든 자식 키 경로를 콘솔에 기록합니다.
Adding Views to Animations
AnimationViews에 사용자 정의 보기를 추가할 수 있습니다. 이러한 보기는 애니메이션과 함께 애니메이션됩니다.
Enabling and Disabling Animation Nodes
public func setNodeIsEnabled(isEnabled: Bool, keypath: AnimationKeypath)
키 경로 검색으로 찾은 모든 애니메이터 노드의 활성화 상태를 설정합니다. 애니메이션의 일부를 대화식으로 활성화/비활성화하는 데 사용할 수 있습니다. 활성화된 노드는 렌더 트리에 영향을 미치고 비활성화된 노드는 렌더 트리에서 제거됩니다
- Parameter isEnabled : true인 경우 애니메이터 노드는 렌더링 트리에 영향을 줍니다. false인 경우 노드가 트리에서 제거됩니다.
- Parameter keypath : 노드를 찾는 데 사용되는 키 경로입니다.
// Create an animation view.
let animation = Animation.named("LottieLogo1", subdirectory: "TestAnimations")
// Some time later. Create a keypath to find any node named "Stroke 1"
let keypath1 = AnimationKeypath(keypath: "**.Stroke 1")
// Disable all nodes named Stroke 1, removing them from the current render tree.
animationView.setNodeIsEnabled(isEnabled: false, keypath: keypath1)
// Re-enable all nodes named Stroke 1.
animationView.setNodeIsEnabled(isEnabled: true, keypath: keypath1)Adding Subviews
AnimationView.addSubview(_ subview: AnimationSubview, forLayerAt keypath: AnimationKeypath)첫 번째 Keypath에 가장 가까운 자식 레이어를 검색하고 해당 레이어에 하위 뷰를 추가합니다. 하위 뷰는 하위 레이어와 함께 이동하고 애니메이션됩니다. 또한 하위 뷰는 하위 레이어 좌표 공간에 있습니다.
🍀
Comments키 경로에 대한 레이어가 발견되지 않으면 아무 일도 일어나지 않습니다.
subview : 찾은 애니메이션 레이어에 추가할 하위 뷰입니다.
keypath : 애니메이션 레이어를 찾는 데 사용되는 키 경로입니다.
/// A keypath that finds `Layer 1`
let layerKeypath = AnimationKeypath(keypath: "Layer 1")
/// Wrap the custom view in an `AnimationSubview`
let subview = AnimationSubview()
subview.addSubview(customView)
/// Set the provider on the animationView.
animationView.addSubview(subview, forLayerAt: layerKeypath)Converting CGRect and CGPoint to Layers
/// Converts a rect
AnimationView.convert(_ rect: CGRect, toLayerAt keypath: AnimationKeypath) -> CGRect?
/// Converts a point
AnimationView.convert(_ point: CGPoint, toLayerAt keypath: AnimationKeypath) -> CGPoint?이 두 가지 방법은 AnimationView의 좌표 공간에서 Keypath에 있는 레이어의 좌표 공간으로 지오메트리를 변환하는 데 사용됩니다.
🍀
Comments레이어가 발견되지 않으면 nil이 반환됩니다.
point or rect : 변환할 AnimationView의 좌표 공간에 있는 CGPoint 또는 CGRect입니다.
keypath : 레이어를 찾는 데 사용되는 키 경로입니다.
Image Provider
이미지 공급자는 AnimationView에 이미지를 제공하는 데 사용되는 프로토콜입니다.
일부 애니메이션에는 이미지에 대한 참조가 필요합니다. 이미지 공급자는 해당 이미지를 로드하여 AnimationView에 제공합니다. Lottie에는 번들 또는 FilePath에서 이미지를 제공하는 미리 빌드된 몇 가지 이미지 공급자가 포함되어 있습니다.
또한 URL에서 이미지를 로드하거나 이미지를 캐시하기 위해 사용자 지정 이미지 공급자를 만들 수 있습니다.
BundleImageProvider
public class BundleImageProvider: AnimationImageProvider특정 번들에서 이름별로 이미지를 제공하는 AnimationImageProvider입니다. BundleImageProvider는 번들 및 선택적 searchPath로 초기화됩니다
/// Create a bundle that loads images from the Main bundle in the subdirectory "AnimationImages"
let imageProvider = BundleImageProvider(bundle: Bundle.main, searchPath: "AnimationImages")
/// Set the provider on an animation.
animationView.imageProvider = imageProviderFilepathImageProvider
public class FilepathImageProvider: AnimationImageProvider특정 로컬 파일 경로에서 이름으로 이미지를 제공하는 AnimationImageProvider입니다.
/// Create a bundle that loads images from a local URL filepath.
let imageProvider = AnimationImageProvider(filepath: url)
/// Set the provider on an animation.
animationView.imageProvider = imageProviderAnimation Cache
AnimationCacheProvider는 애니메이션 캐시를 설명하는 프로토콜입니다. 애니메이션 캐시는 애니메이션 모델을 로드할 때 사용됩니다. 애니메이션 캐시를 사용하면 애니메이션을 여러 번 로드할 때 성능이 향상될 수 있습니다.
Lottie는 사전 빌드된 LRU 애니메이션 캐시와 함께 제공됩니다.
LRUAnimationCache
최대 cacheSize까지 애니메이션을 저장할 애니메이션 캐시입니다. cacheSize에 도달하면 가장 최근에 사용된 애니메이션이 꺼집니다. 캐시의 기본 크기는 100입니다.
LRUAnimationCache에는 애니메이션을 저장하는 데 사용되는 전역 sharedCache가 있습니다.
LRUAnimationCache.sharedCache.clearCache()를 호출하여 캐시를 지울 수도 있습니다.
Value Providers
AnyValueProvider는 주어진 시간에 프로퍼티에 대한 애니메이션 데이터를 반환하는 프로토콜입니다. AnimationView의 모든 프레임은 모든 속성을 쿼리하고 ValueProvider에 업데이트가 있는지 묻습니다. 그렇게 하면 AnimationView는 속성을 읽고 애니메이션의 해당 부분을 업데이트합니다.
값 공급자를 사용하여 런타임에 애니메이션 속성을 동적으로 설정할 수 있습니다.
Primitives
ValueProvider는 몇 가지 기본 데이터 유형과 함께 작동합니다.
-
Color : R G B A(0-1)의 색상을 설명하는 기본 요소
-
Vector1D : 단일 부동 소수점 값입니다.
-
Vector3D : 3차원 벡터입니다. (X, Y, Z)
Prebuilt Providers
Lottie는 각 기본 유형에 대해 미리 빌드된 소수의 공급자와 함께 제공됩니다. 각 공급자는 단일 값 또는 프레임 단위로 호출되는 블록으로 초기화될 수 있습니다.
/// A Color Value provider that returns a reddish color.
let redValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))
/// A keypath that finds the color value for all `Fill 1` nodes.
let fillKeypath = AnimationKeypath(keypath: "**.Fill 1.Color")
/// Set the provider on the animationView.
animationView.setValueProvider(redValueProvider, keypath: fillKeypath)
/// Later...
/// Changing the value provider will update the animation.
redValueProvider.color = Color(r: 0, g: 0.2, b: 1, a: 1)Animation Keypaths
AnimationKeypath는 애니메이션 JSON에서 노드에 대한 키 경로 검색을 설명하는 객체입니다. AnimationKeypath는 AnimationView 내부의 보기 및 속성을 이름별로 지원하는 애니메이션 모델과 일치시킵니다.
키 경로를 사용하여 기존 애니메이션의 속성을 설정하거나 기존 애니메이션으로 유효성을 검사할 수 있습니다. AnimationKeypath는 특정 개체를 설명하거나 개체의 퍼지 일치를 위해 와일드카드를 사용할 수 있습니다. 허용되는 와일드카드는 "*"(별표) 또는 "**"(이중 별표)입니다. 단일 별은 다음 개체에 대한 단일 깊이를 검색합니다. 더블 스타는 모든 깊이를 검색합니다.
AnimationKeypath는 점으로 구분된 키 경로 또는 키 배열로 초기화할 수 있습니다.
keypath 예시
/// Represents a specific color node on a specific stroke.
@"Layer.Shape Group.Stroke 1.Color"
/// Represents the color node for every Stroke named "Stroke 1" in the animation.
@"**.Stroke 1.Color"code 예시
/// A keypath that finds the color value for all `Fill 1` nodes.
let fillKeypath = AnimationKeypath(keypath: "**.Fill 1.Color")Animated Control
Lottie에는 AnimatedSwitch 및 AnimatedButton의 두 가지 애니메이션 컨트롤이 미리 포장되어 있습니다. 이 두 컨트롤은 모두 AnimatedControl을 기반으로 합니다.
AnimatedControl은 사용자 작업에 대한 응답으로 애니메이션의 시각적 상태를 제어하기 위한 대화형 메커니즘을 제공하는 UIControl의 하위 클래스입니다.
AnimatedControl은 컨트롤의 현재 UIControl.State에 따라 레이어를 표시하거나 숨깁니다.
AnimationControl의 사용자는 각 UIControl.State에 대한 레이어 이름을 설정할 수 있습니다. 상태가 변경되면 AnimationControl은 레이어의 보이는 것을 변경합니다.
'켜기' 및 '끄기' 상태의 대화형 스위치입니다. 사용자가 스위치를 탭하면 상태가 전환되고 적절한 애니메이션이 재생됩니다.
'켜기'와 '끄기' 모두 상태와 관련된 애니메이션 재생 범위가 있습니다.
/// Sets the play range for the given state. When the switch is toggled, the animation range is played.
public func setProgressForState(fromProgress: AnimationProgressTime,
toProgress: AnimationProgressTime,
forState onState: Bool)
누르면 애니메이션이 재생되는 대화형 버튼입니다. AnimatedButton은 다양한 UIControl.Event에 대해 다양한 시간 범위를 재생할 수 있습니다. 재생 범위는 다음 중 하나를 사용하여 설정됩니다.
/// Set a play range with Progress Time.
public func setPlayRange(fromProgress: AnimationProgressTime,
toProgress: AnimationProgressTime,
event: UIControl.Event)
/// Set a play range with Marker Keys.
public func setPlayRange(fromMarker fromName: String,
toMarker toName: String,
event: UIControl.Event)한 번 설정하면 이벤트가 트리거될 때 애니메이션이 자동으로 재생됩니다.
/// Create a button.
let twitterButton = AnimatedButton()
twitterButton.translatesAutoresizingMaskIntoConstraints = false
/// Set an animation on the button.
twitterButton.animation = Animation.named("TwitterHeartButton", subdirectory: "TestAnimations")
/// Turn off clips to bounds, as the animation goes outside of the bounds.
twitterButton.clipsToBounds = false
/// Set animation play ranges for touch states
twitterButton.setPlayRange(fromMarker: "touchDownStart", toMarker: "touchDownEnd", event: .touchDown)
twitterButton.setPlayRange(fromMarker: "touchDownEnd", toMarker: "touchUpCancel", event: .touchUpOutside)
twitterButton.setPlayRange(fromMarker: "touchDownEnd", toMarker: "touchUpEnd", event: .touchUpInside)
view.addSubview(twitterButton)Examples
Lottie는 아름다운 애니메이션을 재생하는 것 이상을 할 수 있습니다. Lottie를 사용하면 런타임에 애니메이션을 변경할 수 있습니다.
let animationView = AnimationView(name: "toggle");
self.view.addSubview(animationView)
animationView.play()
let animationView2 = AnimationView(name: "toggle");
self.view.addSubview(animationView2)
animationView2.play()
let animationView3 = AnimationView(name: "toggle");
self.view.addSubview(animationView3)
animationView3.play()
let animationView4 = AnimationView(name: "toggle");
self.view.addSubview(animationView4)
animationView4.play()
/// A Color Value provider that returns a reddish color.
let redValueProvider = ColorValueProvider(Color(r: 1, g: 0.2, b: 0.3, a: 1))
/// A Color Value provider that returns a reddish color.
let orangeValueProvider = ColorValueProvider(Color(r: 1, g: 1, b: 0, a: 1))
/// A Color Value provider that returns a reddish color.
let greenValueProvider = ColorValueProvider(Color(r: 0.2, g: 1, b: 0.3, a: 1))
let keypath = AnimationKeypath(keypath: "BG-On.Group 1.Fill 1.Color")
animationView2.setValueProvider(greenValueProvider, keypath: keypath)
animationView3.setValueProvider(redValueProvider, keypath: keypath)
animationView4.setValueProvider(orangeValueProvider, keypath: keypath)keyPath는 After Effects의 레이어 및 속성 이름의 점으로 구분된 경로입니다. AnimationView는 애니메이션에 대해 설정 가능한 모든 키 경로를 재귀적으로 기록하는 func logHierarchyKeypaths()를 제공합니다.
- "BG-On.Group 1.Fill 1.Color"
Why is it Called Lottie?
Lottie는 독일 영화 감독이자 실루엣 애니메이션의 선두주자의 이름을 따서 명명되었습니다. 그녀의 가장 잘 알려진 영화는 월트 디즈니의 장편 <백설공주와 일곱 난쟁이>(1937)보다 10년 이상 앞서 살아남은 가장 오래된 장편 애니메이션 영화인 아흐메드 왕자의 모험(1926)입니다.
