user3469956 user3469956 - 5 months ago 9
jQuery Question

How to make Blinking text canvas animation

i am new in canvas scripting. i am try to build some condition in canvas, which the condition will showing text after the condition fulfilled. Here the conditions that i made.

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();
}


My question is how to add blinking text animation on it?,which the text animation will appear for a second and than hide until the other condition fulfilled.

K3N K3N
Answer

The easier way to keep track of objects with their own animation properties is to create objects representing them. This way you can drive an object using current time and independently.

For example (see comments):

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>