一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

前言

自上次我们接触了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

(0)
上一篇 2023年12月15日 下午5:08
下一篇 2023年12月16日 上午10:00

相关推荐

发表评论

登录后才能评论