这次手把手教你画个微观世界里的回弹球球

前言

自上次我们接触了GASP这个动画库之后，这回我又带来一个关于它的特效——使用GASP动画库模拟一个回弹球球。在上一篇文章里就提到过，该动画库十分强大。

效果预览

HTML部分

我们这里要实现的回弹球球是由一个个圈圈组成，圆圈越多，呈现的效果就越长越大，相关代码如下。

 <div class="cursor">
      <!-- 可以添加更多的circle -->
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    ......
    </div>

创建了一个包含多个圆形元素的 div 容器。这个容器具有 cursor 类名，可能用于设置鼠标样式。在容器内部，有多个具有 circle 类名的 div 元素。这些 div 元素表示圆形元素，数量为自定义，可以根据需要添加更多的圆形元素。

最终呈现的效果就是展示一组圆形元素。

JS部分

接下来是JS部分，也就是实现逻辑的关键部分。

 <script>
      document.body.addEventListener("mousemove", (e) => {
        gsap.to(".circle", {
          x: e.clientX,
          y: e.clientY,
          stagger: -0.05,
        });
      });
    </script>

这里是用于监听鼠标在页面上的移动事件，并使用 GSAP 库实现了一个特效：将名为 .circle 的元素根据鼠标的坐标位置进行动画移动。
在这里，document.body.addEventListener("mousemove", (e) => { ... })表示的含义是在网页的body元素上添加了一个 mousemove 事件监听器，当鼠标在页面上移动时触发回调函数。上次有同学在评论区里说对GASP比较感兴趣，因此我接下来把每一条语句都解释一下。

• gsap.to(".circle", { ... });：使用 GSAP 库的 to 方法对选择器为 .circle 的元素进行动画操作

• x: e.clientX：将被选择元素的 x 属性设置为鼠标事件对象的 clientX 属性，即鼠标相对于浏览器窗口左上角的水平位置

• y: e.clientY：将被选择元素的 y 属性设置为鼠标事件对象的 clientY 属性，即鼠标相对于浏览器窗口左上角的垂直位置

• stagger: -0.05：指定元素之间的动画延迟时间，每个元素之间的延迟时间为负数，表示动画会依次触发。

因此，这段代码实现了一个当鼠标在页面上移动时，名为 .circle 的元素会跟随鼠标的位置进行动画移动的效果。注意，使用GASP库之前需要引入 GSAP 库。

CSS部分

最后就是CSS部分的介绍了，这里比较简单，主要是为整体效果增添几分美观。这里我们主要看关键部分的CSS样式处理。

.cursor {
  position: relative;
  width: 100px;
  height: 100px;
}

定义名为 .cursor 的类，设置其 position 属性为 relative，相对定位，并设置 .cursor 元素的宽度和高度为 100px。

.cursor .circle {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(#00d0ff, #ff005e);
  border-radius: 50%;
}

紧接着定义名为 .circle 的类，设置其 position 属性为 absolute，绝对定位。使用百分比定位，使 .circle 元素的中心点位于父元素 .cursor 的中心。然后设置 .circle 元素的宽度和高度为 100%。接着使用线性渐变设置 .circle 元素的背景色，颜色从蓝色(#00d0ff)渐变到粉红色(#ff005e)。最后设置 .circle 元素的圆角为 50%，使其呈现出圆形形状。

综上所述，这里我们设置了网页的基本样式，包括清除元素的默认边距和内边距、设置了页面的背景颜色等，完整部分可以前往码上掘金查看。同时，定义了一个名为 .cursor 的元素，用于实现一个具有颜色渐变的圆形鼠标指针特效。

总结

以上就是该效果的整个实现过程了，整体而言并不难，和之前的鼠标移动出来的线条特效一样，使用了GASP动画库来实现该效果。完整代码可以在码上掘金里查看，如果有什么问题欢迎大家在评论区讨论。

原文链接：https://juejin.cn/post/7311971826146050098 作者：一条会coding的Shark