如何使Greensock函数可重用的构造函数

Question

Link to working pen of one section

我有两个具有唯一ID的部分，当然要同时使用＃about-animation和＃intro-animation，但是必须避免重复。我如何在同一个新运算符中传递它们。使用唯一ID代替类名的原因是因为两个动画背景在背景上都应具有不同的动画形状（第一部分：球，第二部分正方形）。

(function() {
  "use strict";
  console.log('do init');

  let canvas, ctx, circleArray = [];

  function introAnimation() {
    canvas = new createCanvas("#intro-animation");
    ctx = canvas.context;
    let maxCols = 2;
    let maxItems = 6;
    for (let c = 0; c < maxCols; c++) {
      circleArray[c] = [];
      for (let i = 1; i < maxItems; i++) {
        let scale = i * 1.2;
        offsetX = (maxItems * 25) - (i * 25) + (c * 130);
        offsetY = i * 10;
        //  delay = (maxItems * 0.08) - (i * 0.08);
        let delay = (0.15) + ((i + c) * 0.15);
        circleArray[c].push(new Rectangle(20, 20, 12, 12, scale, delay, "#f9a810"));
      }
    }
  }

  function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    $.each(circleArray, function(ind, col) {
      $.each(col, function(index, value) {
        value.update();
      });
    });
  }

  function createCanvas(obj) {
    this.obj = $(obj);
    this.obj.attr('width', $(window).width());
    this.obj.attr('height', $(window).height());
    this.canvas = $(obj)[0];
    this.context = this.canvas.getContext("2d");
    this.width = $(obj).width();
    this.height = $(obj).height();
  }

  function Rectangle(x, y, dx, dy, radius, delay, fillStyle = "rgb(255,0,0,1)", autoAnimate = true) {
    this.x = Math.random() * 1000,
      this.y = 100,
      this.dx = dx,
      this.dy = dy,
      this.delay = delay,
      this.radius = radius,
      this.color = fillStyle,
      this.fill = fillStyle,
      this.fillStyle = fillStyle,
      this.canvas = ctx;
    this.draw = function() {
      ctx.beginPath();
      ctx.rect(this.x, this.y, this.dx, this.dy);
      this.fill = this.color,
        this.fillStyle = fillStyle,
        this.canvas.strokeStyle = this.border;
      this.canvas.lineWidth = 0;
      this.canvas.fillStyle = this.fillStyle;
      this.canvas.fill();
      // this.canvas.stroke();
    }
    this.animate = function() {
      TweenMax.to(this, 1, {
        delay: this.delay,
        fillStyleOpacity: 0.5,
        x: "+=0",
        y: "+=1200",
        repeat: -1,
        ease: Sine.easeInOut,
      });
    }
    this.update = function() {
      this.draw();
    }
    if (autoAnimate) this.animate();
  }

  $(document).ready(function() {
    console.log('intro-animation');

    function checkWidth() {
      var windowsize = $(window).width();
      if (windowsize > 991) {
        introAnimation();
        TweenMax.ticker.addEventListener("tick", loop);
      } else {
        return;
      }
    }

    checkWidth();
    $(window).resize(checkWidth);
  });
})();