DOM加载时无法设置Lottie动画起始阶段的问题求助

我需要随机选择一个Lottie动画及其中的特定阶段，让动画从该阶段开始播放，但无论怎么尝试，动画都无法从指定阶段启动。

我的代码如下：

document.addEventListener("DOMContentLoaded", function () {
    // List of the Lotties
    var lottieFiles = [
        {
            path: 'lottie1.json',
            stages: [
                { from: 0, to: 50 },
                { from: 51, to: 100 },
                { from: 101, to: 150 },
                { from: 151, to: 200 }
            ]
        },
        {
            path: 'lottie2.json',
            stages: [
                { from: 0, to: 60 },
                { from: 61, to: 120 },
                { from: 121, to: 180 },
                { from: 181, to: 240 }
            ]
        },
        {
            path: 'lottie3.json',
            stages: [
                { from: 0, to: 40 },
                { from: 41, to: 80 },
                { from: 81, to: 120 },
                { from: 121, to: 160 }
            ]
        },
        {
            path: 'lottie4.json',
            stages: [
                { from: 0, to: 70 },
                { from: 71, to: 140 },
                { from: 141, to: 210 },
                { from: 211, to: 280 }
            ]
        }
    ];

    // Choose random Lottie
    var randomIndex = Math.floor(Math.random() * lottieFiles.length);
    var selectedLottie = lottieFiles[randomIndex];

    // Choose random stage
    var randomStageIndex = Math.floor(Math.random() * selectedLottie.stages.length);
    var selectedStage = selectedLottie.stages[randomStageIndex];

    // Load the selected Lottie from it's stage
    var animation = lottie.loadAnimation({
        container: document.getElementById('lottie-animation'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: selectedLottie.path
    });

    animation.goToAndStop(randomStageIndex.from, true);
});

我尝试过优化阶段选择逻辑，直接指定动画阶段而非依赖随机索引，但动画仍显示错误的阶段。

1. 修复阶段参数的错误引用 #

你代码里的animation.goToAndStop(randomStageIndex.from, true)犯了明显错误：randomStageIndex是数字类型的索引值，根本没有from属性。正确的应该使用已经获取到的selectedStage对象的from属性：

animation.goToAndStop(selectedStage.from, true);

2. 等待Lottie动画加载完成再控制播放 #

Lottie的loadAnimation是异步操作，动画资源还没加载完成时，直接调用goToAndStop不会生效。需要监听动画的data_ready事件，在动画数据加载完成后再执行阶段跳转：

animation.addEventListener('data_ready', function() {
    // 先停止自动播放的初始动画（如果开启了autoplay）
    animation.stop();
    // 跳转到指定阶段的起始帧
    animation.goToAndStop(selectedStage.from, true);
    // 如果需要从该阶段开始循环播放，调用goToAndPlay
    animation.goToAndPlay(selectedStage.from, true);
});

3. 调整自动播放配置（可选） #

如果不需要动画一开始就自动播放，可以先把autoplay设为false，等跳转到指定阶段后再手动启动播放，避免初始播放的动画干扰：

var animation = lottie.loadAnimation({
    container: document.getElementById('lottie-animation'),
    renderer: 'svg',
    loop: true,
    autoplay: false, // 先关闭自动播放
    path: selectedLottie.path
});

完整修正后的代码 #

document.addEventListener("DOMContentLoaded", function () {
    var lottieFiles = [
        {
            path: 'lottie1.json',
            stages: [
                { from: 0, to: 50 },
                { from: 51, to: 100 },
                { from: 101, to: 150 },
                { from: 151, to: 200 }
            ]
        },
        {
            path: 'lottie2.json',
            stages: [
                { from: 0, to: 60 },
                { from: 61, to: 120 },
                { from: 121, to: 180 },
                { from: 181, to: 240 }
            ]
        },
        {
            path: 'lottie3.json',
            stages: [
                { from: 0, to: 40 },
                { from: 41, to: 80 },
                { from: 81, to: 120 },
                { from: 121, to: 160 }
            ]
        },
        {
            path: 'lottie4.json',
            stages: [
                { from: 0, to: 70 },
                { from: 71, to: 140 },
                { from: 141, to: 210 },
                { from: 211, to: 280 }
            ]
        }
    ];

    var randomIndex = Math.floor(Math.random() * lottieFiles.length);
    var selectedLottie = lottieFiles[randomIndex];

    var randomStageIndex = Math.floor(Math.random() * selectedLottie.stages.length);
    var selectedStage = selectedLottie.stages[randomStageIndex];

    var animation = lottie.loadAnimation({
        container: document.getElementById('lottie-animation'),
        renderer: 'svg',
        loop: true,
        autoplay: false,
        path: selectedLottie.path
    });

    animation.addEventListener('data_ready', function() {
        animation.goToAndPlay(selectedStage.from, true);
    });
});

额外提示 #

• 如果你的动画帧是基于时间（秒）而非帧编号，需要把goToAndPlay的第二个参数设为false，或者使用goToAndPlay(selectedStage.from * animation.frameRate, true)进行转换。
• 可以监听loopComplete事件，让动画在完成当前阶段后循环该阶段（如果需要的话），而不是整个动画循环。

内容的提问来源于stack exchange，提问作者Darya Shuhlia