我正在使用[lottie-web][1]在浏览器中播放一些SVG动画，但是我需要一次播放一个，并且只有在当前动画完成后才能转到下一个。
目前，lottie.play()一次播放所有的动画，因为我想在each()中的下一个循环之前，一次运行一次。
我觉得这应该是相对简单的，但努力使它的工作。我一直在玩lottie。onComplete，但没有运气到目前为止。也许我需要分别注册每个动画？
谢谢.

超文本标记语言

<div class="step one">
    <div class="animation" data-json="JSON DATA HERE"></div>
</div>
<div class="step two">
    <div class="animation" data-json="JSON DATA HERE"></div>
</div>
<div class="step three">
    <div class="animation" data-json="JSON DATA HERE"></div>
</div>

字符串

脚本

// Vars
var steps = $('.step');

// Loop through steps
steps.each( function(){
      
    // Find animation for this step
    var animation = $(this).find('.animation');
    // Convert from jQuery to vanilla js for use with lottie-web
    var anim = animation.get(0);

    // Lottie animation (vanilla js)
    var lottie = bodymovin.loadAnimation({
        container: anim,
        renderer: 'svg',
        loop: false,
        autoplay: false, // Don't autoplay, so we can play at desired time
        path: anim.getAttribute('data-json')
    });

    // Play animation
    lottie.play(); // Plays all, but should only play current animation

    // On animation complete
    lottie.onComplete = function(){

      // On complete, proceed to next .step
      console.log('complete');
    }

});

型