Qué son las microinteracciones web: crea la animación de Like en Twitter

Las microinteracciones web son pequeñas animaciones para comunicar estados de una interfaz. Facilitan el viaje del usuario por nuestra app para que se sienta más familiar y fácil de usar.

Las microinteracciones bien diseñadas pueden convertirse en momentos característicos de nuestra marca para contribuir a la adopción y lealtad de nuestros clientes. Uno de los mejores ejemplos es el botón de “Me gusta” en Twitter.

Hoy en día, es difícil imaginarnos Twitter sin esta pequeña función. Y en este reto replicaremos esa emblemática microinteracción. ¡Vamos a crear el Like de Twitter con HTML, CSS y JavaScript!.

⭐️ Para crear nuestro like de Twitter, te hice un pequeño resumen ilustrado sobre las Microinteracciones basado en Microinteractions: Tiny Design Decisions, Big User Impact de Shopify:

0️⃣ Paso 0: planeación

Te propongo que realices los siguientes 5 pasos para completar el reto:

1. Crear el contenedor principal.
2. Hacer la animación del corazón.
3. Ejecutar los eventos de like y dislike.
4. Crear la card del tweet.
5. ¡Compartir tu resultado en los comentarios!

⚠️ Recomendación
Evita copiar y pegar el código. Trata de transcribir cada detalle y entender muy bien su funcionamiento. Solo de esta forma podrás convertirte en experta o experto maquetando con CSS.

ʕ•́ᴥ•̀ʔっ ¡Empecemos!

1️⃣ Paso 1: contenedor principal

El primer paso es crear una cajita en HTML y CSS con tres elementos primordiales:

1. Un tamaño (width y height).
2. Un cursor diferente (pointer) cuando este se encuentre sobre el corazón.
3. Un background con el sprite del corazón de Twitter.

Con esto último me refiero a una imagen de este tipo:

Como puedes ver, es una imagen que contiene todos los “estados” por los que pasa el corazón al darle click: primero se muestra de un color gris; luego se dibujan unas burbujas y chispas alrededor; y finalmente se muestra de color rojo.

El HTML de la cajita sería algo como lo siguiente:

class="heart">div>

Y el CSS:

.heart {
  background-image: url('https://i.ibb.co/8sTbrLt/1-MTZW1-G1m-E7-LSX1-Cnh-TYe-HA.png');
  cursor: pointer;
  height: 100px;
  width: 100px;
}

El valor de 100px lo puedes modificar. Lo importante es que se muestre solamente uno de los corazones del sprite y no la imagen completa. Algo así:

2️⃣ Paso 2: realización de la animación del corazón

El sprite del corazón de Twitter tiene 29 imágenes desde el corazón gris hasta el corazón rojo:

Necesitamos mostrar una sola imagen a la vez, mostrando cada una después de la otra y haciendo el cambio muy rápidamente para generar la ilusión de movimiento. Algo así como sucede con los folioscopios (libros que contienen una serie de imágenes que varían gradualmente de una página a la siguiente, pasándolas rápidamente simulan movimiento y generan el efecto de ser imágenes animadas.

Fuente de la imagen: History of Animation

Esto en CSS podemos lograrlo con la función steps(). Nos permite dividir una animación o transición en diferentes segmentos (como si pudiéramos crear cada una de las hojas del folioscopio). En nuestro caso, cada segmento sería una de las 29 imágenes del sprite.

La función steps() recibe dos parámetros: steps(, ):

1. : es un número entero que indica la cantidad de “divisiones” que queremos realizar.
2. : es la dirección que queremos que tome la animación, ya sea de izquierda a derecha (start) o de derecha a izquierda (end).

Con esto claro, para la animación necesistamos:

1. Definir un nombre (animation-name): heart-beat (aquí puedes escribir cualquier nombre).
2. Definir el tiempo que se va a demorar (animation-duration): .8s (este es un número aleatorio y puedes modificarlo dependiendo de qué tan rápida o lenta quieres la animación).
3. Definir el número de pasos por los que queremos que pase (animation-timing-function): 28 (el total de imágenes menos 1, ya que el corazón gris ya lo estamos mostrando por defecto, así que la animación empezará desde la segunda imagen del sprite).
4. Establecer la cantidad de veces que queremos ejecutar la animación (animation-iteration-count): 1.
5. Establecer cómo queremos que finalice la animación (animation-fill-mode): forwards (esto nos permite finalizar la animación con el último paso de la función steps(), por lo que terminaremos con la imagen del corazoncito rojo). ❤️

Puedes utilizar cada una de las propiedades que te describí, aunque también puedes simplificarlo con la propiedad animation:

.heart-animation {
  animation: heart-beat .8ssteps(28) 1 forwards;  
}

Ahora le diremos al sprite que se mueva de izquierda a derecha con el siguiente @keyframes
:

@keyframes heart-beat {
 from { background-position: left; }
 to { background-position: right; }
}

Finalmente, si añadimos la clase heart-animation a nuestro div, tendríamos lista nuestra animación:

3️⃣ Paso 3: ejecución del like y dislike

Si estamos en Twitter y vemos un Tweet que nos gusta, lo que debemos hacer es darle click (en desktop) o tap (en mobile) en el corazoncito. Y si queremos deshacer esa opción, debemos volver a darle click o tap en el corazón. Esto se conoce como toggle y funciona como los interruptores de nuestra casa: si los presionamos una vez, se prende la luz, pero si los presionamos una vez más, se apaga la luz.

Esto en JavaScript sería así:

const heart = document.querySelector('.heart')

heart.addEventListener('click', () => heart.classList.toggle('heart-animation'))

En la primera línea lo que hacemos es “traernos” al elemento que tiene la clase heart desde HTML a nuestro código JavaScript para poder manipularlo.

Luego le decimos a ese elemento del corazón que “escuche” todos los clicks/taps que haga el usuario (heart.addEventListener('click', ...)) y posteriormente que le añada la clase heart-animation al primer click, pero se lo removemos al segundo click (heart.classList.toggle('heart-animation')).

4️⃣ Paso 4: creación de un tweet

Ya que tenemos nuestro “like” y “dislike” de Twitter, el siguiente paso es replicar el diseño de un Tweet (no debe ser 100% exacto) y añadirle la animación que acabamos de realizar.

Aquí te muestro cómo quedó el mío:

Los íconos los saqué de https://icons8.com/icons

5️⃣ Paso 5: compartir

Te comparto mi Codepen con la animación del corazón y mi Codepen con el diseño del Tweet.

Recuerda tú también compartirnos tu resultado final en los comentarios y en Twitter con el hashtag #RetosPlatziCSS. 😉

Además, te recomiendo tomar la siguiente saga de cursos para estudiar, dominar y profundizar en las propiedades de CSS para crear animaciones web profesionales (incluyendo las que usamos en este reto para crear el like de Twitter):

• Curso de Transformaciones y Transiciones en CSS
• Curso de Animaciones con CSS
• Curso Práctico de Maquetación y Animaciones con CSS

Te recomiendo continuar con este otro reto de CSS en Platzi: Principios de la animación interactiva: crea las animaciones de un reproductor de música. 😉

#NuncaParesDeAprender