p5.j​​s和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

好的，经过大量的试验和错误后我发现了问题，我错过了在sencond的检查，如果语句和数组接收的值远大于255的范围（这是setAlpha的上限） （）函数）必须创建严重滞后，因为它必须继续添加所有这些值并且可以在其自身函数内重新计算alpha