Question

我们正在开发一个编辑器，可以在放置在画布上的图像上创建动画。感谢Fabric.js，绘制图像，调整大小，拖放等等一切顺利... 现在我们尝试通过将动画时间绑定到滑块来创建动画。

例：
- 对象A在第二个0和10之间从x1移动到y1 - 物体B在第二个1和5之间从x2移动到y2 当用户将滑块放在位置3时，两个对象都位于动画中间的某个位置。

有关如何完成此任务的任何提示或技巧？

我在这里有一些代码示例：https://jsfiddle.net/ewxx1Lqe/

var fabricCanvas;
var ballImage;
var playing = false;

$(document).ready(function () {
     $("#animationSlider").slider({        
        min: 0,
        max: 10,
        step: 1,
        value: 0
    });
    fabricCanvas = new fabric.Canvas("field", {
        backgroundColor: 'rgb(0,128,0)'
    });

     ballImage = fabric.Image.fromURL("http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg",     function (img) {
        img.width = 20;
        img.height = 20;
        img.left = 10;
        img.top = 10;
        img.hasControls = false;
        fabricCanvas.add(img);
        fabricCanvas.setActiveObject(img);
    });

    $("#btnPlay").click(function(){
        playing = true;
         fabric.util.animate({
            startValue: fabricCanvas.getActiveObject().get('left'),
            endValue: fabricCanvas.getActiveObject().get('left') + 200,
            duration: 5000,
            onChange: function (value) {
                fabricCanvas.getActiveObject().setLeft(value);
               fabricCanvas.renderAll();
            },
            onComplete: function () {
                fabricCanvas.getActiveObject().setCoords();
            },
            abort: function () {
                return !playing;
            }
        });
    }); 
    $("#btnPause").click(function(){
        playing = false;
    });
});

在播放动画时，滑块应滑动到相应的秒数。反之亦然，当滑动滑块时，球应该有活力。

Fabricjs动画绑定到滑块

0 个答案: