p5.js 和 js 滞后的文本动画

Question

我有以下代码，它使用 p5.js 库的一部分以淡入 - 淡出方式为一些文本设置动画（无限循环），我还插入了一个图像以使事情更清晰。

问题是在第一个循环完成后（当整个文本出现然后开始消失时）我在浏览器中有严重的滞后，尽管它仍然可以正常工作并不断循环。我不确定我的代码中是否存在导致计算失败的错误，或者它是否对浏览器来说太重了运行.

我所有的变量都是不言自明的，但如果您有任何问题或需要我的脚本的其他部分，请务必问我。

有什么想法可以帮助我解决这个问题吗？谢谢。

//FADE animation /w Loop
    if ((animType == "FADE") && (animeLoop == true)) {
        if (animDirection == true) {
            for (i=0; i<userText.length; i++) {
                word = userText[i].html();
                posXcalc = 0;
                for (j=0; j<word.length; j++) {
                    textColor.setAlpha(charsOpacity[i][j]);
                    fill(textColor);
                    textSize(userSize);
                    text(word[j], userPosX + posXcalc, userPosY + (i * (userSize + userLeading)));
                    posXcalc = posXcalc + textWidth(word[j]);
                    if (charsOpacity[charsOpacity.length-1][charsOpacity[charsOpacity.length-1].length-1] < 255) {
                        //console.log("going");
                        if ((i == 0) && (j == 0) && (charsOpacity[i][j] < 255)) {charsOpacity[i][j] = charsOpacity[i][j] + speed;}
                        else if ((j == 0) && (i != 0)) {
                            temp = charsOpacity[i-1].length;
                            if ((charsOpacity[i-1][temp-1] > 50) && (charsOpacity[i][j] < 255)) {charsOpacity[i][j] = charsOpacity[i][j] + speed;}
                        }
                        else if (charsOpacity[i][j-1] > 50) {charsOpacity[i][j] = charsOpacity[i][j] + speed;}
                    }
                    else {animDirection = false;}
                }
            }
        }
        else {
            for (i=0; i<userText.length; i++) {
                word = userText[i].html();
                posXcalc = 0;
                for (j=0; j<word.length; j++) {
                    textColor.setAlpha(charsOpacity[i][j]);
                    fill(textColor);
                    textSize(userSize);
                    text(word[j], userPosX + posXcalc, userPosY + (i * (userSize + userLeading)));
                    posXcalc = posXcalc + textWidth(word[j]);
                    if (charsOpacity[charsOpacity.length-1][charsOpacity[charsOpacity.length-1].length-1] > 0) {
                        console.log("going");
                        if ((i == 0) && (j == 0) && (charsOpacity[i][j] > 0)) {charsOpacity[i][j] = charsOpacity[i][j] - speed;}
                        else if ((j == 0) && (i != 0)) {
                            temp = charsOpacity[i-1].length;
                            if ((charsOpacity[i-1][temp-1] < 200) && (charsOpacity[i][j] > 0)) {charsOpacity[i][j] = charsOpacity[i][j] - speed;}
                        }
                        else if (charsOpacity[i][j-1] < 200) {charsOpacity[i][j] = charsOpacity[i][j] - speed;}
                    }
                    else {animDirection = true;}
                }
            }
        }
    }

Answer 1

好的，经过大量的试验和错误我发现了问题，我在第二个 else if 语句中遗漏了一个检查并且数组接收到的值比 255 的范围大得多（这是setAlpha() 函数）一定会造成严重的滞后，因为它必须不断添加所有这些值并适当地重新计算其自身函数内的 alpha

p5.js 和 js 滞后的文本动画

Text animation with p5.js and js lagging

javascript

animation

p5.js