Question

这不是一个jquery问题但是一般的算法问题。

我已经提到我的动画需要工作5秒。在1024到1600的监视器上，它很好。但在较小的显示器上它太快了。我如何根据屏幕宽度减速。即动画需要根据屏幕宽度计算，

说i mention for 1024 width it needs to work for 7 sec。即使屏幕减少，它也应该工作7秒。

再次在更大的显示器上，因为宽度再次增加，时间更短（7秒），动画再次快速，所以这里必须再次增加时间。

两者的比例的最终效果需要相同

这是我的代码，以防任何人有一个jquery解决方案

$("#plane").css({
    'margin-left'   : $(window).width() - 300,
    'position'  : 'absolute'
}).animate({
    "margin-left" : '35%'
}, 5000, 'linear', function(){
    $(this).animate({
        "opacity"       : 0,
        "margin-left"   : 0
    }, 2200, 'linear')
});

Answer 1

您可以计算所需的时间。

听起来你正在描述一种算法，如果窗口宽度小于1024 px，那么你需要7秒，但如果大于此值，则需要更长的时间。所以，假设我们将时间线性地缩放到1024px以上，所以如果宽度为2048px则需要14秒。这可以用这个计算来描述：

var animTime = 7000;
var width = $(window).width();
if (width > 1024) {
    animTime += Math.floor((width - 1024) / 1024) * 7000);
}

然后你可以在两段动画之间分割时间：

$("#plane").css({
    'margin-left'   : $(window).width() - 300,
    'position'  : 'absolute'
}).animate({
    "margin-left" : '35%'
}, Math.floor((5/7) * animTime), 'linear', function(){
    $(this).animate({
        "opacity"       : 0,
        "margin-left"   : 0
    }, Math.floor((2/7) * animTime), 'linear')
});

Answer 2

在不同的机器，显示器和图形卡的绘图时间中，似乎不太可能存在线性关系，这样您就可以轻松计算使用的时间。

但是，您可以计算动画运行的时间（例如通过回调）。拆分动画的前半秒左右。在目标硬件上，您的代码时间为初始部分运行所需的时间，并相应地调整其余动画的限制。例如，如果校准部分的标称长度为N并且需要时间C来完成，并且主要部分的标称长度为T，则使用时间T'= T * R作为主要部分的动画，其中R是a速度比与初始值N / C.

对R应用一些健全性限制，如果您要运行多个动画，请继续测量完成时间并相应地更新速度比。

动画时间宽度

2 个答案: