Android浏览器上的CSS3动画问题

Question

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

箭头在除 Android 平板电脑 (4.1) 之外的所有平台上都能顺畅旋转。似乎我得到了一种滞后，它以帧为单位旋转（箭头在我的手指在设备上旋转 3-4 秒后旋转）或者它无法按时检测到我的触摸。我已经在许多平板电脑上对此进行了测试，所以我很确定这不是硬件问题。在互联网上查找后，我发现 android 上的 css3 动画在转换方面存在问题。但我认为这不是原因。

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

$('#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（众所周知，jQuery UI 非常复杂且效率低下），而是使用核心 js 或简单 jquery 结合一个小的足迹触摸库如http://eightmedia.github.io/hammer.js/

但是，尽管我无法在没有示例的情况下进行检查，但我认为您的问题只是缺少对 android 4.1 上 cssTransitions 的最新支持，或者所述笔记本电脑缺乏处理能力。

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

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