JavaScript 与 Java 中的动画图像

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);
    }
}

触摸-移动、-开始、-结束+创建小图像并以每秒 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 上，我该如何修复它？

难道是因为 handlers/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 中的动画图像

Animating images in JavaScript vs Java

javascript

java

animation

android

phonegap