当值频繁变化时(与性能无关)，CSS3 转换过渡会断断续续

Question

我目前正在使用 DeviceOrientation plugin 在 PhoneGap 元素中使用 HTML 和 CSS 构建一个指南针应用程序获取罗盘航向。

我创建了 a jsbin to emulate the heading change .

我遇到的问题是，当值频繁更改(每 200 毫秒)时，CSS 转换会出现相当多的断断续续。

您可以通过转到我上面链接的 jsbin 并缓慢拖动 slider 来增加或减小旋转度来看到这个问题，尤其是当您缓慢地来回拖动 slider 时。

这让我相信这不仅仅是性能或帧率问题；这很可能是由中断转换的快速值变化引起的。

请注意在实际的 PhoneGap 应用程序中，罗盘值每 200 毫秒(或其他任意时间间隔)刷新一次，而不是您在 jsbin 模拟中看到的不一致的更新间隔。

我试着调整一下过渡持续时间，但没有一个奏效。这是我尝试过的:

1. 尝试使转换持续时间比值更改间隔短 0.5 毫秒。例如。每 500 毫秒获取新值，将转换持续时间设置为 450 毫秒。不仅让我口吃，还让整个过渡明显欠缺。
2. 试图让过渡持续时间长于更新间隔(出于绝望)，惊讶于它的工作......有一小会儿然后又开始让我口吃。
3. 尝试使转换持续时间与更新间隔相同，同样卡顿。

现在我的问题是:当旋转值频繁变化时，我应该如何使 CSS3 过渡平滑而不卡顿？另外，切换到 JavaScript 动画是否可以缓解这个问题，比如在以下情况下暂停过渡值(value)改变了？

解决方案:

用 Javascript 动画替换 CSS3 过渡。我使用 Velocity.js 制作动画。每次指南针航向值发生变化时，我首先通过执行 Velocity(compass_element, "finish") 来完成上一个动画。 ，然后我为 rotateZ 设置动画该元素的。

Answer 1

在 CodeMentor 上看到了您的帖子。问题是每次值更改时，它都会停止当前正在发生的转换并开始另一个相同(长)持续时间的转换。如果这是快速连续完成的，它看起来并没有做很多事情，因为它试图不断地缓和并且永远不会进入过渡太远，从而导致卡顿。

您需要根据行进的距离来进行转换，而不仅仅是像您现在这样的时间。有很多方法可以做到这一点，如下所示:

• 每次值发生变化时，计算指针需要移动多远，并根据一些速度和缓动输入为其创建过渡。
• 每次值发生变化时，以对数方式逼近新目标。这意味着每 n 分之一秒，您将向目标移动大约 1/k 的距离(只要距离至少为一个像素)，其中 k 是某个常数，例如 2。因此，如果您转换元素每 0.05 秒中途，它会相当快地接近目标。使用这种方法的难点在于开始时看起来还不错，我不确定它到底是如何工作的，它可能需要一些尝试。

另一个选项(我个人可能会这样做)只是让过渡持续时间更短，拖动时大约 0.1s 似乎效果很好。您可以将 dragstart 上的过渡持续时间更改为这个较短的值，然后在 dragstop 上将其切换回，为点击留出更长的过渡持续时间。