Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Animation

Introducción a Popmotion: Interpolación

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

Popmotion es una biblioteca de animación de JavaScript funcional. En comparación con otras bibliotecas como GreenSock o Anime.js, Popmotion es de bajo nivel y no tiene opiniones.

Incluye una tonelada de características, como la física del resorte y el seguimiento del puntero, en un tamaño muy pequeño (11.5kb).

Permite a los desarrolladores escribir sus propias características usando funciones simples, en lugar de esperar a que el autor de la biblioteca las agregue.

También significa que es tan fácil animar objetos 3D, gráficos o componentes de React como animar elementos DOM o SVG.

Esta flexibilidad puede hacer que la curva de aprendizaje inicial sea más pronunciada que la de otras bibliotecas. Entonces, en esta serie de tutoriales, aprenderemos los conceptos básicos de las poderosas animaciones en Popmotion. Comenzaremos con el caballo de batalla del mundo de la animación, la interpolación.

Instalar

Popmotion admite una variedad de métodos de instalación. En producción, recomiendo instalarla a través de npm, ya que esto te permite importar solo los bits que necesitas, ahorrando aún más espacio.

Sin embargo, para este tutorial, puedes seguir este CodePen, que se ha configurado con la última versión de Popmotion.

Interpolación

Para aquellos que no están familiarizados, una interpolación cambia entre un número y otro durante un período de tiempo predeterminado. Si has utilizado una transición CSS, la función tween de Popmotion funciona exactamente igual.

Podemos importar tween así:

De forma predeterminada, tween se anima entre 0 y 1 durante una duración de 300 milisegundos. Si abres tu consola, puedes probar esto tú mismo:

Pero no queremos animar la consola, queremos animar la pelota. Para ello, Popmotion incluye otra función, styler.

Nota: En este primer ejemplo, definimos tanto update como la función complete. Pero si proporcionas start con una única función, esto la asignará automáticamente a update.

Styler

styler se utiliza para crear interfaces get/set para estilos HTML y SVG optimizados para su uso con animaciones (¡de cualquier biblioteca!).

En el ejemplo anterior, tween está generando un número, por lo que, por supuesto, podríamos establecer la opacidad de la bola de esta manera (pruébalo):

Sin embargo, styler tiene las siguientes ventajas:

  • Renderiza por lotes para evitar errores de diseño.
  • Renderiza, como máximo, una vez por fotograma.
  • Permite que los accesorios transform se establezcan individualmente, lo que permite la animación independiente de accesorios como scale y translateX.
  • Unifica los modelos de coordenadas de transformación CSS y SVG.
  • Comprende los tipos de valores predeterminados, por lo que puedes configurar translateX (por ejemplo) sin agregar 'px'.

Tampoco estás limitado a usarlo dentro de una animación. Puedes establecer manualmente el estilo de un elemento mientras otros se animan, y el cambio se programará y se agrupará automáticamente junto con los demás.

Así que importémoslo:

Crea el styler de la bola:

Ahora podemos usar ballStyler para establecer y animar cualquiera de las propiedades de la bola. ballStyler.set es flexible. Puedes establecer una sola propiedad:

O múltiples propiedades:

Queremos animar la opacidad (opacity) por ahora, así que cambiemos nuestra animación:

set también se puede agregar de manera general. Al proporcionarle solo un nombre de propiedad, devolverá una función 'setter' para esa propiedad. Entonces podemos arreglar lo anterior escribiendo:

Hasta ahora, solo hemos animado la bola usando las propiedades tween predeterminadas. Echemos un vistazo a lo versátil que puede ser tween.

Props en la interpolación

tween acepta un argumento opcional, un objeto de propiedades de interpolación. Echemos un vistazo a algunos de los props más utilizados:

from/to

Una interpolación puede estar entre dos estados cualquiera. Los definimos con from y to.

Animamos translateX reescribiendo 'opacity' a 'x'. Luego, pasa from y to a los props:

Tu bola ahora se mueve de izquierda a derecha 300px.

Sin embargo, dije que una interpolación puede ser entre dos estados, no solo números. Si proporcionamos los objetos from y to de números y/o colores, podemos animar múltiples propiedades a la vez.

Prueba esto:

Esta es una manera fácil de animar múltiples props simultáneamente.

Duración

duration se define en milisegundos. De forma predeterminada, una interpolación tardará 300ms, pero si establecemos duration en 1000, tardará un segundo:

Suavizado

Las funciones de aceleración se utilizan en la interpolación para cambiar la velocidad del movimiento a lo largo de la animación.

En la vida real, los objetos no se inician ni se detienen a su velocidad objetivo. Dependiendo del objeto, se aceleran gradualmente o disminuyen gradualmente, o ambos.

Una función de aceleración simplemente funciona tomando el progreso de la interpolación, definido como un número entre 0 y 1, y devolviendo uno nuevo.

No necesitas saber cómo hacer estas funciones porque Popmotion te proporciona muchas.

Importarlas:

Por defecto, ease se establece en easing.easeOut. Cuando una función desaparece, significa que comienza rápido y termina lentamente.

Esto se eligió como predeterminado porque creo que la mayoría de las animaciones en las interfaces de usuario deberían iniciarse como resultado de la acción de un usuario. Al comenzar rápido y terminar lento, el usuario sentirá como si impartiera su energía, a través de su toque o clic, directamente en la interfaz. Se siente ágil, vivo y receptivo.

Para muchas animaciones fuera de la entrada del usuario, o por sí mismas, puede parecer menos incongruente usar una animación de desvanecimiento, como easing.easeInOut o easing.anticipate, que hace un tirón divertido antes de animar.

Finalmente, está la función easing.cubicBezier, que crea una nueva función de suavizado basada en una curva de suavizado, al igual que las transiciones CSS. Esto proporciona un gran grado de control y flexibilidad sobre tu movimiento.

Intenta aplicar algunos de estos a tu animación mientras juegas con duration para ver cómo afecta la sensación y la naturaleza de la misma.

Repetición

Las animaciones se pueden repetir de tres formas diferentes: loop, yoyo y flip.

Loop inicia la animación desde el principio. Yoyo refleja la interpolación al ejecutarla hacia atrás. Y flip lo ejecuta al revés y cambia la función de aceleración.

Uno de estos se puede establecer por interpolación, y cada uno se establece como un número que denota el número de veces que se repite la animación. Para repetir para siempre, simplemente pasa Infinity:

Reproducción

Cuando se inicia una interpolación, devuelve controles de reproducción que podemos usar para controlar esa animación.

En el ejemplo anterior, controls tendrán acceso a todos estos métodos de reproducción, como stop, pause, y resume:

Podemos usar estos controles de reproducción para pausar (pause) y luego solicitar (seek) a través de la interpolación:

¡Con esto, podemos crear una animación que se puede eliminar! En un tutorial posterior, exploraremos cómo usar la función pointer de Popmotion para crear una barra de desplazamiento, pero por ahora puedes desplazar un tween con una segunda interpolación para ver esto en acción:

Fotogramas clave

Para transiciones simples de 'a' a 'b', tween es excelente. Para secuencias más complicadas de interpolaciones, Popmotion proporciona otra función llamada keyframes.

Vamos a importarlo:

Interpolaciones keyframes mediante una serie lineal de estados. Proporcionamos estos estados a su propiedad values:

Como tween, también podemos definir estos estados como objetos. Entonces, para mover la pelota en un cuadrado, podemos escribir:

De forma predeterminada, keyframes asignarán a cada una de estas interpolaciones una parte igual de la duración total.

Al proporcionar una matriz times, podemos marcar cada uno de estos estados con un número entre 0 y 1. 0 representa el inicio de la animación y 1 representa el final:

De esta forma, podemos ajustar la duración de la animación sin tener que comentar cada segmento individual.

También permite que a cada animación se le dé un suavizado individual con la propiedad easings:

Debido a que keyframes es solo una interpolación, podemos ajustar su reproducción general con las mismas propiedades, como ease y loop, y controlarlo con los mismos métodos que aprendimos anteriormente.

Conclusión

Las funciones tween y keyframes te permiten crear animaciones simples y complejas.

styler trae sus propios beneficios, como el uso fuera de las animaciones, la estandarización de modelos de transformación CSS y SVG y procesamiento por lotes para un alto rendimiento de animación.

En este tutorial, hemos cubierto solo un par de animaciones que ofrece Popmotion. En la próxima entrega, exploraremos el seguimiento del puntero y las animaciones basadas en la velocidad, como physics y spring.

Las animaciones basadas en la velocidad se pueden usar para crear interfaces de usuario con sensación natural que reaccionan de manera realista a la entrada de un usuario. ¡Te espero allí!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.