为什么我的屏幕淡入淡出效果只发生一次？-解网

问：

我写了一个屏幕淡入淡出效果，使屏幕开始变红，然后淡入黑色。当代码被调用时，它正常工作 - 只有一次;之后效果失败了，我不知道为什么。

export class FadeEffects {
    constructor(game) {
        this.game = game;
        this.width = 640;
        this.height = 480;
        this.fadeFinished = false;
        this.fade = 255;
    }//constructor()

    //this fade effect starts red transparent and fades to black
    fadeRed() {

        //now make the rectangle fade to black
        let fadeOut = setInterval(() => {
            console.log('in interval');
            this.fade -= 1;
            //when finished
            if (this.fade === 0) {
                this.fade = 255;
                this.fadeFinished = true;
                clearInterval(fadeOut);
            }//fade check
        }, 25);//fadeIn interval

        return this.fadeFinished;
    }//fadeRed()

    draw(context) {
        context.fillStyle = "rgba(" + this.fade + ", 0, 0, 0.5";
        context.fillRect(0, 0, this.width, this.height);
    }//draw()
}//class FadeEffects

然后，在调用函数中，FadeEffects 的对象被实例化，并且 toRemove 设置为 TRUE，fadeFinished 设置为 false。然后调用此代码：

if(!this.fadeFinished && toRemove === 'TRUE'){
            this.fadeFinished = this.fadeEffect.fadeRed();
            this.fadeEffect.draw(context);
        }

然后，准备就绪后，fadeFinished 再次设置为 false。但出于某种原因，效果仅在第一次有效。

JavaScript 入淡出效果

fadeFinished 应该做什么？在我看来，它会以 true 开头，然后一旦淡入淡出函数开始设置为 false，那么一旦淡入淡出完成，您就会再次将其设置为 true。所以 a）我不明白为什么它在构造函数中设置 false（而不是在 fadeRed 函数的开头）和 b）你说“然后在调用函数中，FadeEffects 的对象被实例化，toRemove 设置为 TRUE，fadeFinished 设置为 false”但你没有发布该代码，所以我不太确定这应该是什么样子。

答：

0赞 phatfingers 7/21/2023 #1

函数应在每次迭代时调用函数。我会考虑将它传递给您的构造函数，并让内部引用它。fadeReddrawcontextdraw

这是一个有效的测试页面。

<html>
<head>
<style>
#canvas { width: 640; height: 480; }
</style>
<script>
class FadeEffects {
    constructor(game, context) {
        this.game = game;
        this.width = 640;
        this.height = 480;
        this.fadeFinished = false;
        this.fade = 255;
        this.context = context;
    }//constructor()

    //this fade effect starts red transparent and fades to black
    fadeRed() {
        //now make the rectangle fade to black
        let fadeOut = setInterval(() => {
            console.log('in interval');
            this.fade -= 1;
            this.draw();
            //when finished
            if (this.fade === 0) {
                this.fade = 255;
                this.fadeFinished = true;
                clearInterval(fadeOut);
            }//fade check
        }, 25);//fadeIn interval

        return this.fadeFinished;
    }//fadeRed()

    draw() {
        this.context.fillStyle = "rgba(" + this.fade + ", 0, 0, 0.5";
        this.context.fillRect(0, 0, this.width, this.height);
    }//draw()
}//class FadeEffects
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas=document.getElementById('canvas');
const context=canvas.getContext('2d');
const rect=new FadeEffects(null, context);
rect.fadeRed();
rect.fadeRed();
</script>
</body>
</html>

为什么我的屏幕淡入淡出效果只发生一次？

Why does my screen fade effect only happen once?

评论

评论