Using animation move 100 objects

[ShaunG0]

it takes a lot of memory and the browser is very laggy. How should I optimize animations or canvas objects?
I even need to add styles to objects or fill in images, but the current motion scene has already made me stop.

`setup() {
let squares = [];
let panels = [];
let canvas: any = null;
const ifDrag = ref(true);
const index = ref(1);

const createSquare = (top, left) => {
  return new fabric.Rect({
    top: top,
    left: left,
    width: 20,
    height: 10,
    fill: "red",
    selectable: false,
  });
};


const createPanel = (top, left) => {
  let panel = new fabric.Rect({
    top: top,
    left: left,
    width: 20,
    height: 1000,
    fill: "blue",
    // selectable: false,
  });

  let lines = [];
  for (let i = 10; i <= 1000; i += 10) {
    lines.push(new fabric.Line([left, top + i, left + 20, top + i], {
      stroke: "blue",
      strokeWidth: 2
    }));
  }


  let objects = [panel].concat(lines);
  let group = new fabric.Group(objects, {
    selectable: false
  });

  return group;
};

const createSquares = () => {
  for (let i = 1; i < 100; i++) {
    const panel = createPanel(20, 20 + i * 50);
    canvas.add(panel);
    const obj = {
      id: i,
      panel: panel,
      lastAdd: i === 99
    };
    panels.push(obj);
  }

  for (let i = 0; i < 100; i++) {
    const square = createSquare(20, 20 + i * 50);
    canvas.add(square);
    const obj = {
      id: i,
      square: square,
      lastAdd: i === 99
    };
    squares.push(obj);
  }


};
const startMove = () => {

  fabric.util.easeLinear = function(t, b, c, d) {
    return c * t / d + b;
  };
  squares.forEach(item => {
    item.square.animate("top", 1000, {
      // onChange: canvas.renderAll.bind(canvas),
      onChange: () => {
        if (item.lastAdd) canvas.renderAll();
      },
      duration: 30000,
      easing: fabric.util.easeLinear,
    });
  });
};

`

[ShaMan123]

object#animate is suboptimal, I suggest avoiding using it (unless you are animating a single object).
Use the util.animate export

[ShaMan123]

related #9538