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隨機運動

回答

相關問題