Safari 中的 Javascript 动画真的很慢，但 Chrome 工作正常

问题描述

我正在使用一个名为 paper js 的 javascript 库来渲染标签上图块中的图像。然后，您可以拖动鼠标以向任何方向滚动视图，图块将“无休止地”流动。它有效，但我不是真正的专业人士或任何东西，所以我很想知道我的代码的想法以及可能为什么它在 Safari 上运行非常缓慢，但在 Chrome 上运行良好。我也很想听听关于代码的想法。我知道这是很多代码，所以如果您花时间检查一下，我将非常感激。哦，这是在 wordpress 网站上运行的，所以它有一些 jQuery。如果我能澄清任何事情，请告诉我。谢谢。

import paper from 'paper';
import axios from 'axios';

// I have another file that runs specifically on the homepage where I can homepageCanvas()
export function homepageCanvas() {
  // Get a reference to the canvas object <canvas id="homeGrid" resize></canvas>
  let canvas = document.getElementById('homeGrid');
  paper.setup(canvas);

  function drawImagePattern(projectData,reshuffle = false,fullColor = false) {
    if (!projectData) return; // abort,doesn't exist

    let totalProjects = projectData.projects.length;
    let gridTotal = 40;
    let gridWidth = gridTotal*0.25;
    let gridHeight = gridTotal/gridWidth;
    let counter = 0;

    let xOffset = 0;
    let yOffset = 0;
    let offset = {
      x: xOffset,y: yOffset,};

    let tweens = [];

    if (!reshuffle) {
      paper.view.size.width = gridWidth * (screenSizeWidthAdjustment(projectData.projects[0]) + screenSizeGutteradjustment(projectData.gutter)) - 10;
      paper.view.size.height = gridHeight * (screenSizeHeightAdjustment(projectData.projects[0]) + screenSizeGutteradjustment(projectData.gutter)) - 10;
    }

    function screenSizeWidthAdjustment(project) {
      if ($(window).width() <= 1024 && $(window).width() > 600) {
        return project.tablet_thumbnail[1];
      }

      if ($(window).width() <= 600) {
        return project.mobile_thumbnail[1];
      }

      return project.thumbnail[1];
    }

    function screenSizeHeightAdjustment(project) {
      if ($(window).width() <= 1024 && $(window).width() > 600) {
        return project.tablet_thumbnail[2];
      }

      if ($(window).width() <= 600) {
        return project.mobile_thumbnail[2];
      }

      return project.thumbnail[2];
    }

    function screenSizeSrcAdjustment(project) {
      if ($(window).width() <= 1024 && $(window).width() > 600) {
        return project.tablet_thumbnail[0];
      }

      if ($(window).width() <= 600) {
        return project.mobile_thumbnail[0];
      }

      return project.thumbnail[0];
    }

    function screenSizeGutteradjustment(gutter) {
      if ($(window).width() <= 1024) {
        return gutter * .5;
      }

      return gutter;
    }

    for (let j = 0; j < gridTotal; j++) {
      if (counter % totalProjects == 0) {
        counter = 0;
      }

      if (!screenSizeWidthAdjustment(projectData.projects[counter]) || !projectData.projects[counter]) return; // abort,doesn't exist

      let title = new paper.PointText({
        content: projectData.projects[counter].Meta.title,opacity: 0,fontWeight: 'bold',fontSize: '13px',name: 'title',reference: 'rect-1-title',fillColor: '#fff',});

      let tagline = new paper.PointText({
        content: projectData.projects[counter].Meta.tagline,fontWeight: 'lighter',reference: 'rect-1-tagline',name: 'tagline',});

      //create image
      let raster = new paper.Raster({
        source: screenSizeSrcAdjustment(projectData.projects[counter]),width: screenSizeWidthAdjustment(projectData.projects[counter]),height: screenSizeHeightAdjustment(projectData.projects[counter]),name: 'raster',opacity: 0.7,reference: 'rect-1-raster',});

      //create rectangle to create the grayscale effect
      let rect = new paper.Path.Rectangle({
        width: screenSizeWidthAdjustment(projectData.projects[counter]),fillColor: fullColor == false ? '#000000' : 'rgba(0,0.0001)',opacity: 1,blendMode: 'hue',name: 'rect-1',referenceNumber: j,permalink: projectData.projects[counter].Meta.permalink,});

      //calculate xOffset and yOffset
      xOffset = screenSizeWidthAdjustment(projectData.projects[counter]) + screenSizeGutteradjustment(projectData.gutter) + offset.x;

      if (j % 10 == 0) {
        xOffset = 0;
        yOffset = String(j).charat(0) * (screenSizeHeightAdjustment(projectData.projects[counter]) + screenSizeGutteradjustment(projectData.gutter));
      }

      // RESET OFFSET
      offset = {
        x: xOffset,};

      //image position
      raster.bounds.left = paper.view.size.width/3;
      raster.position.y = paper.view.size.height/2.5;
      //image grey blend rect position
      rect.bounds.left = paper.view.size.width/3;
      rect.position.y = paper.view.size.height/2.5;
      //image Meta title position
      title.bounds.left = paper.view.size.width/3;
      title.bounds.bottom = paper.view.size.height/2.5;
      //image Meta tagline position
      tagline.bounds.left = paper.view.size.width/3;
      tagline.bounds.bottom = paper.view.size.height/2.5;

      let tweenRaster = raster.tweenTo({
        'bounds.left': offset.x,'position.y': offset.y,},{
        duration: 1000,start: false,easing: 'eaSEOutCubic',});

      let tweenRect = rect.tweenTo({
        'bounds.left': offset.x,});

      let tweenTitle = title.tweenTo({
        'bounds.left': offset.x,'position.y': offset.y + raster.height/2 + 17,});

      let tweenTagline = tagline.tweenTo({
        'bounds.left': offset.x,'position.y': offset.y + raster.height/2 + 34,});

      tweens.push(tweenRaster,tweenRect,tweenTitle,tweenTagline);

      //setup the static click on an image take it to post permalink
      let downPos = {};

      rect.onMouseDown = (event) => {
        downPos = event.point;
      }

      rect.onmouseup = function(event) {
        let upPos = event.point;
        let delta = upPos.subtract(downPos);

        if (delta.x == 0 && delta.y == 0) {
          window.location.href = this.permalink;
        }
      }

      counter++;
    }

    let rects = paper.project.getItems({
      class: 'Path',});

    let raster = paper.project.getItems({
      class: 'Raster',});

    let titles = paper.project.getItems({
      class: 'PointText',});

    let taglines = paper.project.getItems({
      class: 'PointText',});

    rects.map((rect) => {
      rect.onMouseEnter = function() {
        if (!scrolling) {
          this.tweenTo({
            opacity: 0,200);

          raster[this.referenceNumber].tweenTo({
            opacity: 1,200);

          titles[this.referenceNumber].tweenTo({
            opacity: 1,350);

          taglines[this.referenceNumber].tweenTo({
            opacity: 1,350);
        } else {
          this.opacity = 1;

          titles[this.referenceNumber].opacity = 0;
          taglines[this.referenceNumber].opacity = 0;
        }
      };

      rect.onMouseLeave = function() {
        setTimeout(() => {
          this.tweenTo({
            opacity: 1,200);

          raster[this.referenceNumber].tweenTo({
            opacity: 0.7,200);

          titles[this.referenceNumber].tweenTo({
            opacity: 0,// 'bounds.bottom': this.bounds.bottom,350);

          taglines[this.referenceNumber].tweenTo({
            opacity: 0,350);
        },200);
      };
    });

    setTimeout(() => { $('#homeGrid').addClass('active'); },200);

    for (let q = 0; q < tweens.length; q++) {
      tweens[q].start();
    }
  }

  // This is setting up for a "toss" effect with the mouse.
  // You can click,drag,unclick and depending on how far and fast you do that the screen will continue scrolling a little
  let viewDownPos = {};
  let downTime = '';

  paper.view.onMouseDown = (event) => {
    viewDownPos = event.point;
    downTime = event.timeStamp;
  }

  paper.view.onmouseup = (event) => {
    let viewUpPos = event.point;
    let delta = viewUpPos.subtract(viewDownPos);
    let timedelta = Math.abs(downTime - event.timeStamp);

    for (let i = 0; i < paper.project.activeLayer.children.length; i++) {
      let item = paper.project.activeLayer.children[i];

      if (timedelta < 350) {
        item.tween({
          'position.x': ['+=',delta.x/3],'position.y': ['+=',delta.y/3],{
          easing: 'eaSEOutCubic',duration: 350,});
      }

      if (timedelta > 350 && timedelta < 600) {
        item.tween({
          'position.x': ['+=',delta.x/5],delta.y/5],});
      }

      if (timedelta > 650 && timedelta < 1000) {
        item.tween({
          'position.x': ['+=',delta.x/8],delta.y/8],});
      }
    }
  }

  let scrolling = false;

  paper.view.onMouseDrag = function (event) {
    scrolling = true;

    $('.home-holder .explanation').addClass('hide-me');

    for (let i = 0; i < paper.project.activeLayer.children.length; i++) {
      let item = paper.project.activeLayer.children[i];

      item.position.x += event.delta.x;
      item.position.y += event.delta.y;

      if (item.name == 'tagline' || item.name == 'title') {
        item.opacity = 0;
      }

      if (item.name == 'rect') {
        item.tweenTo({
          opacity: 1,200);
      }

      //swiping to right
      if (item.position.x > paper.view.size.width) {
        item.position.x = item.position.x - paper.view.size.width;
      }

      //swiping to left
      if (item.position.x < 0) {
        item.position.x = paper.view.size.width + item.position.x;
      }

      //swiping to up
      if (item.position.y < 0) {
        item.position.y = item.position.y + paper.view.size.height;
      }

      //swiping to down
      if (item.position.y > paper.view.size.height) {
        item.position.y = item.position.y - paper.view.size.height;
      }
    }

    setTimeout(function() {
      scrolling = false;
    },750);
  }

  $(window).on('wheel',function(e) {
    scrolling = true;

    $('.home-holder .explanation').addClass('hide-me');

    for (let i = 0; i < paper.project.activeLayer.children.length; i++) {
      let item = paper.project.activeLayer.children[i];

      item.position.x -= e.originalEvent.deltaX;
      item.position.y -= e.originalEvent.deltaY;

      if (item.name == 'tagline' || item.name == 'title') {
        item.opacity = 0;
      }

      if (item.name == 'rect') {
        item.tweenTo({
          opacity: 1,750);
  });

  if ($(window).width() > 1024) {
    $('.home-holder .project-types').on('mouSEOver',function() {
      if (!scrolling) {
        $('.home-holder').addClass('category-hover');
      }
    });
  } else {
    $('.home-holder .project-types').removeClass('active');

    $('.home-holder .project-types').on('click',function(e) {
      if (!scrolling) {
        e.preventDefault();
        $('.home-holder .project-types').toggleClass('active');
        $('.home-holder').toggleClass('category-hover');
      }
    });
  }

  if ($(window).width() > 1024) {
    $('.home-holder .project-types').on('mouseleave',function() {
      $('.home-holder').removeClass('category-hover');
    });
  }

  $('.home-holder .project-types li').on('click',function() {
    if (!$('.home-holder').hasClass('category-hover')) { return false; }

    $('.home-holder .project-types li').removeClass('active');
    $(this).addClass('active');

    $('.home-holder .project-types').css('pointer-events','none');
      setTimeout(() => { $('.home-holder .project-types').css('pointer-events','all'); },1500);

    if ($(window).width() > 1024) {
      $('#homeGrid').removeClass('active');
      $('.home-holder').removeClass('category-hover');
    } else {
      setTimeout(function() {
        $('#homeGrid').removeClass('active');
        $('.home-holder').removeClass('category-hover');
        $('.home-holder .project-types').removeClass('active');
      },250);
    }

    setTimeout(() => { $('.home-holder .project-types').css('pointer-events',1500);

    let projectType = $(this).data('type');

    if (projectType == 'show-all') {
      setTimeout(() => { getProjects(); },500);
    } else {
      setTimeout(() => { getProjects(projectType); },500);
    }
  });

  let thumbnailData = new FormData;
    thumbnailData.append('action','get_project_data');

  function getProjects(projectType = false) {
    if (projectType) {
      let categoryData = new FormData;
      categoryData.append('project_type',projectType);
      categoryData.append('action','get_project_data_by_project_type');

      axios({
        method: 'post',url: ajax_url,withCredentials: true,data: categoryData,})
      .then((response) => {
        paper.project.clear();
        return drawImagePattern(response.data,true,true);
      })
      .catch((error) => {
        console.log(error);
      });
    } else {
      axios({
        method: 'post',data: thumbnailData,})
      .then((response) => {
        paper.project.clear();
        return drawImagePattern(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
    }
  }

  //for some reason it doesn't render the very first post,so I have to remove then rerender...
  getProjects();

  $(window).on('resize',function() {
    paper.project.clear();
    getProjects();
  });
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）