FabricJS: an animation with a delay - Javascript Canvas

Javascript examples for Canvas:Animation

  1. HOME
  2. Javascript
  3. Canvas
  4. Animation

Description

FabricJS: an animation with a delay

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.7/fabric.js"></script> 
      <style id="compiled-css" type="text/css">

canvas {//from w ww .ja  va2  s. c  om
   border: 1px solid #333;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var fabric = window.fabric
var canvas = new fabric.StaticCanvas('c')
for (var i = 1; i < 4; i++){
   var clickedPulse = new fabric.Circle({
                    radius: 5,
                    fill: 'rgba(0,0,0,0)',
                    stroke: 'rgba(0,0,0,' + (1 - i / 4) + ')',
                    strokeWidth: 5,
                    left: 150,
                    top: 150,
                    selectable: false,
                    hasBorders: false,
                    hasControls: false,
                    originX: 'center',
                    originY: 'center'
                })
                canvas.add(clickedPulse);
                clickedPulse.animate({
                    radius: 100 - i*15,
                    opacity: 0
                },{
                    onChange: canvas.renderAll.bind(canvas),
                    duration: 600 + i*200,
                    onComplete: function() {
                        clickedPulse.remove();
                        canvas.renderAll();
                    }
                });
}
    }

      </script> 
   </head> 
   <body> 
      <canvas id="c" width="500" height="500"></canvas>  
   </body>
</html>

Related Tutorials