Проблема с анимацией через библиотеку Pts. js в браузере firefox - PullRequest
0 голосов
/ 03 апреля 2020

Я использую библиотеку Pts. js для создания простого фона анимации для моего проекта, и все было хорошо, пока я не протестировал его в FireFox (fre sh install ver. 84.0). Он использовал около 25-50% моего процессора (Ryzen 1500X), тогда как при использовании Chrome (и всего, что использует Chromium) используется 3-10%.

Итак, вопрос: можно ли это исправить?

Вот код:

Pts.namespace( window ); 
function floatySpace(space) {

  let colors = [
    "#2196F3", "#FF5D56", "#FF00FF", "#9ACD32", 
  ];
  let form = space.getForm()
  space.setup({ bgcolor: "#111217" });
      let pts = new Group();
      let angle, count ,line, mouse, r 
      let i = 0;





  space.add({
    start: () => {
      space.autoResize = true;
    },
    animate: function(time, fps, context) {

      i++;
      if(i >= 29) {
          if(-(window.innerWidth * 0.5) != angle) {
            pts = new Group()
            angle = -(window.innerWidth * 0.5);

            count = 55;
            line = [new Pt(0, angle), new Pt(space.size.x, 0)]
            mouse = space.pointer
            r =  Math.min(space.size.x, space.size.y);
            for (let i=0; i<count; i++) {
                let p = new Pt( Math.random()*r-Math.random()*r, Math.random()*r-Math.random()*r );
                p.brightness = 0.1
                pts.push( p );

            }
            pts.moveBy(space.center)
          }
            i=0
      }
      pts.rotate2D( Const.one_degree / 20, space.center);

      pts.forEach( (pt, i) => { 
        let ln = [pt, Line.perpendicularFromPt(line, pt)] 

        // opacity of line derived from distance to the line
        let opacity = Math.min( 0.8, 1 - Math.abs( Line.distanceFromPt(line, pt)) / r);
        let distFromMouse = Math.abs(Line.distanceFromPt(ln, mouse))

        if (distFromMouse < 50) {
          if (pts[i].brightness < 0.3) pts[i].brightness += 0.015
        } else {
          if (pts[i].brightness > 0.1) pts[i].brightness -= 0.01
        }
        form.stroke( false ).fill( colors[i % 3] ).point(pt, 1)
        let color = "rgba(255,255,255," + pts[i].brightness +")"
        form.strokeOnly(color).fill(true).line(ln);
      })


    },

    action: function(type, x, y, evt) {
      if (type=="move") {
        if(mouse !== undefined) {
          mouse = new Pt(x, y)
        }

      }
    }
  });

  space.bindMouse().play();

}
floatySpace(new CanvasSpace('#pt'))
#pt {
  width: 100vw;
  height: 100vh;

}
<div id='pt'></div>

Код Pen

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...