es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Movimiento de proyectil en una trayectoria en SVG.

04 Aug, 2023 Programación

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>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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 que keySplines 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:

    <circle r="5" fill="red">
  <animatemotion dur="5s" path="M250,250 Q356.06601717798213,143.93398282201787 462.13203435596427,487.86796564403573" fill="freeze" keytimes="0;0.2;0.4;0.6;0.8;1" keysplines="0.5 0 0.5 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1">
  </animatemotion>
</circle>

    En este ejemplo, hemos añadido los atributos keyTimes y keySplines al elemento animateMotion. 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 y keySplines, podemos lograr un movimiento de proyectil suave a lo largo de un camino que no es una línea recta.

Comments are closed.