放松滚动旋转动画

我有一个元素，我正在使用jQuery/css3滚动滚动。麻烦的是，当你滚动时，它会有点跳动，当你停下来时它会立即停止。我希望它更像是一种平滑的播放旋转，当您开始滚动时开始，然后在您停止滚动后轻松停止，而不是每次滚动轮移动时旋转一组度数。我的代码和链接低于：放松滚动旋转动画

http://pollenbrands.com/rjj/（向下滚动到100％的水果）

var angle = 1; 
jQuery(window).scroll(function() { 
    jQuery(".rotate").css('-moz-transform', 'rotate('+angle+'deg)').css('-webkit-transform', 'rotate('+angle+'deg)').css('-o-transform', 'rotate('+angle+'deg)').css('-ms-transform', 'rotate('+angle+'deg)'); 
    angle+=6; 
    if(angle==360) { 
     angle=0; 
    } 
});

来源

2012-04-16 PollenBrands

您是否尝试过使用.animate？这可能有助于你控制这种行为。

来源

2012-04-16 17:18:07 neuDev33

使用的CSS变换实际上比animate函数速度更快，因为CSS通常是硬件加速。 – Jlange 2012-04-16 17:22:16

@Jlange，是不是完全依赖于浏览器类型和操作系统？ – Sparky 2012-04-16 17:26:44

大多数现代浏览器（Firefox，Chrome，IE）都使用css的硬件加速。这是独立于操作系统的，因为浏览器本身是为特定操作系统编写的。（从他的问题来看，他的目标是Mozilla浏览器，这绝对是硬件加速的）。 – Jlange 2012-04-16 17:28:40

看来问题可能是动画附加到滚动功能。每次用户滚动时都会调用它，因此它在前一次有机会完成之前开始一个新的转换。您可能想要尝试触发一个较长的事件（如更大程度的旋转），当用户第一次滚动时，然后推迟将来的事件，直到第一个事件有时间完成。根据你的缓动函数，你可以使用带标志的setTimeout（）方法。

来源

2012-04-16 17:21:35 Jlange

谢谢，这个问题是，使用缓动，动画会慢下来，然后再次开始，所以旋转速度会不一致。我真的很喜欢它开始旋转并保持相同的速度，直到用户停止滚动，然后减速停止。 – PollenBrands 2012-04-16 23:33:11

那么你可能想试试这个插件，http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ 它可以让你确定用户何时滚动，（因为这个功能不是原生的浏览器） – Jlange 2012-04-16 23:35:50

实现，这将是延缓滚动处理程序的执行的原油和快速方式..

$(window).scroll(function() { 
    setTimeout(function(){ 
     //Call scroll functionality here.. 
    }, 300); 
});

来源

2012-04-16 17:28:14

谢谢，我试过这个，以及我在上面评论中提到的问题，它只是在页面上引起一些普遍的不安。 – PollenBrands 2012-04-16 23:33:38

我会neuDev33同意。为滚动功能使用动画和缓动。像easeOutCirc可能很好地工作。这里有一个很好的作弊表。

http://easings.net/

来源

2013-06-25 14:41:26 Jacksnap13

放松滚动旋转动画

回答

相关问题