Question

我正在查看绿色摇滚的演示。你可以看到结果是一个萤火虫动画，不幸的是，越多的时间越过浏览器获得的速度越慢。即使设置为总共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之间正确重新分配内存使用情况。使用CSS3动画/过渡，它使用GPU而不是CPU（javascript动画标准使用CPU）。

Answer 2

浏览器正在处理这个问题。如果您暂时将速度更改为3，您可以看到动画速度越来越慢，因为点最终到达最终目的地终止，在开始下一个动画之前。

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

你应该尝试使用各种设置来让点在整个动画中保持更均匀的速度。

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

2 个答案: