Fabric.js Object Animation

Question

asked Jun 24, 2021 in Web Technology by sapna_tiwari (140 points)

I have tried to animate single object from left to right.

Script File

function startAnimationQueue(animationQueue){
    var runningDuration = 0;
for (var i=0; i<animationQueue.length; i++){
    var animationDefinition = animationQueue[i];
    var fn = (function(animationDefinition){
    return function(){
    rectangle.animate('left', animationDefinition.left, {duration: animationDefinition.duration, onChange:canvas.renderAll.bind(canvas)})
    };
})
    window.setTimeout(fn(animationDefinition), runningDuration);

        runningDuration += animationDefinition.duration;
    }
        }
    document.onreadystatechange = function () {


    if (document.readyState == "complete") {
        window.canvas = new fabric.Canvas('rect');
        window.rectangle = new fabric.Rect({
            width: 700,
            height: 35,
            fill: 'black',
            left: 275,
            top: 30,
            opacity: 0.75,
            selectable: false
        });

        window.canvas.add(window.rectangle);
        var y = 80;
        for(var i=0; i<9; i++){
            var clone = fabric.util.object.clone(window.rectangle);
            clone.set({left: 275,top: y, selectable: false});
            canvas.add(clone);
            y = y + 50;
        }
        window.canvas.renderAll();

        var animationQueue = [
            {"left": "+=80", "top": "+=0", "duration": 1000},
        ]

        startAnimationQueue(animationQueue);
      }
    }

HTML file

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="fabric.js"></script>
    <style>
        div {
          background-image: url('stadium.jpg');
        }
        </style>
</head>
<body>
    
    
    <canvas id="rect" width="1600" height="800"></canvas>
    <script src="animate-rect.js"></script>
    
</body>
</html>

the above code is working fine. Want to animate clone objects one after another. Please help me with this.

Fabric.js Object Animation

Fabric.js Object Animation

Please log in or register to add a comment.

Please log in or register to answer this question.

0 Answers

Related questions

Browse Categories

Popular Courses

Top Tutorials

Top Articles

Top Interview Questions