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

我刚开始使用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;
        }

var windowWidth=window.innerWidth；
var windowHeight=window.innerHeight；
var numTiles=8；
var tileSize=窗宽/numTiles；
var yTiles=Math.ceil（窗高/瓷砖尺寸）；
var totalTiles=numTiles*yTiles；
var canvas=new fabric.canvas（'c'，{width:windowWidth，height:windowHeight}）；
var rect=新数组（）；
var行=0；
var列=0；
对于（var n=0；n

您正在for循环内设置鼠标：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循环之外。

您正在for循环内设置鼠标：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循环之外。

您正在for循环内设置鼠标：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循环之外。

您正在for循环内设置鼠标：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循环之外