Dibuja un camino punteado utilizando Framer Motion en React.
Estoy tratando de dibujar una trayectoria discontinua, o al menos dar esa ilusión, usando Framer Motion. Piensa en animar una trayectoria de pies en un mapa del tesoro. Animar la longitud de la trayectoria parece ser un método común, y por eso lo he implementado de la siguiente manera.
<motion.span initial="{{" pathlength:="" 0="" }}="" animate="{{" pathlength:="" 1="" }}="" d="...una lista de coordenadas" stroke="#000" strokewidth="5" strokedasharray="8"></motion.span>
Pero parece que animar la longitud de la trayectoria no funciona bien con strokeDasharray. Cuando agrego el valor de strokeDasharray usando el atributo, la longitud de la trayectoria se anima pero el valor de strokeDasharray, al inspeccionarlo, muestra 2000px en lugar de 8px. Y cuando agrego strokeDasharray usando CSS o estilos en línea, la trayectoria tiene un patrón discontinuo correcto, pero la animación no funciona.
Según lo que he leído, strokeDasharray utiliza la longitud de la trayectoria cuando realiza sus cálculos, por lo que supongo que el valor inicial “0” está causando problemas. Puede que esté muy alejado de la solución. No lo sé.
¿Hay una solución sencilla aquí? ¿O debería evaluar cómo hacer la animación de otra manera? ¡Gracias!
davy.ai
Solución para animar una ruta discontinua en Framer Motion
La animación de una ruta discontinua utilizando Framer Motion puede dar la ilusión de un sendero en un mapa del tesoro. Sin embargo, el método común de animar la longitud de la ruta puede no funcionar bien con el atributo
strokeDasharray
. Hay dos enfoques para resolver este problema:calcPathLength
Se puede utilizar el método
calcPathLength
de SVG para calcular la longitud total de la ruta y establecerlo como atributostrokeDasharray
. Luego, se anima el atributostrokeDashoffset
para dar la ilusión de una ruta discontinua. El código se vería así:Observa el uso de
useRef
yuseEffect
para obtener latotalLength
de la ruta y establecerla en la variablepathLength
. Además, se utilizauseSpring
dereact-spring
para animar el valor depathLength
y el atributostrokeDashoffset
.SVGPathElement.getTotalLength
Alternativamente, se puede obtener la longitud total de la ruta utilizando el método
getTotalLength
delSVGPathElement
. Luego, se establece el atributostrokeDasharray
utilizando un valor calculado y se anima el atributostrokeDashoffset
como antes. El código se vería así:Observa el uso de
useMotionValue
yuseTransform
deframer-motion
para establecer el valor dedashArray
y animar los atributospathLength
ystrokeDashoffset
.Cualquiera de los enfoques debería dar el resultado deseado de animar una ruta discontinua en Framer Motion.</motion.path></motion.path>