Question

我刚刚开始使用Fabric.js，我有一个矩形页面，我希望动画鼠标悬停的不透明度，问题是FPS真的很低，当我有多个瓷砖和动画似乎比其持续时间设置为600毫秒要长很多。使用40个图块，它在整个动画中显示约5帧，并在开始新图块动画之前延迟。我想知道是否还有优化代码来加速FPS并摆脱延迟。

这是javascript：

        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;

        var numTiles = 8;
        var tileSize = windowWidth/numTiles;

        var yTiles = Math.ceil(windowHeight/tileSize);
        var totalTiles = numTiles*yTiles;

        var canvas = new fabric.Canvas('c', { width: windowWidth, height: windowHeight });

        var rect = new Array();
        var row = 0;
        var column = 0;

        for(var n = 0; n < totalTiles; n++) {
            if (n / numTiles % 1 == 0 && n != 0) {
                row++;
                column = 0;
            }

            rect[n] = new fabric.Rect({
                left: column,
                top: row*tileSize,
                fill: 'black',
                width: tileSize,
                height: tileSize,
                selectable: false
            });

            canvas.add(rect[n]);

            canvas.on('mouse:over', function(e) {
                e.target.animate('opacity', 0, {
                    onChange: canvas.renderAll.bind(canvas),
                    duration: 600
                });
            });

            column += tileSize;
        }

Answer 1

您正在设置鼠标：for循环中的回调。这意味着在鼠标悬停时，动画会在您进入for循环时执行多次（对于您的代码，我认为是32次）。

此代码：

canvas.on('mouse:over', function(e) {
    console.log('mouse:over');
    e.target.animate('opacity', 0, {
        onChange: canvas.renderAll.bind(canvas),
        duration: 600
    });
});

应该在for循环之外。

Fabric.js在多个对象上的低FPS动画不透明度

1 个答案: