Javascript Anime.js随机运动

在基于JS的动画方面有点初学者。尝试使用anime.js创建带有随机移动的气泡效果。但是，当动画循环时，它将遵循相同的随机生成的参数，除非重新加载页面

我把代码放在这把小提琴里：

非常感谢您的任何帮助/建议

谢谢

HTML:

Javascript:

var randomMovement = function() {
    return anime.random(-20, 20) + 'rem'
};

var randomSpeed = function() {
  return anime.random(1000, 5000) + 'rem'  
};

$(document).ready(function(){
    var timelineParameters = anime.timeline({
        loop: true
    });

    timelineParameters
    .add({
        targets: '#bubble1',
        translateX: [ { value: randomMovement  }, { value: randomMovement }, { value: randomMovement } ],
        translateY: [ { value: -200  }, { value: -400 }, { value: -600 } ],
        opacity: [ {value: 0.5 }, { value: 0 }],
        easing: 'linear',
        duration: randomSpeed
    })
    .add({
        targets: '#bubble2',
        translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
        translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
        opacity: [ { value: 0.8 }, { value: 0 }],
        easing: 'linear',
        duration: randomSpeed,
        offset: 100
    })
    .add({
        targets: '#bubble3',
        translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
        translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
        opacity: [ { value: 0.3 }, { value: 0 }],
        easing: 'linear',
        duration: randomSpeed,
        offset: 0
    })
    .add({
        targets: '#bubble4',
        translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
        translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
        opacity: [ { value: 0.8 }, { value: 0 }],
        easing: 'linear',
        duration: randomSpeed,
        offset: 300
    });
});

---

迟来的回答-但我现在从anime.js开始，看到了你的问题。 代码的问题是，您只需设置一次时间线，然后就可以为循环中的所有迭代设置相同的值

您需要这样做：

$(document).ready(function(){
    animation();
});

function animation() {
    var timeline = anime.timeline({loop: false}); // no loop !!
    timeline
       .add({...})
       .add({...})
       .add({...});
    timeline.complete = function() {animation();};
}

这样，每次动画完成时都可以从头开始启动动画。 以下是您的示例：

我必须在每个动画开始时为目标添加一个初始位置-否则目标将在视口中消失；-）

var randomMovement = function() {
    return anime.random(-20, 20) + 'rem'
};

var randomSpeed = function() {
  return anime.random(1000, 5000) + 'rem'  
};

$(document).ready(function(){
    var timelineParameters = anime.timeline({
        loop: true
    });

    timelineParameters
    .add({
        targets: '#bubble1',
        translateX: [ { value: randomMovement  }, { value: randomMovement }, { value: randomMovement } ],
        translateY: [ { value: -200  }, { value: -400 }, { value: -600 } ],
        opacity: [ {value: 0.5 }, { value: 0 }],
        easing: 'linear',
        duration: randomSpeed
    })
    .add({
        targets: '#bubble2',
        translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
        translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
        opacity: [ { value: 0.8 }, { value: 0 }],
        easing: 'linear',
        duration: randomSpeed,
        offset: 100
    })
    .add({
        targets: '#bubble3',
        translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
        translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
        opacity: [ { value: 0.3 }, { value: 0 }],
        easing: 'linear',
        duration: randomSpeed,
        offset: 0
    })
    .add({
        targets: '#bubble4',
        translateX: [ { value: randomMovement }, { value: randomMovement }, { value: randomMovement } ],
        translateY: [ { value: -200 }, { value: -400 }, { value: -600 } ],
        opacity: [ { value: 0.8 }, { value: 0 }],
        easing: 'linear',
        duration: randomSpeed,
        offset: 300
    });
});

$(document).ready(function(){
    animation();
});

function animation() {
    var timeline = anime.timeline({loop: false}); // no loop !!
    timeline
       .add({...})
       .add({...})
       .add({...});
    timeline.complete = function() {animation();};
}