У меня есть пользовательский компонент курсора в моем приложении для реагирования. А для плавного перехода внутри области просмотра я использую Framer Motion.
Div под мышью имеет некоторый пользовательский стиль и без проблем следует за курсором. Но я хочу, чтобы этот div постоянно анимировался, например, поворачивал + изменял радиус границы или даже менял цвет bg.
Из документов Framer Motion я просмотрел раздел 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;
Итак, как мне добиться здесь действия анимации + следования за курсором?
Предполагая, что цель состоит в том, чтобы анимированный элемент следовал за курсором и в то же время отображал циклическую анимацию, кажется, что значения 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%"],
},
};
transition
на motion.div
можно использовать, чтобы указать желаемые свойства для каждой анимации. Клавиша 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>
@buzz Для меня это нормально как в Chrome, так и в Firefox, поэтому не знаю, как это исправить. Может попробовать поставить еще ниже blur
?
Спасибо за ваш ответ... это работает... но радиус границы кажется всегда круглым по форме... как мне его изменить