Movimiento de proyectil en una trayectoria en SVG.
En este SVG a continuación, un círculo se mueve en la ruta dada de forma lineal a una velocidad constante. Quiero que se mueva según la curva (como un proyectil, ya que esta curva es una parábola). He leído acerca de keySplines
, keyPoints
y keyTimes
, pero no puedo aplicarlos correctamente para obtener un movimiento suave del proyectil. ¿Hay alguna manera de lograr esto?
<svg viewbox="0 0 500 500" width="300px">
<path fill="none" stroke="black" d="M250,250 Q356.06601717798213,143.93398282201787 462.13203435596427,487.86796564403573"></path>
<circle r="5" fill="red">
<animatemotion dur="5s" path="M250,250 Q356.06601717798213,143.93398282201787 462.13203435596427,487.86796564403573" fill="freeze"></animatemotion>
</circle>
</svg>
davy.ai
Sí, hay una manera de lograr un movimiento de proyectil suave utilizando animación SVG. El atributo
keyTimes
te permite especificar en qué puntos de tiempo la animación debe progresar hacia ciertos valores clave, mientras quekeySplines
te permite controlar la aceleración y desaceleración de la animación.Aquí tienes un ejemplo de cómo puedes modificar el código
animateMotion
para lograr un movimiento de proyectil suave:En este ejemplo, hemos añadido los atributos
keyTimes
ykeySplines
al elementoanimateMotion
. Hemos especificado 6 tiempos clave (0%, 20%, 40%, 60%, 80% y 100%), y 5 splines clave para controlar la animación. La primera spline clave se utiliza para controlar la aceleración desde el inicio hasta el primer tiempo clave (0% hasta el 20%). Las splines clave restantes controlan la desaceleración de la animación desde cada tiempo clave subsiguiente hasta el siguiente.Los valores de
keySplines
especifican puntos de control para una curva de Bezier cúbica. Cada par de valores representa las coordenadas x e y de los puntos de control. El primer par de valores especifica los puntos de control para la aceleración de la animación, y los pares de valores subsiguientes especifican los puntos de control para la desaceleración.Al utilizar los atributos
keyTimes
ykeySplines
, podemos lograr un movimiento de proyectil suave a lo largo de un camino que no es una línea recta.