螢火蟲動畫，瀏覽器在一段時間後變得更慢

我正在查看綠色演示的演示。你可以看到結果是一個螢火蟲動畫，遺憾的是瀏覽器越慢，時間越長。即使設定爲總共15-30個點。螢火蟲動畫，瀏覽器在一段時間後變得更慢

是否有任何有效的方法來阻止劇本積累？

function RN(x){ 
    return Math.random()*x; 
    } 
    var total = 100 ; 
    var w = window.innerWidth; 
    var h = window.innerHeight; 
    var target = document.getElementById('container'); 
    for (i=0; i<total; i++){ 
     var e = document.createElement('div'); 
     e.className = "dot"; 
     e.opacity = 0; 
     e.style.left = RN(w)+'px'; 
     e.style.top = RN(h)+'px'; 
     target.appendChild(e); 
     animm(e); 
    } 
    function animm(elm){ 
     TweenMax.killTweensOf(elm); 
     TweenMax.to(elm, (RN(80))+40, { 
     bezier:{ 
      curviness:3, 
      values:[ 
       {left:RN(w), top:RN(h)}, 
       {left:RN(w), top:RN(h)} 
      ] 
     }, 
     onComplete:function(){ 
      TweenMax.delayedCall(RN(2), animm, [elm]); 
     } 
     }); 
     TweenMax.to(elm, (RN(4)+2),{ 
     force3D:true, 
     opacity:RN(.7)+.1, 
     repeat:-1, 
     scale:RN(1.25)+.25, 
     yoyo:true, 
     ease:Bounce.easeInOut 
     }); 
    };

http://codepen.io/maelfyn/pen/GgRLbg

來源

2015-02-07 Daniels

動畫只是X和Y屬性，這是廉價的瀏覽器中呈現，而不是左，右。 X和Y不會觸發重新計算佈局。最好的解決方案是正確地重新分配CPU和GPU之間的內存使用量。使用CSS3動畫/轉換，它使用GPU而不是CPU（CPU由JavaScript動畫標準使用）。

來源

2015-02-18 18:11:45 Fusion

瀏覽器正在處理這個問題。如果您暫時將速度更改爲3，則可以看到在開始下一個動畫之前，動畫速度逐漸變慢，因爲點終於朝着最終目的地終止。

TweenMax.to(elm, 3, { 
    bezier:{ 
     curviness:3, 
     values:[ 
      {left:RN(w), top:RN(h)}, 
      {left:RN(w), top:RN(h)} 
    ] 
}

您應該嘗試使用各種設置進行遊戲，以使點在整個動畫中具有更均勻的速度。

來源

2015-02-18 19:17:39 zachzurn

螢火蟲動畫，瀏覽器在一段時間後變得更慢

回答

相關問題