javascript - mojs动画在滚动后在对象的旧位置触发

Question

https://codepen.io/mprquinn/pen/OmOMrR/
credit: Mike Quinn

以下代码将鼠标悬停在链接上时触发动画。据我了解代码，每次调用函数时，x 和 y 坐标都应该更新位置，因为 getBoundingClientRect() 应该在文档滚动时更新坐标...

如果将鼠标悬停在链接上而不滚动页面，您将按预期看到链接周围的动画，但如果滚动文档，则会在链接上方触发动画。我注意到在控制台中，当滚动文档并调用 getBoundingClientRect() 时，X 和 Y 不会更新...

const links = document.querySelectorAll('a');
    links.forEach(link => link.addEventListener('mouseenter', shootLines));    

    function shootLines(e) {    
      const itemDim = this.getBoundingClientRect(),
            itemSize = {
              x: itemDim.right - itemDim.left,
              y: itemDim.bottom - itemDim.top,
            },
            shapes = ['line'],
            colors = ['#2FB5F3',
                      '#FF0A47',
                      '#FF0AC2',
                      '#47FF0A'];
      
      const chosenC = Math.floor(Math.random() * colors.length),
            chosenS = Math.floor(Math.random() * shapes.length);
      
      // create shape
      const burst = new mojs.Burst({
        left: itemDim.left + (itemSize.x/2),
        top: itemDim.top + (itemSize.y/2),
        radiusX: itemSize.x,
        radiusY: itemSize.y,
        count: 8,
        
        children: {
          shape: shapes[chosenS],
          radius: 10,
          scale: {0.8: 1},
          fill: 'none',
          points: 7,
          stroke: colors[chosenC],
          strokeDasharray: '100%',
          strokeDashoffset: { '-100%' : '100%' },
          duration: 450,
          delay: 100,
          easing: 'quad.out',
          isShowEnd: false,
        }
      });
      
      burst.play();
    }

.container {
  margin-top: 20%;
  height: 110vh;
}

<div class="container"><a href="javascript:void(0);">test</a></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.2/mo.min.js"></script>

Answer 1

您只需为每个链接元素定义一次突发。我修改了代码以迭代链接并定义链接上的突发。在函数的末尾，我添加了一个事件监听器来播放突发。

您面临的问题是您正在使用 getBoundingClientRect，它给出了元素的视口(viewport)坐标。默认情况下，Burst 在文档主体元素(文档坐标)之外进行操作。当您滚动时，链接元素的文档坐标永远不会改变，但视口(viewport)坐标会改变。请参阅here简单的解释。

这基本上与您的代码相同，只是进行了修改以添加事件监听器以在最后播放突发。我相信这也会更有效，因为它不会在每次鼠标进入元素时创建新的突发实例。您链接到的 codepen 效率非常低，因为每次悬停链接时它都会在文档中创建新的突发元素，也会导致内存泄漏。

const links = document.querySelectorAll('a');
    links.forEach(link => {    
      const itemDim = link.getBoundingClientRect(),
            itemSize = {
              x: itemDim.right - itemDim.left,
              y: itemDim.bottom - itemDim.top,
            },
            shapes = ['line'],
            colors = ['#2FB5F3',
                      '#FF0A47',
                      '#FF0AC2',
                      '#47FF0A'];
      
      const chosenC = Math.floor(Math.random() * colors.length),
            chosenS = Math.floor(Math.random() * shapes.length);
      
      // create shape
      const burst = new mojs.Burst({
        left: itemDim.left + (itemSize.x/2),
        top: itemDim.top + (itemSize.y/2),
        radiusX: itemSize.x,
        radiusY: itemSize.y,
        count: 8,
        
        children: {
          shape: shapes[chosenS],
          radius: 10,
          scale: {0.8: 1},
          fill: 'none',
          points: 7,
          stroke: colors[chosenC],
          strokeDasharray: '100%',
          strokeDashoffset: { '-100%' : '100%' },
          duration: 450,
          delay: 100,
          easing: 'quad.out',
          isShowEnd: false,
        }
      });

      // Add the mouseenter listener to play the burst.
      link.addEventListener('mouseenter', function () { burst.play(); });
    });

.container {
  margin-top: 20%;
  height: 110vh;
}

<div class="container"><a href="javascript:void(0);">test</a></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.2/mo.min.js"></script>