如何在不闪烁的情况下为对象设置动画

时间:2017-03-16 16:04:25

标签: javascript json animation setinterval fabricjs

请帮忙!我正在使用Fabric js来创建一个我希望能够创建对象动画的应用程序。

当我将对象移动(JSON)添加到数组然后使用set interval进行重放时。

有更好的方法吗?我不能在这些动画中使用图像,因为它们会闪烁。

谢谢..

$("#startAnimation").click(function(){
                  console.log(JSON);

        canvas.on(
        'object:modified', function () {

        addToAnim(true);
    },
        'object.moving', function () {
        addToAnim(true);
    });

   });


    function addToAnim(saveAnim) {
        if (saveAnim === true) {
            animJSON = JSON.stringify(canvas);
            animArray.push(animJSON);
        }
    }


    $("#animate").click(function(){
    playAnimation();
    });

        function playAnimation(){
        var animLength = animArray.length;
        var animateCanvas = setInterval(function(){
            canvas.clear().renderAll();
            canvas.loadFromJSON(animArray[animIndex++]);
          canvas.renderAll();

            if(animIndex >= animArray.length){
                animIndex = 0;      
                clearInterval(animateCanvas);
            //animIndex = (animIndex + 1) % animLength;


            }
        }, 50);

0 个答案:

没有答案