当值经常变化（与性能无关）时，CSS3变换过渡会断断续续

Question

我目前正在使用DeviceOrientation plugin在PhoneGap项目中使用HTML和CSS构建指南针应用，以获得指南针标题。

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

我遇到的问题是，当值经常变化（每200毫秒）时，CSS过渡结果很不稳定。

你可以通过转到我上面链接的jsbin并慢慢拖动滑块来增加或减少旋转度来看到这个问题，特别是当你慢慢来回拖动滑块时。

这让我相信这不仅仅是一个表现或帧率问题;它很可能是由于中断转换的快速值变化引起的。

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

我尝试使用转换持续时间，但没有一个工作。以下是我尝试过的内容：

1. 试图使转换持续时间比值更改间隔短0.5ms。例如。每500ms获取一个新值，将转换持续时间设置为450ms。不仅让我口吃，而且使整个转型缺乏显着。
2. 试图使转换时间长于更新间隔（绝望之外），感到惊讶的是它有效......暂时再开始让我口吃。
3. 尝试使转换持续时间与更新间隔相同，相同的断断续续。

现在我的问题是：当旋转值频繁变化时，我应该怎么做才能使CSS3过渡平滑而没有断断续续？此外，切换到JavaScript动画会缓解这个问题，就像暂停转换时一样价值变化？

解决方案：

用Javascript动画替换CSS3过渡。我使用Velocity.js作为动画。每次罗盘标题值改变时，我首先通过Velocity(compass_element, "finish")完成上一个动画，然后我为该元素的rotateZ设置动画。

Answer 1

在CodeMentor上看到你的帖子。问题是，每次值发生变化时，停止当前正在发生的转换，并启动另一个相同（长）的持续时间。如果这是快速连续完成的，它看起来并没有做任何事情，因为它试图不断地缓和并且永远不会进入过渡，导致口吃。

您需要进行转换，具体取决于要移动的距离，而不仅仅是您目前所处的时间。有很多方法可以做到这一点，一对如下：

• 每当值发生变化时，计算指针需要移动的距离，并根据某些速度和缓和输入为其创建过渡。
• 每次值更改时以对数方式接近新目标。这意味着你每隔n秒就会向目标移动一个类似1 / k的方式（只要距离至少是一个像素），其中k是一些常数，如2.所以，如果你转换了元素每0.05秒一半，它会很快接近目标。使用这种方法的困难之处在于可以轻松地开始轻松，我不确定它是如何工作的，它可能需要一些游戏。

另一个选项（我可能会亲自做）只是让转换持续时间更短，0.1s似乎在拖动时效果很好。您可以将dragstart上的转换持续时间更改为此较短的值，并在dragstop上将其切换回来，从而为点击留下更长的转换持续时间。