我怎樣才能讓我的 animation 在淡出之前停止？

Question

我無法讓我的徽標在淡出前停留 3 秒，我不想使用 jquery，我使用的是純 javascript。 我基本上想要的是我的標志

淡入 | 停止 3 秒 | 消退

到目前為止，沒有停頓地淡入淡出。 我該怎么做？ 怎么了？

我知道我可能不應該使用相同的間隔或者可能使用超時，但不確定 go 會不會，我嘗試了很多沒有成功的事情，我仍然需要找到一種方法來延遲淡出可能 1或 2 秒。 我還創建了一個 function 等待，這會延遲一段時間，但仍然不確定在哪里調用 function，因為它沒有按我的預期工作。 謝謝！！

document.body.onload=setupCanvas();
var bluex = 140;
var bluey = 400;
var greenx = 1220;
var greeny = 400;
var redx = 680;
var redy = -95;
var imgx = 1355;
var imgy = 290;
var countdown = 400;
var opacity = 0;
var intervalID = 0;
var intervalID2 = 0;
var cancelled = false;

function setupCanvas(){
    var canvas = document.getElementById("logo-animation");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        drawBackground();
        img = document.createElement("img");
        img.src = "../images/ts.png";
        img.alt = "Tranquil Services logo";
        
     window.setInterval(draw, 36);
     window.setInterval(show, 100);
     window.setInterval(hide, 100); 
    }
    
function draw(){
         
    if (countdown < 600){
                            countdown+= 20;
                            imgx -= 60;
                            bluex +=50;
                            redy +=45;
                            greenx -= 50;
                            
                            drawBackground();
                            ctx.drawImage(img,imgx,imgy);
                            
                        }   
                }

    function show() {
                        var canvas = document.getElementById("logo-animation");
                        opacity = Number(window.getComputedStyle(canvas)
                                         .getPropertyValue("opacity"));
                        if (opacity < 1) {
                            opacity = opacity + 0.1;
                            canvas.style.opacity = opacity
                        } else{
                            clearInterval(intervalID);
                            //canvas.style.display = "none";
                        }
                    }
                    
                                
function hide(){

          var body=document.getElementById("canvas");
          opacity =
 Number(window.getComputedStyle(body).getPropertyValue("opacity"))
            if(opacity>0){
                   opacity=opacity-0.1;
                           body.style.opacity=opacity
            }
            else{
                clearInterval(intervalID); 
            }
        } 

function drawBackground(){

    ctx.fillStyle = '#ffffff';
    ctx.rect(0, 0, 1920, 1080);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(bluex, bluey, 50, 0, 2 * Math.PI, false);
    ctx.strokeStyle = "#1a52c2";
    ctx.lineWidth = 10;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(redx, redy, 50, 0, 2 * Math.PI, false);
    ctx.strokeStyle = "#c21a43";
    ctx.lineWidth = 10;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(greenx, greeny, 50, 0, 2 * Math.PI, false);
    ctx.strokeStyle = "#2c981d";
    ctx.lineWidth = 10;
    ctx.stroke();

}
}```

Answer 1

我似乎無法讓您的代碼正常工作，所以我所能做的就是為您提供另一種方法。

我正在使用requestAnimationFrame通過增加fade來控制淡入淡出速度。 如果某人具有更快的刷新率，這可以改變淡入淡出速度。 我也使用setInterval作為時鍾，所以當它在淡入后 3 秒時它會淡出。

這也可以通過使用關鍵幀的 CSS 來完成。

 let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); canvas.width = 640; canvas.height = 360; let alpha = 0; let fade = 0; let clock = 0; let logo = new Image(); logo.src = "https://i2.wp.com/bestlifeonline.com/wp-content/uploads/2018/09/tostitos.jpg?resize=640%2C360&ssl=1"; let animateImage = (a) => { ctx.globalAlpha = a; ctx.drawImage(logo, 0, 0) } function secondsClock() { clock += 1; } let clockInt = setInterval(secondsClock, 1000); let animate = () => { ctx.clearRect(0,0,canvas.width, canvas.height) fade < 400? fade++: fade = 400; if (alpha < 1 && clock > 1 && clock < 4 && fade%1==0) { alpha+=0.1; } if (alpha >= 0 && clock > 4 && fade%1==0) { alpha-=0.1; } animateImage(alpha); requestAnimationFrame(animate) } animate();

 <canvas id="canvas"></canvas>

CSS 選項

 #logo { width: 630px; height; 340px; opacity:0; animation: fade 4s linear forwards; } @keyframes fade { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }

 <img src="https://i2.wp.com/bestlifeonline.com/wp-content/uploads/2018/09/tostitos.jpg?resize=640%2C360&ssl=1" id='logo'>