萤火虫动画，一段时间后浏览器会变慢

Firefly animation, browser gets slower after a while

本文关键字：浏览器 动画 一段时间 萤火虫      更新时间：2023-09-26

我正在查看Greenstock的演示。你可以看到结果是一个萤火虫动画，不幸的是，时间越长，浏览器就越慢。即使设置为总共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

只为X和Y属性制作动画，这对浏览器渲染来说很便宜，而不是左右。X和Y不会触发布局的重新计算。最好的解决方案是在CPU和GPU之间适当地重新分配内存使用。使用CSS3动画/转换，它使用GPU而不是CPU（javascript动画标准使用CPU）。

浏览器处理得很好如果暂时将速度更改为3，则可以看到动画速度越来越慢，因为在开始下一个动画之前，点最终会朝着它们的最终目的地静止。

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

您应该尝试使用各种设置，以使点在整个动画中具有更均匀的速度。

相关文章：