animation image - Fabric.js

animation image - Fabric.js

HTML

<canvas id="c" width="600" height="400"></canvas>

CSS

canvas {
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    margin: 5px;
}

JavaScript

var srcImg = "http://fabricjs.com/lib/pug.jpg";

// canvas
var canvas = new fabric.Canvas('c');

fabric.Image.fromURL(srcImg, function (oImg) {
    var scale = .25;
    canvas.add(oImg);
    oImg.set('left',0);
    oImg.set('top', 100);
    oImg.scale(.25);
    canvas.renderAll();

    // and then, we can animate the image    
    oImg.animate('left', 200, {
        onChange: canvas.renderAll.bind(canvas)
    });
    function animate() {
      //canvas.forEachObject(function(obj){ obj.animateWidthHeight(); obj.dirty = true; });
      scale = scale * 1.001;
      oImg.scale(scale); 
      console.log(scale);
      canvas.renderAll();
      if (scale < .5) setTimeout(animate, 10);
    }
    setTimeout(animate, 10);
});