Dar forma a los iconos morphing en el botón al hacer clic - Trucos CSS

Tabla de contenido

La idea aquí es usar un ícono SVG en un botón e intercambiar ese ícono por otro cuando se hace clic en el botón. Un clic en un botón a menudo sugiere que se ha realizado una acción, por lo que cambiar los iconos puede ser un buen toque en la interfaz de usuario para mostrar el cambio en el contexto y confirmar que la acción ha ocurrido.

Un posible caso de uso podría ser un botón de descarga. El icono del botón puede indicar inicialmente que el botón activará una descarga, pero cambiará a una marca de verificación cuando se haga clic en el botón.

Vea el botón Pen MorphSVG en Click de Geoff Graham (@geoffgraham) en CodePen.

Creemos un fragmento que cumpla con este patrón para que podamos usarlo en otros contextos similares.

Requisitos

Mientras presentamos esto como un fragmento de SVG, confiaremos en TweenMax de GSAP, que es una biblioteca de JavaScript específicamente para animar SVG, y MorphSVG, que es un componente de TweenMax.

Sí, SVG tiene soporte nativo para animaciones que nos permitirían lograr lo mismo. Sin embargo, con el soporte de SMIL disminuyendo en las futuras versiones de los navegadores WebKit y Blink y su total falta de soporte en IE y Edge, GSAP se convierte en una alternativa mucho más atractiva.

¡Disparemos y construyamos un patrón!

Paso 1: elige las formas SVG

Vamos a cambiar una forma por otra. Las formas utilizadas para este fragmento provienen de IcoMoon, que tiene toneladas de iconos vectoriales gratuitos, pero también puedes crear los tuyos propios. De cualquier manera, prepare sus formas y agreguemoslas al HTML dentro de un elemento de botón.

  Download

Paso 2: Estilo del botón y SVG

Podemos configurar el CSS a continuación. La mayoría de los estilos de nuestro ejemplo son específicos de la demostración. Aquí está lo mínimo de lo que se necesita para que esta funcionalidad funcione.

Tenga en cuenta que la pieza clave oculta la forma en la que nos estamos transformando de forma predeterminada. Hacemos esto porque necesitamos ambas formas en el DOM para que MorphSVG intercambie una por la otra, pero no podemos mostrar ambas al mismo tiempo. Eso significa que ocultamos la segunda forma y dejamos que MorphSVG haga sus maravillas para hacerla visible cuando sea necesario.

/* The main SVG */ .button-icons ( width: 1.25em; ) /* The individual icons */ .icon ( fill: #fff; ) /* We hide the checkmark by default */ #checkmark ( visibility: hidden; )

Paso 3: ¡Mighty Morphin 'SVG!

Aquí es donde entran en juego TweenMax y MorphSVG. El código completo del ejemplo se proporciona a continuación, pero sigue este script general:

  • Defina algunas variables para comenzar para que podamos consultarlas a lo largo del código sin tener que escribirlas cada vez:
    • icons: el elemento SVG completo
    • button: el botón (o enlace) que contiene nuestras formas
    • buttonText: el texto dentro del botón
    • buttonTL: El comando MorphSVG para cambiar el icono de descarga por el icono de marca de verificación
  • Hola, JavaScript, por favor esté atento a que se haga clic en el botón y reproduzca la animación MorphSVG hacia adelante y hacia atrás en clics alternativos.
  • Ah, y, oye JavaScript, también intercambia el texto del botón cuando se hace clic en el botón.
  • Gracias, JavaScript
// We're going to select some things and make them variables var select = function(s) ( return document.querySelector(s); ), icons = select('#icons'), button = select('.button'), buttonText = document.getElementById("button-text") // Morph the Download icon into the Checkmark icon var buttonTl = new TimelineMax((paused:true)); buttonTl.to('#download', 1, ( morphSVG:(shape:'#checkmark'), ease:Elastic.easeInOut )) // On button click, play the animation button.addEventListener('click', function() ( if (buttonTl.time() > 0) ( buttonTl.reverse(); ) else ( buttonTl.play(0); ) )) // On button click, swap out the button text button.addEventListener('click', function() ( if (button.classList.contains("saved")) ( button.classList.remove("saved"); buttonText.innerHTML = "Download"; ) else ( button.classList.add("saved"); buttonText.innerHTML = "Saved!"; ) ), false);

Manifestación

La siguiente es una demostración del código que cubrimos:

Vea el botón Pen MorphSVG en Click de Geoff Graham (@geoffgraham) en CodePen.

Referencias

  • GreenSock MorphSVG: documentación para utilizar el complemento.
  • Cómo funciona SVG Shape Morphing: Chris publicó este mismo concepto usando SMIL y proporcionó una buena base para este patrón.
  • Happy / Sad Pen: la demostración de Chris Gannon que ayudó a construir la animación de este patrón.

Articulos interesantes...