Question

我使用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);
    }
}

触摸-move，-start，-end +创建小图片并计算每秒8x的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上没有延迟，我该如何解决？

是否可以因为处理程序/ runnables在后台运行（在其他线程上运行，而不是主线程）而PhoneGap是否一行一行地进行操作？

Answer 1

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

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

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

如果不经常这样做，可以进一步减少延迟

}, 3000/frames);

如果降低帧率似乎更加滞后，则可以使用CSS转换。这可能会使事情看起来不那么敏感

transition: 0.1s transform;

使用JavaScript和Java动画图像

1 个答案: