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

我正在使用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的动画。片段：

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

这在桌面Chrome上有所帮助，该网站虽然不那么落后，但仍然。。。不幸的是，在Firefox和移动设备上，它没有帮助

我知道画布有问题，因为当我将CSS设置为

display:none站点运行平稳

这是一个实时站点，您可以在其中看到结果：
目前只有第一节上的svg被设置动画。原始svg未被隐藏，但将被隐藏

@编辑
如果有其他框架或方法可以让我像正弦波一样为这条路径设置svg动画，请告诉我。我知道有一些SVG变形，但为每个SVG变形22条路径并正确调整这么多点将非常耗时。
在我的机器上，站点运行正常。但是，查看页面的时间线时，几乎要花费所有可用的GPU时间来进行合成。这是由于SVG的光栅化，调试控制台显示了SVG的22个层，每个层都被视为自己的画布（渲染后合成）。由于FX相对简单，您可以直接在画布上获得更好的性能渲染，或者减少SVG中的层数。此外，我刚刚查看了Paper.js，从他们的页面“Paper.js将向量数学视为一等公民”，然后我查看了他们的代码。这根本不是我所说的优化或头等舱。在
segment.point.y=segment.point.y+sinus*height/7这条线上自己试试看添加断点，然后跟踪paper.js对其所做的操作。您会发现，它只需执行64行代码（超过4个函数级别，我无法计数），就可以完成这一行。您真的需要使用paper.js吗？@Blindman67如果您使用而不是plain，它会这样对待它Javascript@NicholasKyriakides啊，这是可选的，gawd，你为什么要用它呢。但是核心paper.js代码更感兴趣的是确保程序员不会因为审查最基本的操作而在代码中绊倒，从而导致典型的OO效率低下。头等舱意味着，值得信赖，无需检查，代码快速，下腹脏污，在上面有一个甜蜜干净的表现。@Blindman67嘿，谢谢你的回答。如何将其直接渲染到画布？还有，FX代表什么？你说的合成是指脚本？当我在我的Chrome中检查时间线时，脚本消耗了所有的CPU并具体地填充了函数。如果没有paper.js，那么有什么可以替代这种svg的效果呢？
if(pageContainer.classList.contains('news'))