Firefly 애니메이션, 브라우저가 잠시 후 느려짐

Question

greensock 데모를 확인하고있었습니다. 결과가 반딧불 애니메이션임을 알 수 있습니다. 불행히도 브라우저가 느려질수록 더 많은 시간이 지납니다. 총 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

Answer 1

애니메이션에만 X 및 Y 특성은, 좌우하지. X와 Y는 레이아웃 재 계산을 트리거하지 않습니다. 최선의 해결책은 CPU와 GPU 간의 메모리 사용을 적절하게 재분배하는 것입니다. CPU 대신 GPU를 사용하는 CSS3 애니메이션/전환을 사용하십시오 (CPU는 자바 스크립트 애니메이션에서 표준으로 사용됩니다).

Answer 2

브라우저가이 문제를 올바르게 처리하고 있습니다. 속도를 3으로 일시적으로 변경하면 다음 애니메이션을 시작하기 전에 점이 마침내 멈추고 최종 목적지로 정착 ​​할 때 애니메이션 속도가 느려지는 것을 알 수 있습니다.

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

다양한 설정으로 놀아서 점 전체가 애니메이션 전체에서 더 빠른 속도를 유지하도록해야합니다.