JavaScript 与 Java 中的动画图像答案

【问题标题】：Animating images in JavaScript vs JavaJavaScript 与 Java 中的动画图像
【发布时间】：2023-03-31 05:14:03
【问题描述】：

我正在使用 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 + 创建小图像并每秒 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 上滞后，我该如何解决？

可能是因为处理程序/runnables 在后台运行（在其他线程上，而不是主线程上）并且 PhoneGap 是一行一行地运行吗？

【问题讨论】：

您可以尝试使用100/frames，这意味着您更新它的次数更少，并且不会滞后太多，或者切换到 GPU 加速的.style.transform = "translate("+x+"px, "+y+"px)";
感谢您的评论，现在结合使用会更好：降低帧速率，使用 style.transform（你们都建议）并在带有 for 循环的函数上使用 setInterval 来移动每个小图像，所以所有的移动都发生在 2 个循环中，而不是 81 个不同的循环中。如果您可以将这 3 个放在答案中，我会检查它是否正确。

标签： javascript java android animation phonegap

【解决方案1】：

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

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

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

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

}, 3000/frames);

如果通过降低帧速率它显得更加滞后，您可以使用 CSS 过渡。这可能会使事情看起来反应迟钝

transition: 0.1s transform;

【讨论】：