Question

我使用paper.js来动画我的svg图像，问题是画布性能。所以我将svg插入到网站的html，然后用paper.js我在画布上绘制它并制作动画。这是js代码。

var originalSVG = document.getElementById('news_habaz'),
    pageContainer = document.querySelector('.page-container'),
    context, path, path2, length, length2, height, originalHeight, scaleCanvas;

function drawImg() {
  context = document.getElementById('newsCanvas').getContext('2d');

  originalWidth = originalSVG.getBoundingClientRect().width;
  scaleCanvas = originalWidth / 781;
  height = 2*scaleCanvas;

  console.log(originalSVG.height);
  project.clear();
  project.importSVG(originalSVG);

  paper.view.setCenter(390,350);

  path = project.activeLayer.scale(scaleCanvas).firstChild.children[2].children;
  path2 = project.activeLayer.firstChild.children[1].children;
  length = path.length;
  length2 = path2.length;
}


function onResize(event) {
  drawImg();
}


function onFrame(event) {


  if(pageContainer.classList.contains('news')) {

    for (var k = 0; k < length; k++){
      for (var i = 0; i < path[k].segments.length; i++) {
            var segment = path[k].segments[i];

            var sinus = Math.sin(event.time*1.5 + i/2);
        var cosinus = Math.cos(event.time + i/4);

        segment.point.y = segment.point.y + sinus* height/7;
        segment.point.x = segment.point.x + sinus* height/8;
        }
    }

    for (var k = 0; k < length2; k++){
      for (var i = 0; i < path2[k].segments.length; i++) {
            var segment = path2[k].segments[i];

            var sinus = Math.sin(event.time*1.5 + i/2);
        var cosinus = Math.cos(event.time + i/4);

        segment.point.y = segment.point.y - sinus* height/9;
        segment.point.x = segment.point.x + sinus* height/6;

        }
    }
  } else {return;}


}

drawImg();

console.log(project.activeLayer.children[0].children[1], path, path[0].segments[0].point.x);

找到svg，导入。然后在画布上绘制它。调整大小时再次完成。最大的问题是我点击菜单按钮，它是滚动网站，网站似乎非常滞后。另一方面，当我切换到mobileview时，所有部分都可见，并通过鼠标滚动滚动，网站是平滑的。我正在使用这段代码（点击时）动画它，当它转换为所需的部分时。

sectionContainer.css('transform', 'translateY(-' + position*100 + '%)');

我在网站上的某个元素中添加了一些类，以查看哪个部分处于活动状态，并且仅在此部分为svg设置动画。片段：

if(pageContainer.classList.contains('news'))

这对桌面Chrome有帮助，该网站的网站有点迟钝但仍然......不幸的是在Firefox和移动设备上它并没有帮助。

我知道画布是有问题的，因为当我将CSS设置为display:none;时，网站移动顺畅。

以下是您可以查看结果的实际网站：http://rafalzwolak.pl/Kreatywni/ 目前只有第一部分的svg正在动画。原始的svg不是隐藏的，但它会是。

@edit 如果有一些替代框架或方法可以让我像sine-waving一样动画这条路径，请告诉我。我知道有一些SVG变形，但每个svg变形22个路径并正确调整这么多点会非常耗时。

在画布上使用paper.js的SVG正弦波动画，替代方案？

0 个答案: