javascript - canvas html + javascript中的轨道位置

Question

我想做一些像这个网站https://theatreshowcase.boston这样的轨道/圆形或曲线路径动画

首先尝试我使用来自https://www.the-art-of-web.com/javascript/animate-curved-path的 javascript像这样

     
      var duration = 20; // seconds
      var gridSize = 150; // pixels
    
      var start = null;
      var stretchFactor;
    
      function step(timestamp)
      { 

        for (let i = 0; i < images.length; i++) {
          const image = images[i];
          var maxX = field.clientWidth - image.offsetWidth;
          var maxY = field.clientHeight - image.offsetHeight;

          var progress, x, y;
          if(start === null) {
            start = timestamp;
            stretchFactor = 1 + (Math.random() * 3);
          }
      
          progress = (timestamp - start) / duration / 1000; // percent
      
          x = Math.sin(progress * 2 * Math.PI); // x = ƒ(t)
          y = Math.cos(progress * 2 * Math.PI); // y = ƒ(t)
          var tx =  maxX/2 + ((gridSize+i) * x);
          var ty = maxY/2 + ((gridSize+i) * y);
      
          image.style.transform = `translate(${tx}px,${ty}px)`;
        
          
          
        }

        if(progress >= 1) start = null; // reset to start position

          requestAnimationFrame(step);
        
        
      }
    
      requestAnimationFrame(step);

不幸的是，性能很差，所以我决定使用画布

但我对算法感到困惑，我发现一个简单的方法是改变旋转位置，但我希望图像保持它的方向并且只改变它的位置

ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());

也许有人可以帮我找到一个简单的公式和算法

标签： javascripthtmlanimationcanvas