javascript - Anime.js 随机移动-6ren

javascript - Anime.js 随机移动

转载作者：行者123 更新时间：2023-11-29 15:20:06

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

我已经把代码放到这个 fiddle 里了:

https://jsfiddle.net/3ss3c5ma/7/

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

谢谢

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

最佳答案

迟到的答案 - 但我目前从 anime.js 开始，看到了你的问题。您的代码存在的问题是，您只设置了一次时间轴 - 然后它在循环中的所有迭代中都设置为相同的值。

你需要做这样的事情:

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

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

通过这种方式，您可以在每次动画完成时从头开始启动动画。这是您的示例的一个分支:

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

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

关于javascript - Anime.js 随机移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44701536/

文章推荐： html - 如何设置 HTML

首页

博学

6Ren·AI

商城

javascript - Anime.js 随机移动