当值频繁更改时（与性能无关），CSS3转换转换会出现口吃

我目前正在一个PhoneGap项目中用HTML和CSS构建一个compass应用程序，以获取指南针的方向

我创造了

我遇到的问题是，当值频繁更改（每200毫秒一次）时，CSS转换会有很大的停顿

通过转到上面链接的jsbin I并缓慢拖动滑块以增加或减少旋转度，尤其是在缓慢来回拖动滑块时，可以看到这个问题

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

请注意在实际的PhoneGap应用程序中，compass值每200毫秒（或其他任意间隔）刷新一次，而不是jsbin模拟中不一致的更新间隔

我试着在过渡期玩了一点，但没有一个有效。以下是我尝试过的：

尝试使转换持续时间比值更改间隔短0.5ms。例如，每500ms获取一个新值，将转换持续时间设置为450ms。这不仅让我口吃，而且使整个过渡期明显不足

尝试使转换持续时间比更新间隔长（出于绝望），惊讶于它能工作。。。有一段时间，然后又开始让我口吃

尝试使转换持续时间与更新间隔相同，出现相同的口吃 现在我的问题是：当旋转值频繁更改时，我应该如何使CSS3转换平滑而不结巴？此外，切换到JavaScript动画是否会缓解此问题，比如在值更改时暂停转换

解决方案：

---

用Javascript动画替换CSS3转换。我在动画中使用了Velocity.js。每次指南针航向值更改时，我首先通过执行速度（compass_元素，“finish”）来完成上一个动画，然后对该元素的旋转设置动画。

在CodeMentor上看到了您的帖子。问题是，每次值更改时，它都会停止当前正在发生的转换，并启动另一个相同（长）持续时间的转换。如果这是一个快速连续的过程，它看起来并没有做什么，因为它试图不断地放松，并且从来没有在过渡中走得太远，从而导致口吃

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

• 每次值更改时，计算指针需要移动的距离，并根据一些速度和输入为其创建过渡
• 每次值更改时，以对数方式接近新目标。这意味着每N秒你会朝目标移动1/k的距离（只要距离至少是一个像素），其中k是一个常数，比如2。因此，如果每0.05秒将元素转换一半，它将相当快地接近目标。使用这种方法最困难的部分是获得一个看起来不错的开始轻松度，我不确定这到底是如何工作的，这可能需要一些游戏

---

另一个选择（我个人可能会这么做）就是缩短转换持续时间，比如0.1秒，在拖动时看起来效果很好。您可以将dragstart上的转换持续时间更改为这个较短的值，然后将其切换回dragstop，留下较长的转换持续时间供单击。

嘿，扎克，非常感谢您花时间编写详细的解释！你能看一下我问题的“请注意”部分吗？我昨天加了那个部分。。。对不起，我没有明确地说这是一个编辑，因为当时没有很多人注意到这个问题。谢谢@user14412我的答案是对这两部分的回应：）如果你已经尝试了我的建议，那么我恐怕不完全理解你的问题。A我今天一定会尝试你的建议，并让你知道结果。我想我应该告诉你我对忍者的编辑，以防你看不到。对不起，上周我实在没时间尝试，但今天我终于尝试了。首先，非常感谢你的建议！我摆脱了CSS3转换，开始使用Javascript动画。结果是惊人的！我将在原始问题中公布我的发现。