在我的登录页面创建插图动画角色

Question

我正在尝试在登录页面中创建动画。我想要对插图角色进行动画处理，这些角色根据用户在页面中所做的操作以某种方式做出反应。这是我想要实现的目标的示例： https://dribbble.com/shots/21953371-WeStud-Creative-登录教育平台

为此，我想拿起并学习一个图书馆。我听说过一些选项，例如 GSAP 和 Three.js，但我不确定哪一个最适合我的用例。

您能否告诉我一些关于使用什么工具以及如何创建和合并这些动画的见解？谢谢你。

Answer 1

你不需要那个3js，基本上你可以使用，但在你提供的示例中我没有看到任何。例如，您可以通过 vanilla js 或 gsap 以及 svg 微动画来实现示例效果（在我看来是最好的方法）。这并不复杂，大部分时间你都会花在 svg 上，创建运动，并将它们与你需要的

MouseEvent

链接起来。

const leftEye = document.getElementById('left-eye');
const rightEye = document.getElementById('right-eye');
const face = document.getElementById('face');

window.addEventListener('mousemove', (event) => {
    const { clientX: mouseX, clientY: mouseY } = event;
    const faceRect = face.getBoundingClientRect();
    const faceCenterX = faceRect.left + faceRect.width / 2;
    const faceCenterY = faceRect.top + faceRect.height / 2;
    const deltaXLeft = mouseX - (faceCenterX - 70);
    const deltaYLeft = mouseY - (faceCenterY - 70); 
    const deltaXRight = mouseX - (faceCenterX + 30); 
    const deltaYRight = mouseY - (faceCenterY - 70);
    const angleLeft = Math.atan2(deltaYLeft, deltaXLeft);
    const angleRight = Math.atan2(deltaYRight, deltaXRight);
    const eyeRadius = 30;
    const eyeOffsetXLeft = Math.cos(angleLeft) * eyeRadius;
    const eyeOffsetYLeft = Math.sin(angleLeft) * eyeRadius;
    const eyeOffsetXRight = Math.cos(angleRight) * eyeRadius;
    const eyeOffsetYRight = Math.sin(angleRight) * eyeRadius;
    leftEye.setAttribute('cx', eyeOffsetXLeft);
    leftEye.setAttribute('cy', eyeOffsetYLeft);
    rightEye.setAttribute('cx', eyeOffsetXRight);
    rightEye.setAttribute('cy', eyeOffsetYRight);
});

body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    svg {
      width: 200px;
      height: 200px;
    }
    .eye-container {
      fill: none;
      stroke: black;
      stroke-width: 2;
    }
    .eye {
      fill: black;
    }

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" id="face">
  <circle cx="100" cy="100" r="80" fill="none" stroke="black" stroke-width="2"/>
  <g class="eye-container" transform="translate(70, 70)">
    <circle cx="0" cy="0" r="30" />
    <circle class="eye" cx="0" cy="0" r="10" id="left-eye"/>
  </g>
  <g class="eye-container" transform="translate(130, 70)">
    <circle cx="0" cy="0" r="30" />
    <circle class="eye" cx="0" cy="0" r="10" id="right-eye"/>
  </g>
</svg>