javascript - 动画鼠标轨迹

Question

我正在尝试构建类似于 this website 的鼠标轨迹。使用 javascript、jQuery 或其他一些库。事实证明这比我想象的要难。我特别需要帮助来实现轨迹的动画效果。

var container = document.getElementById("container");
var circle = document.querySelector(".circle");

TweenMax.set(circle, {
  scale: 0,
  xPercent: -50,
  yPercent: -50
});

container.addEventListener("pointerenter", function(e) {
  TweenMax.to(circle, 0.3, {
    scale: 1,
    opacity: 1
  });
  positionCircle(e);
});

container.addEventListener("pointerleave", function(e) {
  TweenMax.to(circle, 0.3, {
    scale: 0,
    opacity: 0
  });
  positionCircle(e);
});

container.addEventListener("pointermove", function(e) {
  positionCircle(e);
});

function positionCircle(e) {
  var rect = container.getBoundingClientRect();
  var relX = e.pageX - container.offsetLeft;
  var relY = e.pageY - container.offsetTop;

  TweenMax.to(circle, 0.3, {
    x: relX,
    y: relY
  });
}

body {
  background: #000;
  margin: 0;
  max-width: 100%;
  width: 100%;
  padding: 0;
}

.section {
  display: block;
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  background: #000;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 80%;
  backface-visibility: hidden;
  pointer-events: none;
  opacity: 1;
  box-shadow: 0 0 50px #fff
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="container" class="section">
  <div class="circle"></div>
</div>

到目前为止我的尝试是 here

Answer 1

我建议您，您在该网站上看到的内容不是老鼠踪迹，正如您所想的那样。它是鼠标移动(方向、速度)之间的交互，在占据整个屏幕的底层 Canvas 上进行绘制，并使用带有像 this 这样的着色器的 Three.js 进行绘制。和一个面具。 尝试一下 Three.js或类似的库以更简单、更高效的方式获得类似的效果