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

Question

我刚刚开始使用 Fabric.js，我有一个矩形页面，我想在鼠标悬停时对不透明度进行动画处理，问题是当我有多个图 block 时，FPS 非常低，并且动画似乎花费的时间比其持续时间设置的 600 毫秒长很多。对于 40 个图 block ，整个动画显示大约 5 帧，并在开始新图 block 的动画之前有一段延迟。我想知道是否有办法优化代码以加快 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 循环内设置 mouse:over 回调。这意味着，当鼠标悬停在上面时，动画会执行与传递到 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 循环之外。