如何使閃爍的文字畫布動畫

Question

我是新的畫布腳本。我嘗試在畫布上創建一些條件，條件滿足後條件將顯示文字。在這裏，我所做的條件。

if(fictionMeter > 26 && fictionMeter < 37) { 

     ctx.fillStyle = "#e86f14"; 
     ctx.font = "25px Bangers"; 
     ctx.fillText(
      "Alert Condition 1", 
      mx + 55, 
      my - 25 
     ); 

     ctx.font = "14px Bangers"; 
     ctx.fillText(
      "add some extra condition", 
      mx - 55, 
      my - 8 
     ); 
    } 

    if(fictionMeter > 37) { 

     ctx.fillStyle = "#d5292b"; 
     ctx.font = "25px Bangers"; 
     ctx.fillText(
      "DANGER CONDITION ONE", 
      mx + 45, 
      my - 25 
     ); 

     ctx.font = "14px Bangers"; 
     ctx.fillText(
      "DANGER extra condition one", 
      mx - 10, 
      my - 8 
     ); 
    } 

    ctx.restore(); 
} 

我的問題是如何增加它閃爍的文字動畫？，其文本動畫會出現一秒鐘，不是隱藏，直到其他條件滿足。

Answer 1

使用自己的動畫屬性跟蹤對象的更簡單的方法是創建表示它們的對象。這樣，您可以使用當前時間和獨立地驅動對象。

例如（見註釋）：

var ctx = c.getContext("2d"), bg = 0, db = 0.01; 
 

 
// BlinkText objects which will hold appearance and timings 
 
function BlinkText(txt, x, y, interval) { 
 
    this.text = txt; 
 
    this.x = x; 
 
    this.y = y; 
 
    this.interval = interval; 
 
    this.font = "bold 20px sans-serif"; 
 
    this.color = "#f00"; 
 
    this.active = false; 
 
    this.time = 0; 
 
    this.toggle = true; 
 
} 
 

 
// If several instances is to be defined, use prototypal approach 
 
BlinkText.prototype = { 
 
    start: function(time) { 
 
    this.time = time;  // store start time to calc. delta 
 
    this.active = true;  // enable drawing in render() 
 
    this.toggle = true;  // reset toggle flag so first check is "on" 
 
    }, 
 
    
 
    stop: function() { 
 
    this.active = false;  // disable drawing in render() 
 
    }, 
 
    
 
    render: function(ctx) { // render if active 
 
    if (this.active) { 
 
     if (this.toggle) {  // are we on nor off? 
 
     ctx.font = this.font; 
 
     ctx.fillStyle = this.color; 
 
     ctx.fillText(this.text, this.x, this.y); // render text if on 
 
     } 
 
     
 
     // calc time interval and toggle every other time 
 
     var time = performance.now(); 
 
     if (time - this.time >= this.interval) { // passed interval? 
 
     this.time = time;      // update start time 
 
     this.toggle = !this.toggle;    // toggle state 
 
     } 
 
    } 
 
    } 
 

 
}; 
 

 
// create a couple of instances 
 
var txt1 = new BlinkText("Hello there..", 50, 50, 500); 
 
var txt2 = new BlinkText("This is blinking too", 100, 90, 900); 
 
var txt3 = new BlinkText("All independant, but controlable...", 10, 120, 300); 
 
txt2.color = "#00f";    // set some custom properties 
 
txt3.font = "16px sans-serif"; 
 
txt3.color = "#090"; 
 

 
(function loop() { 
 
    // draw other stuff 
 
    ctx.fillStyle = "hsl(0,0%, " + (bg * 40) + "%)"; 
 
    ctx.fillRect(0, 0, c.width, c.height); 
 
    txt1.render(ctx); // call render() regardless of state 
 
    txt2.render(ctx); 
 
    txt3.render(ctx); 
 

 
    bg += db; 
 
    if (bg <0 || bg > 1) db = -db; 
 
    requestAnimationFrame(loop) 
 
})(); 
 

 
bstart.onclick = function() { 
 
    txt1.start(performance.now()); // init start with current time 
 
    txt2.start(performance.now()); 
 
    txt3.start(performance.now()); 
 
}; 
 

 
bstop.onclick = function() { 
 
    txt1.stop(); 
 
    txt2.stop(); 
 
    txt3.stop(); 
 
};

<canvas id=c></canvas><br> 
 
<button id=bstart>Start</button> <button id=bstop>Stop</button>