如何通过按钮与滚动控制Lottie动画，实现标记帧跳转

问题说明 #

想用按钮控制Lottie动画，需求包括：

• 按钮回到动画开头
• 按钮跳转到动画中对应年份的标记点（1980、1990、2002）
• 动画同时支持滚动控制
  目前只有START按钮能正常工作，标记跳转功能失效，相关代码如下：

原JS代码 #

LottieInteractivity.create({
    mode:"scroll",
    player:'#vpfxlbmm',
    actions: [
        {
            visibility:[0,1],
            type: "seek",
            frames: [0, 300],
        },
    ]
});
    
let player = document.querySelector("lottie-player");
let play = document.querySelector(".start");
let year1980 = document.querySelector(".year1980");
let year1990 = document.querySelector(".year1990");
let year2002 = document.querySelector(".year2002");
let stop = document.querySelector(".stop");

play.onclick = function () {
    player.play();
};

year1980.onclick = function () {
  //"progress" is the marker in animation
     player.goToAndPause("progress");
   
};

stop.onclick = function () {
    player.stop();
};

原HTML代码 #

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<button class="start">Start</button>
<button class="year1980">1980</button>
<button class="year1990">1990</button>
<button class="year2002">2002</button>
<button class="stop">Stop</button>

问题原因 #

1. API使用错误：lottie-player的goToAndPause不支持直接传入标记名称，需要先获取标记对应的帧数值。
2. 标记获取时机不对：没有等待动画加载完成就尝试跳转，可能获取不到标记信息。
3. 部分按钮未绑定逻辑：1990、2002按钮没有点击事件，回到开头的功能也缺失。
4. 滚动交互与手动控制需要兼容：确保两种控制方式互不干扰。

解决代码 #

修正后的HTML（补充lottie-player的id和回到开头按钮） #

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<button class="start">播放</button>
<button class="reset">回到开头</button>
<button class="year1980">1980</button>
<button class="year1990">1990</button>
<button class="year2002">2002</button>
<button class="stop">停止</button>

<!-- 替换src为你的Lottie动画地址 -->
<lottie-player id="vpfxlbmm" src="your-animation.json" loop></lottie-player>

修正后的JS代码 #

// 初始化滚动交互
LottieInteractivity.create({
    mode: "scroll",
    player: '#vpfxlbmm',
    actions: [
        {
            visibility: [0, 1],
            type: "seek",
            frames: [0, 300],
        },
    ]
});

const player = document.querySelector("#vpfxlbmm");
const playBtn = document.querySelector(".start");
const resetBtn = document.querySelector(".reset");
const year1980Btn = document.querySelector(".year1980");
const year1990Btn = document.querySelector(".year1990");
const year2002Btn = document.querySelector(".year2002");
const stopBtn = document.querySelector(".stop");

// 等待动画加载完成后再绑定按钮事件
player.addEventListener("loaded", () => {
    // 获取动画中的所有标记，建立名称到起始帧的映射
    const lottieInstance = player.getLottie();
    const markerMap = {};
    lottieInstance.markers.forEach(marker => {
        markerMap[marker.name] = marker.startFrame;
    });

    // 播放动画
    playBtn.onclick = () => player.play();

    // 回到动画开头并暂停
    resetBtn.onclick = () => player.goToAndPause(0, true);

    // 跳转到1980对应的标记帧
    year1980Btn.onclick = () => {
        const targetFrame = markerMap["progress"]; // 替换为你动画中1980对应的标记名称
        if (targetFrame) player.goToAndPause(targetFrame, true);
    };

    // 跳转到1990对应的标记帧
    year1990Btn.onclick = () => {
        const targetFrame = markerMap["your-1990-marker-name"]; // 替换为实际标记名
        if (targetFrame) player.goToAndPause(targetFrame, true);
    };

    // 跳转到2002对应的标记帧
    year2002Btn.onclick = () => {
        const targetFrame = markerMap["your-2002-marker-name"]; // 替换为实际标记名
        if (targetFrame) player.goToAndPause(targetFrame, true);
    };

    // 停止动画
    stopBtn.onclick = () => player.stop();
});

关键说明 #

• 必须等待loaded事件触发后再获取标记，否则动画未加载完成会导致标记为空。
• goToAndPause的第二个参数设为true表示按帧跳转，如果用进度值（0-1范围）则设为false。
• 替换代码中的动画URL和标记名称为你自己的实际内容。

内容的提问来源于stack exchange，提问作者Alejandro Alonzo