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

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

我遇到的问题是,当值经常变化(每200毫秒)时,CSS过渡结果很不稳定.

您可以通过转到上面链接的jsbin并慢慢拖动滑块来增加或减少旋转度来查看此问题,尤其是当您缓慢地来回拖动滑块时.

这让我相信这不仅仅是一个表现或帧率问题;这很可能是由于中断转换的快速值更改造成的.

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

我试着稍微过渡一段时间,但都没有奏效.这是我尝试过的：

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

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

解：

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

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

相反,您需要根据要移动的距离进行转换,而不仅仅是您当前的时间.有很多方法可以做到这一点,一对如下：

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

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