如何使用javascript确定我的动画'；它太慢，而是使用即时更改？

我有一个使用javascript+css动画的网页。在许多计算机上，这将运行得很好，但在一些较慢的系统（如平板电脑）上，这可能会很糟糕。在这些情况下，我想优雅地降级为简单地将对象立即移动到其最终位置，而无需动画。我的问题是：

我不想强迫用户做出选择（我想知道动画在编程上是否太慢）

当我的代码试图计算javascript动画的FPS时，我不希望他们经历5-10秒的超慢动画。相反，我想要一个快速的方法来解决这个问题

这可能吗？或者我必须运行动画3-5秒才能确定动画是否能在他们的系统上正常运行？（在1秒或更短的时间内检查它意味着系统中的打嗝将错误地终止动画）

到目前为止，我所想到的是这样的东西（伪代码）：

播放动画

//Total number of steps in our animation (This is calculated normally)
var totalSteps = 20;

//Amount of time between each setInterval/setTimeout
var delay = 20; //milliseconds

//Total expected time to animate entire process
var expectedDuration = dealy * totalSteps;

//Our starting time
var startTime = new Date().getTime();

/*** Start the animation ***/
startAnimation(...);

//Current time
var endTime = new Date().getTime();

//Actual time it took
var actualDuration = endTime - startTime;

//Check difference in expected time vs actual time
var diff = actualDuration - expectedDuration;

在动画的最后一步

//Total number of steps in our animation (This is calculated normally)
var totalSteps = 20;

//Amount of time between each setInterval/setTimeout
var delay = 20; //milliseconds

//Total expected time to animate entire process
var expectedDuration = dealy * totalSteps;

//Our starting time
var startTime = new Date().getTime();

/*** Start the animation ***/
startAnimation(...);

//Current time
var endTime = new Date().getTime();

//Actual time it took
var actualDuration = endTime - startTime;

//Check difference in expected time vs actual time
var diff = actualDuration - expectedDuration;

问题是，代码迫使我先运行一段时间的动画，从而使慢速系统上的用户在一段时间内受到缓慢、急促的动画的影响

---

有办法吗？

我的建议是：

1） 使用在固定时间内运行的动画功能，并根据每个步骤的运行速度调整步长。这永远不会让用户受到比预期时间更长的长动画的影响。它可能会起伏不定，但完成的速度不会慢。这种类型的动画算法的总体思想是，设置动画的总时间，计算预期的步数。您开始运行每一步，但在每一步中，您都会检查运行时间，以查看是否落后于计划。如果您落后于计划（因为主机速度太慢），您可以提前支付所需的金额以使您回到计划。这种向前跳跃会使动画比预期的更跳跃，但会使您保持在计划中。我见过的所有动画库都像jQuery和YUI这样工作

2） 在前几个动画中的每一个（按上述方式完成），累积一个stepCnt，告诉您在固定时间内每个动画中完成了多少个步骤

3） 根据在快速和慢速设备上运行动画的一些经验，找出stepCnt值表示的性能足够慢，以至于用户界面在没有动画的情况下会更好

---

4） 使您的代码具有自适应性。如果在步骤2的前几个动画之后，您看到stepCnt低于您的阈值（您在步骤3中确定），则设置一个全局标志，表示您要跳过动画，以便所有未来的动画都将直接进入结束状态。

根据我的经验，慢度始终与特定的浏览器或操作系统有关。因此，只需找出哪些浏览器/操作系统配置运行得太慢，并减少仅针对这些配置的动画步骤

这样，用户不必等到您的代码解决问题后才能获得良好的体验

---

找出哪些浏览器/操作系统速度慢的一种方法是使用谷歌分析（或任何其他跟踪API），在动画开始时跟踪一个事件，然后在动画结束时跟踪另一个事件。然后，您可以轻松地计算每个配置的平均动画运行时间，并相应地采取行动。

不幸的是，这并不适用。我认识一些使用WinXP的人，他们使用的是FF 10和它的blazes，另一个使用的是WinXP，IE 7，它的性能也很好，还有一些人使用的是Vista，FF 10，它的速度非常慢。有这么多的因素，单凭OS+浏览器是无法猜测的。谢谢你的回复。我认为这可能是最好的选择。这并不完美（因为他们会先经历一些急促、缓慢的动画——虽然不是每个人都会），但可能会尽我所能接近。谢谢你的建议！