Javascript 基于宽度的动画时间

这不是一个jquery问题，而是一个通用算法问题

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

比如说

我提到的1024宽度，它需要工作7秒

。即使屏幕减小，也应工作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')
});

---

您可以计算所需的时间

听起来你在描述一个算法，如果窗口宽度小于1024像素，那么你需要7秒，但是如果大于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')
});

---

在不同的机器、显示器和图形卡上，绘图时间似乎不太可能存在任何线性关系，从而使您能够轻松计算使用的时间

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

---

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

将其调整为大于或小于1024。无论哪种情况，动画都会缩放up@WebDeveloper-对于我来说，你想在更小和更大的屏幕上增加时间是没有意义的，但不知何故，1024是一个神奇的值，应该保持不变。我无法想象为什么这对人类互动有意义。但是，如果您想这样做，您可以在我的代码中添加一个

else

子句，并在小于1024时编写您想要的任何缩放算法。你没有描述你想要什么缩放算法，所以我不能提供任何代码。我的主要问题是上面/我的代码在iPad上太快了，因为屏幕太小