En este último capítulo, aplicaremos todos los conceptos aprendidos en los capítulos anteriores para construir una animación interactiva completa en SVG. Este proyecto servirá como un ejemplo práctico de cómo combinar formas, transformaciones, estilos, animaciones y JavaScript para crear un gráfico SVG dinámico y atractivo.

Descripción del Proyecto

Crearemos una escena animada en la que un círculo representará un objeto móvil que se mueve en un bucle alrededor de una ruta predeterminada. Al hacer clic en el círculo, su color cambiará, y la animación se pausará o reanudará según su estado actual. Este proyecto utilizará SVG, SMIL, CSS y JavaScript para implementar los distintos aspectos de la animación y la interactividad.

Paso 1: Estructura Base del SVG

Comencemos creando la estructura SVG y dibujando un camino que el círculo seguirá. Para simplificar, usaremos una curva para la trayectoria del círculo.

html

Aquí, el <path> define la ruta, y el <circle> sigue esta ruta mediante <animateMotion>. La animación se repetirá indefinidamente, moviendo el círculo en un bucle.

Paso 2: Añadiendo Estilos con CSS

Ahora vamos a estilizar el SVG para que el círculo tenga una sombra y se vea más atractivo. También definiremos una clase CSS para cambiar el color del círculo al hacer clic.

css

La clase clicked cambia el color del círculo y agrega una sombra. La transición suave de color se logra mediante la propiedad transition.

Paso 3: Añadiendo Interactividad con JavaScript

Para hacer la animación interactiva, usaremos JavaScript. Vamos a agregar un evento click al círculo para pausar o reanudar la animación y cambiar su color.

html

Aquí, el evento click alterna entre pausar y reanudar la animación de movimiento. La clase clicked se aplica para cambiar el color y la sombra del círculo, lo cual indica visualmente si la animación está pausada.

Paso 4: Optimización y Personalización

Para finalizar, podemos ajustar los tiempos y agregar más elementos si deseamos hacer la escena más compleja. Se pueden añadir nuevos elementos en el SVG y aplicar transformaciones y animaciones adicionales según el interés.

Conclusión

¡Felicidades! Has completado un proyecto que combina múltiples aspectos de SVG, incluyendo animaciones SMIL, interactividad con JavaScript, y estilos CSS. Este proyecto final demuestra cómo SVG puede ser una herramienta poderosa y versátil para crear gráficos interactivos y animaciones complejas en la web.

Esperamos que este curso te haya proporcionado una sólida comprensión de SVG y cómo puedes utilizarlo para enriquecer tus proyectos de desarrollo web. ¡Sigue explorando y creando gráficos dinámicos con SVG!