Cómo animar elementos a lo largo de rutas SVG con la biblioteca PathSlider

Introducción

El pathelemento SVG se puede utilizar para crear animaciones innovadoras para la interfaz de su sitio web o aplicación web. En este tutorial, le mostraremos cómo configurar HTML, CSS y JavaScript para mover elementos a lo largo de un SVG pathutilizando la PathSliderbiblioteca. Si sigue todo el tutorial, desarrollará controles deslizantes que se mueven de una posición a otra utilizando esta biblioteca.

Paso 1: Configuración de la PathSliderbiblioteca

Antes de entrar en el código para hacer funcionar el control deslizante, veamos cómo podemos usar la PathSliderbiblioteca y explorar algunas de sus opciones.

En primer lugar, nuestra librería depende de anime.js, por lo que necesitaremos incluirla en nuestro proyecto antes de empezar a utilizarla PathSlider. Además, hay algunos otros pequeños requisitos que hay que tener en cuenta en el código HTML y CSS para que todo funcione correctamente, pero que iremos viendo a medida que vayamos desarrollando nuestro slider.

Para entender un poco mejor algunas de las opciones que ofrece la biblioteca, observe el siguiente diagrama, que muestra partes de la ruta SVG y los nombres de los parámetros ilustrados:

Este diagrama representa:

• startLength(float o 'center'): longitud de la ruta para comenzar a posicionar los elementos. Esta siempre será la posición del elemento activo. Un elemento seleccionado se moverá aquí, así como también moverá todos los demás elementos en consecuencia.
• activeSeparation(flotante): Separación entre el elemento activo y los elementos adyacentes.
• paddingSeparation(float): Separación de relleno al principio y al final de la ruta.
• items:Una vez posicionado el elemento seleccionado, todos los demás elementos se posicionarán a la misma distancia entre sí, dado el espacio restante.

Excepto items, todas las propiedades descritas aquí pueden ser suministradas tal y como optionsestán al inicializar nuestro slider, proporcionando así total libertad para personalizar el slider según nuestras necesidades. Además de estas hay otras optionsdisponibles, que puedes consultar en el PathSliderrepositorio de Github.

A continuación, escribamos nuestro código HTML.

Paso 2: Creación de la estructura HTML

Nuestro código HTML será un contenedor ( .path-slider), el SVG pathpara deslizar los elementos a través de él y los elementos. Es importante tener en cuenta que el SVG pathy los elementos deben estar dentro del mismo contenedor, para evitar problemas de posicionamiento.

!-- Path Slider Container --div    !-- SVG path to slide the items --    svg viewBox="0 0 460 310"        path d="M 230 5 c -300 0 -300 300 0 300 c 300 0 300 -300 0 -300 Z"/path    /svg    !-- Slider items --    a href="#chat"        divsvguse xlink_href="#chat"//svg/div        divh2Chat/h2/div    /a    a href="#alarmclock"        divsvguse xlink_href="#alarmclock"//svg/div        divh2Alarm clock/h2/div    /a    a href="#camera"        divsvguse xlink_href="#camera"//svg/div        divh2Camera/h2/div    /a    a href="#envelope"        divsvguse xlink_href="#envelope"//svg/div        divh2Envelope/h2/div    /a    a href="#lightbulb"        divsvguse xlink_href="#lightbulb"//svg/div        divh2Light bulb/h2/div    /a/div

Ahora que tenemos nuestra estructura básica, vamos a darle estilo con CSS.

Paso 3: Agregar estilos con CSS

No necesitamos ningún estilo para que el control deslizante funcione, pero normalmente nos gustaría colocar los elementos en el centro del pathtrazo. También agregaremos otros estilos para crear una apariencia moderna en la interfaz.

Aquí nos concentraremos sólo en las partes principales:

// Circle width and height$circle-width: 74px;$circle-height: 74px;// Styles for slider items, positioning them absolutely, in the top left corner of the container// Also centering them (see negative values for `left` and `top`)// They will be positioned along the SVG path later with Javascript.path-slider__item {  position: absolute;        // Get items out of the flow, and let the library set the correct position  left: - $circle-width / 2; // Half of the width, for centering purpose  top: - $circle-height / 2; // Half of the height, for centering purpose}// Styles for the item circle (icon container).item__circle {  width: $circle-width;    // Desired width  height: $circle-height;  // Desired height}// Styles for the selected item.path-slider__current-item {  .item__circle {    background-color: #4DA169; // Change circle background-color for selected item    transform: scale(1.5);     // Scale up circle for selected item  }}

Como siempre, puedes consultar el código completo en el repositorio de Github.

El estilo ya está completo. A continuación, inicialicemos el control deslizante con JavaScript.

Paso 4: inicialización del control deslizante con JavaScript

Para inicializar nuestro control deslizante, solo necesitamos pathy items. Opcionalmente, podemos pasar un objeto con optionspara personalizarlo. Por lo tanto, podemos hacer que nuestro control deslizante funcione como sea necesario con un fragmento de código como este:

// Setting up the optionsvar options = {    startLength: 0, // start positioning the slider items at the beginning of the SVG path    duration: 3000, // animation duration (used by anime.js)    stagger: 15, // incrementally delays between items, producing a staggering effect    easing: 'easeOutElastic', // easing function (used by anime.js)    elasticity: 600, // elasticity factor (used by anime.js)    rotate: true // This indicates that items should be rotated properly to match the SVG path curve};// Initialize the slider using our SVG path, items, and optionsnew PathSlider('.path-slider__path', '.path-slider__item', options);

En este fragmento de código, hemos comentado todos los optionsutilizados, para que puedas entender cuál es el significado de cada uno.

La biblioteca inicializará clickeventos para cada elemento del control deslizante, de modo que si hacemos clic en cualquiera de ellos, se seleccionará (se animará a la posición principal). Si queremos agregar más controles al control deslizante (algún tipo de paginación, por ejemplo, o botones anterior y siguiente), tenemos algunas funciones útiles que podemos llamar para seleccionar cualquier elemento:

• selectPrevItem():Selecciona el elemento anterior.
• selectNextItem():Seleccione el siguiente elemento.
• selectItem(index):Seleccione cualquier elemento utilizando el index.

Esto le proporcionará un control deslizante como el siguiente, donde los elementos se mueven a lo largo de un SVG path:

Conclusión

En este tutorial, hemos desarrollado un control deslizante básico, utilizando un SVG cerrado pathy algunos elementos optionsproporcionados por la PathSliderbiblioteca. Puedes ver la demostración en vivo, jugar con el código en Codepen u obtener el código completo en Github.