安卓浏览器上的CSS3动画问题

Question

我正在制作一个HTML5应用程序，并使用CSS3变换(css3旋转)使用jQuery ui draggable从箭头的一端旋转箭头。我集成了jQuery UI Touch Punch库(v0.2.2)，可以在Ipad和平板电脑等触摸设备上模拟拖动事件。

箭头在除Android平板电脑(4.1)以外的所有平台上都可以平稳旋转。我似乎遇到了一种延迟，它以帧为单位旋转(在设备上旋转我的手指3-4秒后，箭头会旋转)，或者它无法及时检测到我的触摸。我已经在很多平板电脑上测试过了，所以我非常确定这不是硬件问题。在互联网上查找后，我发现安卓上的css3动画在转换方面存在问题。但我不认为这是原因。

这是我的代码。虽然我确信性能问题与代码无关，但如果您仍然有这种感觉，请随时发表评论，并明智地提高它的性能。如果有其他库可以实现与jquery touch same相同的功能，我也愿意对它们进行测试。请提个建议。

$('#arrow').draggable({
    handle: '#arrow',
    opacity: 0.01,
    helper: 'clone',
    refreshPositions: true,
    cursorAt : {left: 0 , top: 0},
    drag: function(event, ui){
        var curr_x = ui.offset.left;
        var curr_y = ui.offset.top;
        var radians = Math.atan2(curr_x - 40, curr_y - 500);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        var rotateCSS = 'rotate(' + degree + 'deg)';
         $(this).css({
                'transform': rotateCSS,
                '-moz-transform': rotateCSS,
                '-webkit-transform': rotateCSS,
                '-ms-transform': rotateCSS,
                '-o-transform': rotateCSS,
         });
     }
});

Answer 1

你的代码没有问题，不幸的是，android浏览器在不同版本之间会有很大的变化，所以这种延迟可能只会在一小段时间内影响一小部分用户。

我认为优化您的流程的唯一方法是删除jquery ui draggable (众所周知，jquery UI非常复杂且效率低下)，转而使用核心js或简单的jquery并结合http://eightmedia.github.io/hammer.js/等小型触摸库来编写功能

然而，尽管我无法在没有示例的情况下进行检查，但在我看来，您的问题仅仅是在Android4.1上缺少对cssTransitions的最新支持，或者在笔记本电脑上缺乏处理能力。

要记住的另一件事是，jquery draggable将使用.animate()而不是.css()来移动东西，因此在许多情况下，转换将变得无用，因为jquery将导致性能下降。

你现在可能已经解决了这个问题，但希望这些信息能有所帮助。