0

https://codepen.io/mprquinn/pen/OmOMrR/
来源：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>

4

1 回答 1

1

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

您面临的问题是您正在使用 getBoundingClientRect，它给出了元素的视口坐标。默认情况下，Burst 在文档正文元素（文档坐标）之外运行。滚动时链接元素的文档坐标永远不会改变，但视口坐标会改变。请参阅此处以获得简单的解释。

这几乎是所有相同的代码，修改后添加事件侦听器以在最后播放突发。我相信这也会更有效，因为它不会在每次鼠标进入元素时创建一个新的突发实例。您链接到的 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>

于 2019-03-31T14:54:29.867 回答