0

我有一段代码每十分之一秒向文档添加一个 div，将其设置为朝向页面边缘的随机方向，然后将其删除。目前帧速率非常低，所以我想知道是否有办法让 div 在离开页面边缘​​时自动删除（左侧或顶部值超过 100% 或低于 0%）

或者如果有任何其他方法可以提高帧速率...

这是代码：

    function myFunction() {  

//the following generates four random numbers between 100-400 and asigns 2 of them to be the top and left values

var RN=Math.floor(Math.random()*2);
var RN2=Math.floor(Math.random()*2);
var RNMB4=Math.random()*300+100;
var RNMB2=Math.random()*300+100;
var RNMB3=Math.abs(Math.random()*300) * -1;
var RNMB1=Math.abs(Math.random()*300) * -1;
var NMBRS=[RNMB1,RNMB2];
var NMBRS2=[RNMB3,RNMB4];
    $("<div/>").appendTo('body').animate({
            left: NMBRS[RN] + '%',
            top: NMBRS[RN] + '%',
            }, 
            1000), function(){$(this).remove();});
    }

    setInterval(myFunction,100);
4

2 回答 2

1

很多时候隐藏和元素比从 dom 中删除它更便宜。动画完成后，我会尝试在元素上调用 .hide() 。

根据您要制作动画的元素数量，最终可能需要清理它们。

随机生成的数字的数量也可以减少 2/3。它们的生成可能非常昂贵。

于 2013-04-28T15:57:28.687 回答
0

您可以使用 requestAnimationFrame 方法来提高动画性能，尽管此 api 通常需要供应商前缀并且不向后兼容。

另一件事是，您通常应该（如果不是总是）将动画元素设置为 position: absolute。这样该元素就不会使文档重排。

你可以使用Greensock，一个高性能的 js 动画库。它还有一个 jquery 插件来平滑 jQuery 中的动画方法。

顺便说一句，不必要的括号会使您的代码不匹配……也许是您粘贴代码时的拼写错误？

于 2013-04-28T16:42:53.767 回答