Anime.js随机运动

位基于JS的动画初学者。尝试使用anime.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 
    }); 
});

来源

2017-06-22 Sion27

晚的答案 - 但我目前正在与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/

我不得不初始位置在每个动画开始添加到您的目标 - 否则你的目标会迷失在你的视口的永恒;-)

来源

2017-11-28 09:05:07 Gerfried

Anime.js随机运动

回答

相关问题