Question

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

我已将代码放入这个小提琴中：

非常感谢任何帮助/建议！

由于

HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="custom.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>

    <body>  
        <div id="animatebubbles" class="container">
            <h1>Test Page</h1>

            <div class="bubblewrapper">
                <div class="bubblepath">
                    <div id="bubble1" class="bubble">

                    </div>
                </div>
                <div class="bubblepath">
                    <div id="bubble2" class="bubble">

                    </div>
                </div>
                <div class="bubblepath">
                    <div id="bubble3" class="bubble">

                    </div>
                </div>
                <div class="bubblepath">
                    <div id="bubble4" class="bubble">

                    </div>
                </div>
            </div>
        </div>
    <footer>
        <script type="text/javascript" src="anime.min.js"></script>
        <script type="text/javascript" src="custom.js"></script>
    </footer>  

    </body>
</html>

CSS：

body {
    height: 100%;
    margin: 0;
}

h1 {
    font-size: 40px;
    color: #fff;
    margin: 0;
    display: inline-block;
    position: absolute;
}

.container {
    width: 100%;
    background-color: #206ca0;
    height: 100%;
    text-align: center;
}

.bubblewrapper {
    display: block;
    position: absolute;
    left: 0;
    height: 100%;
    width: 300px;
}

.bubblepath {
    height: 100%;
    padding: 0 1px;
    display: table-cell;
    width: 60px;
}

.bubble {
    height: 40px;
    width: 40px;
    border-radius: 100%;
    position: absolute;
    background-color: #fff;
    bottom: 0;
}

使用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
    });
});

Answer 1

迟到的答案 - 但我现在开始使用anime.js并看到了你的问题。您的代码的问题是，您设置了一次时间轴 - 而不是为循环中的所有迭代设置相同的值。

你需要做这样的事情：

homestead(ssh)

这样，您每次完成时都会从头开始动画。这是你的例子的一个分支：

https://jsfiddle.net/4879trjv/1/

我必须在每个动画开始时为你的目标添加一个初始位置 - 否则你的目标会在你的视口的永恒中迷失; - ）

动漫。随机运动

1 个答案: