Kotlin/JS调用Dukat生成的Lottie外部接口时变量未定义怎么办？

解决方案 #

1. 确保Lottie库正确引入 #

Kotlin/JS不会自动加载外部JS库，必须手动引入：

• npm依赖方式：在package.json中添加lottie-web依赖，然后在项目的build.gradle.kts中加入：

  implementation(npm("lottie-web"))
  

• CDN方式：在项目入口HTML文件中添加script标签：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
  

2. 修正外部声明的映射关系 #

Dukat生成的声明可能未正确绑定全局lottie对象，需要调整声明文件：

• 将Lottie变量绑定到全局的lottie对象，添加@JsName注解：

  @JsName("lottie")
  external val Lottie: LottiePlayer
  

  或者直接将变量名改为lottie，与全局对象保持一致：

  external val lottie: LottiePlayer
  

3. 修正AnimationConfig的属性错误 #

代码中assetsPath属性使用错误，该属性用于指定动画依赖资源的路径，而非动画JSON文件本身，应替换为path：

// 错误写法
// animationConfig.assetsPath = "xxx.json"

// 正确写法
animationConfig.path = "https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json"

4. 优化Kotlin/JS对象创建方式 #

无需用js("{}")强制转换，使用jsObject更符合Kotlin规范：

val animationConfig = jsObject<AnimationConfig> {
    container = svgContainer
    loop = false
    autoplay = true
    path = "https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json"
}

完整修正代码 #

fun main() {
    renderComposable(rootElementId = "root") {
        Div(attrs = { id("svgContainer") }) {
            Text("Hola mundo!")

            @Suppress("DEPRECATION")
            DomSideEffect { svgContainer ->
                val animationConfig = jsObject<AnimationConfig> {
                    container = svgContainer
                    loop = false
                    autoplay = true
                    path = "https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json"
                }
                lottie.loadAnimation(animationConfig)
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Jorge Gil