Question

我在一个特别沉重的jQuery网站上工作，该网站有很多动画。

这个脚本控制着背景云（其中6个）：

function moveClouds(e, s, d) {
$(e).css('left', '-20%');
    var wait = window.setTimeout(function(){
        $(e).animate ({
            right: '120%'
        }, s, 'linear', function() {
        moveClouds(e, s, d);
    });
},d);
}

if(!Modernizr.cssanimations) {
var clouds = [1,2,3,4,5,6];

$.each(clouds, function() {
    var e = $('.cloud-' + this);
    moveClouds(e, e.data('speed'), e.data('delay'));
});
}

有一个让气球悬停，还有其他元素（其中12个）：

function runIt(element, hoverAmount) {
         element.animate({top: '+=' + hoverAmount}, 1000);
         element.animate({top: '-=' + hoverAmount}, 1000, function() {
             runIt(element, hoverAmount);
         });
     }

     $('.balloon').each(function() {
         var hoverAmount = 15 + Math.floor(Math.random() * 5);
         //console.log(hoverAmount);
         runIt($(this), hoverAmount);
     });

和其他移动物体，褪色进出等物品。

现在的问题是，添加的内容越多，云和气球的图像现在变得不稳定，不再平滑。我对jQuery很陌生，所以我的问题是：

有没有办法让它们不冲突？使用更少的资源并顺利运行？

Answer 1

就像上面的评论一样，最好不要将jQuery用于许多复杂的同步动画。

Greensock使用CSS变换来移动对象。您还可以编写自己的CSS转换。它们使用硬件加速，可以更快，更平滑地为对象设置动画。

Answer 2

是的，我认为你会发现GSAP (GreenSock Animation Platform)更好地更多。它实际上比jQuery 快20倍 。另外我建议动画x / y而不是上/左/右，因为变换不会影响文档流，因此可以更快地渲染。另外，尝试将force3D:true添加到您的GSAP动画中，这些动画会将元素放到他们自己的合成器图层上。

使用GSAP，您可以循环/ yoyo动画，将它们嵌套，seek()到某个位置，reverse()，更改timeScale等等。 jQuery只是不是为严肃的动画而构建的。

哦，如果可以的话，我会避免做很多setTimeout()次电话。当它们堆积起来时，它们会变得昂贵。 GSAP有一个delayedCall()方法，它与单个中央自动收报机相关联，在压力下更有效率。

您可能还想阅读这篇文章：http://css-tricks.com/myth-busting-css-animations-vs-javascript/

如果您需要GSAP方面的帮助，http://forums.greensock.com

上有专门的论坛

快乐的补间！

jQuery干扰其他jQuery脚本

2 个答案: