Question

我嘲笑了一个证明问题的MCVE。如果你点击红色方块，它会逐渐减小（大约10秒钟）到零，然后被删除。

然而，动画是自下而上而不是所需的自上而下。

有没有办法使用标准的fabricjs .animate方法？

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>
<script>
    $(function() {
        canvas = new fabric.Canvas('test');

        canvas.observe('mouse:down', function(e) {
            e.target.animate('height', 0, {
                onChange: canvas.renderAll.bind(canvas),
                duration: 10000,
                onComplete: function() { 
                    e.target.remove();                    
                    canvas.renderAll();
                }
            });
        });

        var rect = new fabric.Rect({
            top : 100,
            left : 100,
            width : 200,
            height : 200,
            fill : 'red',
            lockUniScaling: true,
            lockRotation: true,
            hasControls: false
        });

        canvas.add(rect);
        canvas.renderAll();
    });

</script>
<title>Test Test</title>
</head>
<body>
<canvas id="test" height="1000" width="1000"></canvas>
</body>
</html>

＆＃13;

Answer 1

试一试：

canvas.observe('mouse:down', function (e) {
    if (!e.target)
        return;
    e.target.animate('height', 0, {
        onChange : canvas.renderAll.bind(canvas),
        duration : 10000,
        onComplete : function () {
            e.target.remove();
            canvas.renderAll();
        }
    });
    //It is suitable if you know initial height... 
    e.target.animate('top', 300, {// initialHeight(100) + initialTop(200) 
        duration : 10000,
        onChange : canvas.renderAll.bind(canvas),
    });
});

example

example 2

此方法不是最佳方法，但可行！需要执行将更改 height 和 top 的自定义动画。

fabricjs rect对象的动画高度从顶部而不是从底部减小

1 个答案: