我如何使用javascript来判断我的动画'It’太慢了，改为使用即时更改

How do I use javascript to figure out if my animation's too slow and instead use instant changes?

本文关键字：It javascript 何使用 判断 我的 动画      更新时间：2023-09-26

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

  1. 我不想强迫用户做出选择（我想弄清楚动画程序是否会太慢）

  2. 我不希望他们在我的代码试图计算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;

问题是，代码迫使我先运行一段时间的动画，从而让慢速系统上的用户在一段时间内看到缓慢、不连贯的动画。

有办法做到这一点吗？

我的建议是：

1） 使用运行固定时间的动画功能，并根据每个步骤的运行速度调整步长。这将永远不会让用户看到比预期时间更长的长动画。它可能会波涛汹涌，但完成起来不会很慢。这种类型的动画算法的一般思想是，设置动画的总时间，计算预期的步数。你开始跑每一步，但在每一步你都要检查经过的时间，看看你是否落后于计划。如果你落后于计划（因为主机太慢），你会提前所需的金额让你回到计划中。这种向前跳跃会使动画比所需的更加粗糙，但会使您按计划进行。我见过的所有动画库，比如jQuery和YUI，都是这样工作的。

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

3） 根据在快速和慢速设备上运行动画的一些经验，弄清楚什么stepCnt值意味着性能足够慢，以至于你的UI在没有动画的情况下会更好。

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

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

这样一来，用户就不必等到你编写代码后才能获得良好的体验。

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

相关文章：