在 Framer 运动中跟随带有动画的鼠标做出反应答案

【问题标题】：Follow mouse with animation in Framer motion react在 Framer 运动中跟随带有动画的鼠标做出反应
【发布时间】：2023-01-10 13:42:42
【问题描述】：

我的 React 应用程序中有一个自定义光标组件。为了在视口内实现平滑过渡，我使用了成帧器运动。
鼠标下的 div 有一些自定义样式，它毫无问题地跟随光标。但我希望该 div 始终具有动画效果，例如旋转 + 更改边框半径，甚至还更改 bg 颜色。
从 framer motion docs 我浏览了 keyframes 部分，在应用相同的指令后，它会动画但停止跟随光标。
它只是停留在屏幕的左上角并执行动画。但我希望它在跟随光标时具有动画效果。

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";

const CustomCursor = () => {
  const [mousePosition, setMousePosition] = useState({
    x: 0,
    y: 0,
  });

  useEffect(() => {
    const updateMousePosition = (e) => {
      setMousePosition({
        x: e.clientX,
        y: e.clientY,
      });
    };

    window.addEventListener("mousemove", updateMousePosition);

    return () => {
      window.removeEventListener("mousemove", updateMousePosition);
    };
  }, []);

  const style = {
    transform: "translate(-50%, -50%)",
    width: "400px",
    height: "400px",
    borderRadius: "50% 22% 40% 80%",
    filter: " blur(100px)",
    background: "rgb(255, 67, 75)",
    background: "linear-gradient(#43d9ad, #4d5bce)",
    opacity: 0.4,
    zIndex: 2,
  };

  const variants = {
    default: {
      x: mousePosition.x - 200,
      y: mousePosition.y - 200,
    },
  };

  const animate = {
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 270, 270, 0],
    borderRadius: ["20%", "20%", "50%", "50%", "20%"],
  };

  return (
    <motion.div
      className={`fixed top-0 left-0 sm:hidden`}
      style={style}
      variants={variants}
      //tried setting animate={animate} but didn't work
      animate="default"
      transition={{
        duration: 0.3,
        ease: "linear",
        repeat: 0,
        type: "spring",
        stiffness: 80,
      }}
    ></motion.div>
  );
};

export default CustomCursor;

那么我如何在这里实现动画+跟随光标动作呢？

【问题讨论】：

标签： javascript reactjs framer-motion

【解决方案1】：

假设目标是让动画元素跟随光标并同时显示循环动画，似乎可以将 animate 值添加到 variants，而不是定义另一个 animate 属性。

以下示例的简单演示：stackblitz（blur 在示例中暂时调低，以便更好地了解运动）。

const variants = {
  default: {
    x: mousePosition.x - 200,
    y: mousePosition.y - 200,
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 270, 270, 0],
    borderRadius: ["20%", "20%", "50%", "50%", "20%"],
  },
};

motion.div 上的 transition 可用于 specify 每个动画所需的属性。在此用例中，可以编辑下例中的 default 键以控制 scale、rotate 和 borderRadius 的循环动画。

<motion.div
  className={`fixed top-0 left-0`}
  style={style}
  variants={variants}
  animate="default"
  transition={{
    x: {
      duration: 0.3,
      ease: "linear",
      repeat: 0,
      type: "spring",
      stiffness: 80,
    },
    y: {
      duration: 0.3,
      ease: "linear",
      repeat: 0,
      type: "spring",
      stiffness: 80,
    },
    default: {
      duration: 2.5,
      repeat: Infinity,
    },
  }}
></motion.div>

【讨论】：