animation image - Fabric.js

animation image - Fabric.js

by tinyhustlee

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) {
    canvas.add(oImg);
    oImg.set('left',200);
    oImg.set('top', 10);
    oImg.set('opacity', 0.1);
    oImg.scale(.25);
    canvas.renderAll();

    // and then, we can animate the image    
    oImg.animate({ 'top': 100, 'opacity': 1 }, {
        onChange: canvas.renderAll.bind(canvas),
        easing: fabric.util.ease['easeOutCubic'],
        duration: 1500,
    });
});