我正在使用 PhoneGap (JavaScript) 将图像 (249px*249px) 移动到您的手指下(直到您移开手指)，并且每秒 8 次出现一个小图像 (49px * 49px)，移动 1 秒，然后被删除。它需要支持9个手指在屏幕上操作。因此，屏幕上可能有 81 个正在移动的图像，我以每秒 30 次的速度计算，如果手指数量超过 3 个，所有这些都会导致屏幕出现延迟。

如果我对 Android Studio 执行同样的操作，一切都会顺利运行。

我在 PhoneGap 中使用的代码:

var frames = 30; 
function moveSterrenLoop(x, y, smallImage, runs) { 
    if (runs < frames) { 
        smallImage.style.left = (parseInt(smallImage.style.left) + x) + "px"; 
        smallImage.style.top = (parseInt(smallImage.style.top) + y) + "px"; 
 
        if (runs >= frames/2) { 
            smallImage.style.opacity= window.getComputedStyle(smallImage).getPropertyValue("opacity") - (2/frames); 
        } 
        runs++; 
        setTimeout(function () { 
                moveSterrenLoop(x, y, smallImage, runs); 
            }, 1000/frames); 
    } else { 
        smallImage.parentNode.removeChild(smallImage); 
    } 
} 

• 触摸-移动、-开始、-结束 + 创建小图像并每秒 8 次计算 x 和 y 值

我在 Android Studio 中使用的代码:

Handler handler = new Handler(); 
final Runnable runnable = new Runnable() { 
    @Override 
    public void run() { 
        ... 
        //calculate xEnd, yEnd,... 
        ... 
        smallImage.animate() 
            .translationX(xEnd) 
            .translationY(yEnd) 
            .setDuration(1000) 
            .start(); 
    } 
}; 

+onTouchEvent

所以我的问题是:为什么它在 PhoneGap 上滞后而不是在 Android Studio 上滞后？我该如何修复它？

可能是因为处理程序/可运行对象在后台运行(在其他线程上，而不是主线程上)，而 PhoneGap 是一行一行地运行吗？

请您参考如下方法:

这可能是因为您的超时速度以及您没有使用 GPU 加速的 css 样式

通过使用 GPU 加速的 CSS 样式(例如 transform)，您可以减少延迟

smallImage.style.transform = `translate(${x}px, ${y}px)` 

如果您不那么频繁地执行此操作，则可以进一步减少延迟

}, 3000/frames); 

如果降低帧速率后显得更加滞后，您可以使用 CSS 过渡。这可能会使事情看起来 react 不那么灵敏

transition: 0.1s transform;