Lottie-ios: Have some troubles with editing text at animationView

[roba364]

Could anyone help in details how to change text at Lottie-ios? I try to change "fast" to "hello", but don't really know how to find keyPath, and realize it In my source code:

class ViewController: UIViewController {

let animationView = AnimationView()

override func viewDidLoad() {
    super.viewDidLoad()

    setupAnimation()
}

private func setupAnimation() {

    let animation = Animation.named("fast")
    animationView.animation = animation
    animationView.textProvider = TextProvider(keypathName: "fast", sourceText: "hello")
    animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
    animationView.center = view.center
    animationView.backgroundColor = .white
    animationView.contentMode = .scaleToFill
    animationView.loopMode = .loop
    animationView.play()
    animationView.logHierarchyKeypaths()
    view.addSubview(animationView)
}

}

class TextProvider: AnimationTextProvider {
let keypathName: String
let sourceText: String

init(keypathName: String, sourceText: String) {
    self.keypathName = keypathName
    self.sourceText = sourceText
}

// MARK: - AnimationTextProvider

func textFor(keypathName: String, sourceText: String) -> String {
    guard keypathName == self.keypathName else { return sourceText }

    return self.sourceText
}

}

I cant find needed keyPath...please help

[RolandasRazma]

To see all key path you can do animationView.logHierarchyKeypaths()

"Tricky" thing about TextProvider is that it have to be set before animation is loaded (or you have to reload it after). I have PR open to fix that behaviour https://github.com/airbnb/lottie-ios/pull/1166

[roba364]

To see all key path you can do animationView.logHierarchyKeypaths()

"Tricky" thing about TextProvider is that it have to be set before animation is loaded (or you have to reload it after). I have PR open to fix that behaviour #1166

private func setupAnimation() {

    let animation = Animation.named("fast")
    let textProvider = TextProvider(keypathName: "FAST", sourceText: "hello")
    animationView.textProvider = textProvider
    animationView.animation = animation

    animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
    animationView.center = view.center
    animationView.backgroundColor = .white
    animationView.contentMode = .scaleToFill
    animationView.loopMode = .loop
    animationView.play()
    animationView.logHierarchyKeypaths()
    view.addSubview(animationView)
}

my Bundle JSON name is fast.json and it has keyPath's logHierarchy like so:

Lottie: Logging Animation Keypaths
fast
fast.Transform
fast.Transform.Position
fast.Transform.Anchor Point
fast.Transform.Opacity
fast.Transform.Rotation
fast.Transform.Scale
fast.Shape Layer 4
fast.Shape Layer 4.Transform
fast.Shape Layer 4.Transform.Opacity
fast.Shape Layer 4.Transform.Position
fast.Shape Layer 4.Transform.Anchor Point
fast.Shape Layer 4.Transform.Scale
fast.Shape Layer 4.Transform.Rotation
fast.Shape Layer 4.Shape 2
fast.Shape Layer 4.Shape 2.Rotation
fast.Shape Layer 4.Shape 2.Position
fast.Shape Layer 4.Shape 2.Skew
fast.Shape Layer 4.Shape 2.Opacity
fast.Shape Layer 4.Shape 2.Skew Axis
fast.Shape Layer 4.Shape 2.Anchor Point
fast.Shape Layer 4.Shape 2.Scale
fast.Shape Layer 4.Shape 2.Path 1
fast.Shape Layer 4.Shape 2.Path 1.Path
fast.Shape Layer 4.Shape 2.Stroke 1
fast.Shape Layer 4.Shape 2.Stroke 1.Color
fast.Shape Layer 4.Shape 2.Stroke 1.Opacity
fast.Shape Layer 4.Shape 2.Stroke 1.Dash Phase
fast.Shape Layer 4.Shape 2.Stroke 1.Stroke Width
fast.Shape Layer 4.Shape 2.Stroke 1.Dashes
fast.Shape Layer 4.Shape 2.Trim Paths 1
fast.Shape Layer 4.Shape 2.Trim Paths 1.Offset
fast.Shape Layer 4.Shape 2.Trim Paths 1.End
fast.Shape Layer 4.Shape 2.Trim Paths 1.Start
fast.Shape Layer 4.Shape 2.Transform
fast.Shape Layer 4.Shape 2.Transform.Rotation
fast.Shape Layer 4.Shape 2.Transform.Position
fast.Shape Layer 4.Shape 2.Transform.Skew
fast.Shape Layer 4.Shape 2.Transform.Opacity
fast.Shape Layer 4.Shape 2.Transform.Skew Axis
fast.Shape Layer 4.Shape 2.Transform.Anchor Point
fast.Shape Layer 4.Shape 2.Transform.Scale
fast.Shape Layer 4.Shape 1
fast.Shape Layer 4.Shape 1.Skew
fast.Shape Layer 4.Shape 1.Position
fast.Shape Layer 4.Shape 1.Scale
fast.Shape Layer 4.Shape 1.Opacity
fast.Shape Layer 4.Shape 1.Skew Axis
fast.Shape Layer 4.Shape 1.Rotation
fast.Shape Layer 4.Shape 1.Anchor Point
fast.Shape Layer 4.Shape 1.Path 1
fast.Shape Layer 4.Shape 1.Path 1.Path
fast.Shape Layer 4.Shape 1.Stroke 1
fast.Shape Layer 4.Shape 1.Stroke 1.Stroke Width
fast.Shape Layer 4.Shape 1.Stroke 1.Dashes
fast.Shape Layer 4.Shape 1.Stroke 1.Color
fast.Shape Layer 4.Shape 1.Stroke 1.Opacity
fast.Shape Layer 4.Shape 1.Stroke 1.Dash Phase
fast.Shape Layer 4.Shape 1.Trim Paths 1
fast.Shape Layer 4.Shape 1.Trim Paths 1.Start
fast.Shape Layer 4.Shape 1.Trim Paths 1.Offset
fast.Shape Layer 4.Shape 1.Trim Paths 1.End
fast.Shape Layer 4.Shape 1.Transform
fast.Shape Layer 4.Shape 1.Transform.Skew
fast.Shape Layer 4.Shape 1.Transform.Position
fast.Shape Layer 4.Shape 1.Transform.Scale
fast.Shape Layer 4.Shape 1.Transform.Opacity
fast.Shape Layer 4.Shape 1.Transform.Skew Axis
fast.Shape Layer 4.Shape 1.Transform.Rotation
fast.Shape Layer 4.Shape 1.Transform.Anchor Point
fast.Shape Layer 3
fast.Shape Layer 3.Transform
fast.Shape Layer 3.Transform.Rotation
fast.Shape Layer 3.Transform.Opacity
fast.Shape Layer 3.Transform.Position
fast.Shape Layer 3.Transform.Scale
fast.Shape Layer 3.Transform.Anchor Point
fast.Shape Layer 3.Shape 1
fast.Shape Layer 3.Shape 1.Scale
fast.Shape Layer 3.Shape 1.Skew
fast.Shape Layer 3.Shape 1.Rotation
fast.Shape Layer 3.Shape 1.Anchor Point
fast.Shape Layer 3.Shape 1.Skew Axis
fast.Shape Layer 3.Shape 1.Position
fast.Shape Layer 3.Shape 1.Opacity
fast.Shape Layer 3.Shape 1.Path 1
fast.Shape Layer 3.Shape 1.Path 1.Path
fast.Shape Layer 3.Shape 1.Stroke 1
fast.Shape Layer 3.Shape 1.Stroke 1.Stroke Width
fast.Shape Layer 3.Shape 1.Stroke 1.Opacity
fast.Shape Layer 3.Shape 1.Stroke 1.Dashes
fast.Shape Layer 3.Shape 1.Stroke 1.Dash Phase
fast.Shape Layer 3.Shape 1.Stroke 1.Color
fast.Shape Layer 3.Shape 1.Trim Paths 1
fast.Shape Layer 3.Shape 1.Trim Paths 1.Start
fast.Shape Layer 3.Shape 1.Trim Paths 1.End
fast.Shape Layer 3.Shape 1.Trim Paths 1.Offset
fast.Shape Layer 3.Shape 1.Transform
fast.Shape Layer 3.Shape 1.Transform.Scale
fast.Shape Layer 3.Shape 1.Transform.Skew
fast.Shape Layer 3.Shape 1.Transform.Rotation
fast.Shape Layer 3.Shape 1.Transform.Anchor Point
fast.Shape Layer 3.Shape 1.Transform.Skew Axis
fast.Shape Layer 3.Shape 1.Transform.Position
fast.Shape Layer 3.Shape 1.Transform.Opacity
fast.Shape Layer 2
fast.Shape Layer 2.Transform
fast.Shape Layer 2.Transform.Opacity
fast.Shape Layer 2.Transform.Rotation
fast.Shape Layer 2.Transform.Position
fast.Shape Layer 2.Transform.Anchor Point
fast.Shape Layer 2.Transform.Scale
fast.Shape Layer 2.Shape 2
fast.Shape Layer 2.Shape 2.Anchor Point
fast.Shape Layer 2.Shape 2.Opacity
fast.Shape Layer 2.Shape 2.Skew Axis
fast.Shape Layer 2.Shape 2.Position
fast.Shape Layer 2.Shape 2.Scale
fast.Shape Layer 2.Shape 2.Rotation
fast.Shape Layer 2.Shape 2.Skew
fast.Shape Layer 2.Shape 2.Path 1
fast.Shape Layer 2.Shape 2.Path 1.Path
fast.Shape Layer 2.Shape 2.Stroke 1
fast.Shape Layer 2.Shape 2.Stroke 1.Stroke Width
fast.Shape Layer 2.Shape 2.Stroke 1.Opacity
fast.Shape Layer 2.Shape 2.Stroke 1.Color
fast.Shape Layer 2.Shape 2.Stroke 1.Dashes
fast.Shape Layer 2.Shape 2.Stroke 1.Dash Phase
fast.Shape Layer 2.Shape 2.Trim Paths 1
fast.Shape Layer 2.Shape 2.Trim Paths 1.End
fast.Shape Layer 2.Shape 2.Trim Paths 1.Offset
fast.Shape Layer 2.Shape 2.Trim Paths 1.Start
fast.Shape Layer 2.Shape 2.Transform
fast.Shape Layer 2.Shape 2.Transform.Anchor Point
fast.Shape Layer 2.Shape 2.Transform.Opacity
fast.Shape Layer 2.Shape 2.Transform.Skew Axis
fast.Shape Layer 2.Shape 2.Transform.Position
fast.Shape Layer 2.Shape 2.Transform.Scale
fast.Shape Layer 2.Shape 2.Transform.Rotation
fast.Shape Layer 2.Shape 2.Transform.Skew
fast.Shape Layer 2.Shape 1
fast.Shape Layer 2.Shape 1.Position
fast.Shape Layer 2.Shape 1.Scale
fast.Shape Layer 2.Shape 1.Skew
fast.Shape Layer 2.Shape 1.Rotation
fast.Shape Layer 2.Shape 1.Opacity
fast.Shape Layer 2.Shape 1.Anchor Point
fast.Shape Layer 2.Shape 1.Skew Axis
fast.Shape Layer 2.Shape 1.Path 1
fast.Shape Layer 2.Shape 1.Path 1.Path
fast.Shape Layer 2.Shape 1.Stroke 1
fast.Shape Layer 2.Shape 1.Stroke 1.Opacity
fast.Shape Layer 2.Shape 1.Stroke 1.Dash Phase
fast.Shape Layer 2.Shape 1.Stroke 1.Stroke Width
fast.Shape Layer 2.Shape 1.Stroke 1.Dashes
fast.Shape Layer 2.Shape 1.Stroke 1.Color
fast.Shape Layer 2.Shape 1.Trim Paths 1
fast.Shape Layer 2.Shape 1.Trim Paths 1.Start
fast.Shape Layer 2.Shape 1.Trim Paths 1.Offset
fast.Shape Layer 2.Shape 1.Trim Paths 1.End
fast.Shape Layer 2.Shape 1.Transform
fast.Shape Layer 2.Shape 1.Transform.Position
fast.Shape Layer 2.Shape 1.Transform.Scale
fast.Shape Layer 2.Shape 1.Transform.Skew
fast.Shape Layer 2.Shape 1.Transform.Rotation
fast.Shape Layer 2.Shape 1.Transform.Opacity
fast.Shape Layer 2.Shape 1.Transform.Anchor Point
fast.Shape Layer 2.Shape 1.Transform.Skew Axis
fast.Shape Layer 1
fast.Shape Layer 1.Transform
fast.Shape Layer 1.Transform.Opacity
fast.Shape Layer 1.Transform.Rotation
fast.Shape Layer 1.Transform.Scale
fast.Shape Layer 1.Transform.Position
fast.Shape Layer 1.Transform.Anchor Point
fast.Shape Layer 1.Shape 2
fast.Shape Layer 1.Shape 2.Position
fast.Shape Layer 1.Shape 2.Scale
fast.Shape Layer 1.Shape 2.Anchor Point
fast.Shape Layer 1.Shape 2.Skew Axis
fast.Shape Layer 1.Shape 2.Rotation
fast.Shape Layer 1.Shape 2.Opacity
fast.Shape Layer 1.Shape 2.Skew
fast.Shape Layer 1.Shape 2.Path 1
fast.Shape Layer 1.Shape 2.Path 1.Path
fast.Shape Layer 1.Shape 2.Stroke 1
fast.Shape Layer 1.Shape 2.Stroke 1.Opacity
fast.Shape Layer 1.Shape 2.Stroke 1.Color
fast.Shape Layer 1.Shape 2.Stroke 1.Stroke Width
fast.Shape Layer 1.Shape 2.Stroke 1.Dash Phase
fast.Shape Layer 1.Shape 2.Stroke 1.Dashes
fast.Shape Layer 1.Shape 2.Trim Paths 1
fast.Shape Layer 1.Shape 2.Trim Paths 1.Start
fast.Shape Layer 1.Shape 2.Trim Paths 1.End
fast.Shape Layer 1.Shape 2.Trim Paths 1.Offset
fast.Shape Layer 1.Shape 2.Transform
fast.Shape Layer 1.Shape 2.Transform.Position
fast.Shape Layer 1.Shape 2.Transform.Scale
fast.Shape Layer 1.Shape 2.Transform.Anchor Point
fast.Shape Layer 1.Shape 2.Transform.Skew Axis
fast.Shape Layer 1.Shape 2.Transform.Rotation
fast.Shape Layer 1.Shape 2.Transform.Opacity
fast.Shape Layer 1.Shape 2.Transform.Skew
fast.Shape Layer 1.Shape 1
fast.Shape Layer 1.Shape 1.Scale
fast.Shape Layer 1.Shape 1.Rotation
fast.Shape Layer 1.Shape 1.Position
fast.Shape Layer 1.Shape 1.Skew Axis
fast.Shape Layer 1.Shape 1.Skew
fast.Shape Layer 1.Shape 1.Anchor Point
fast.Shape Layer 1.Shape 1.Opacity
fast.Shape Layer 1.Shape 1.Path 1
fast.Shape Layer 1.Shape 1.Path 1.Path
fast.Shape Layer 1.Shape 1.Stroke 1
fast.Shape Layer 1.Shape 1.Stroke 1.Opacity
fast.Shape Layer 1.Shape 1.Stroke 1.Stroke Width
fast.Shape Layer 1.Shape 1.Stroke 1.Dashes
fast.Shape Layer 1.Shape 1.Stroke 1.Color
fast.Shape Layer 1.Shape 1.Stroke 1.Dash Phase
fast.Shape Layer 1.Shape 1.Trim Paths 1
fast.Shape Layer 1.Shape 1.Trim Paths 1.Start
fast.Shape Layer 1.Shape 1.Trim Paths 1.Offset
fast.Shape Layer 1.Shape 1.Trim Paths 1.End
fast.Shape Layer 1.Shape 1.Transform
fast.Shape Layer 1.Shape 1.Transform.Scale
fast.Shape Layer 1.Shape 1.Transform.Rotation
fast.Shape Layer 1.Shape 1.Transform.Position
fast.Shape Layer 1.Shape 1.Transform.Skew Axis
fast.Shape Layer 1.Shape 1.Transform.Skew
fast.Shape Layer 1.Shape 1.Transform.Anchor Point
fast.Shape Layer 1.Shape 1.Transform.Opacity

what should I use as keyPath to change F A S T characters? don't really know, I'm sad..

[RolandasRazma]

it's hard to say from your log, I suggest you look at JSON or at animation file before export.
At guess it could be "fast". If that's the case you need to switch

animationView.animation = animation
animationView.textProvider = TextProvider(keypathName: "fast", sourceText: "hello")

places from your original post (as per my comment)

animationView.textProvider = TextProvider(keypathName: "fast", sourceText: "hello")
animationView.animation = animation

[roba364]

it's hard to say from your log, I suggest you look at JSON or at animation file before export.
At guess it could be "fast". If that's the case you need to switch

animationView.animation = animation
animationView.textProvider = TextProvider(keypathName: "fast", sourceText: "hello")

places from your original post (as per my comment)

animationView.textProvider = TextProvider(keypathName: "fast", sourceText: "hello")
animationView.animation = animation

should keyPath be the same as lettering? my animation (https://lottiefiles.com/23732-text-animation) shows 4 letters, FAST, i wrote all that you adviced, but nothing happened

private func setupAnimation() {

    let animation = Animation.named("fast")
    let textProvider = TextProvider(keypathName: "fast", sourceText: "hello")
    animationView.textProvider = textProvider
    animationView.animation = animation

    animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
    animationView.center = view.center
    animationView.backgroundColor = .white
    animationView.contentMode = .scaleToFill
    animationView.loopMode = .loop
    animationView.play()
    animationView.logHierarchyKeypaths()
    view.addSubview(animationView)
}

}

class TextProvider: AnimationTextProvider {
let keypathName: String
let sourceText: String

init(keypathName: String, sourceText: String) {
    self.keypathName = keypathName
    self.sourceText = sourceText
}

// MARK: - AnimationTextProvider

func textFor(keypathName: String, sourceText: String) -> String {
    guard keypathName == self.keypathName else { return sourceText }

    return self.sourceText
}

}

[RolandasRazma]

should keyPath be the same as lettering?

no, it would be one from animationView.logHierarchyKeypaths()

I checked your animation file, you can't change text as it has no text - "FAST" is a shape

[roba364]

no, it would be one from animationView.logHierarchyKeypaths()

I checked your animation file, you can't change text as it has no text - "FAST" is a shape

I began to understand :) and I cant change "FAST" cuz it shape, cant change shape moving?

[RolandasRazma]

technically you can do everything (and make PR) but that's probably more work than you want :)

[roba364]

technically you can do everything (and make PR) but that's probably more work than you want :)

Thank you so much!!! It's really awesome to get involved with such a community!