Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Animation
Webdesign

Haciendo más atractivas tus animaciones en la web

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

Cuando hablamos de usar animaciones con frecuencia discutimos las maneras prácticas en que podemos crear transiciones, animaciones, etc. Animación es una forma poderosa de hacer nuestros diseños más destacados, pero más bien que enfocarnos en como funcionan las animaciones individuales, la manera en que se combinan múltiples animaciones puede crear algo aún más poderoso.

Atracción

Los 12 principios básicos de la animación de Disney definen "Atracción" como la equivalencia de "carisma en un actor". Es cómo el realismo, el estilo, y la sustancia de animación se añaden para dar un sentido al personaje que la audiencia encuentra real e interesante.

The Illusion of Life Disney Animation
La ilusión de la vida: Animación Disney en la que se exponen los 12 principios básicos de la animación

Es una técnica bien aprovechada por Stripe. Stripe es un servicio de pagos online, y proporciona herramientas para incrustar formularios de pagos en sitios de internet. Éstos formularios son famosos por ser bellamente diseñadas, particularmente su uso de la animación.

En éste artículo discutiré como las animaciones múltiples pueden ser usadas para crear un efecto más que la suma de sus partes, y mostraré cómo puedes utilizar este conocimiento de forma práctica.

Tarjeta de Medios Sociales

En éste ejemplo utilizaremos animación para presentar una tarjeta con detalles y enlaces a sitios web y otros cuentas sociales.

Cuando un botón es presionado, aparecerá una tarjeta con algunas opciones para pulsar sobre los enlaces. Más bien que usar una sencilla ventana como se hacia anteriormente, utilizaremos una animación para hacerla más interesante.

Para hacerla atractiva, hay varias animaciones que ocurren. Varias partes tienen animación y presentan cada elemento en orden. Ésto ayuda a la audiencia a entender la conexión entre lo que han presionado y el contenido y el orden de las animaciones ayuda a llamar la atención a los íconos que son enlaces.

Estableciendo el HTML

Para empezar necesitamos un botón para presionar y una tarjeta para mostrar.  La tarjeta estará oculta cuando se presente el contenido por primera vez.

El botón es una imagen y algo de texto. Cuando se presiona, mostrará la tarjeta. La tarjeta se conforma de cuatro secciones; un botón para cerrar, una sección de detalles, una imagen y una barra de íconos que contienen los íconos sociales. Para éste ejemplo estaremos usando íconos SVG hechos dentro de HTML y tomados de la colección Entypo.

Aplicando estilo

Antes de adentrarnos en la animación agreguemos algo de estilo al botón y la tarjeta. Primero, el botón:

Nota: hemos añadido un outline:none; al elemento .show-card  porque algunos navegadores agregan un peculiar resplandor al estado focus de botones (lo cual no queremos):

Luego aplicaremos estilo a la tarjeta y cada una de sus secciones.

Nota que inicialmente establecimos en la tarjeta display:none. Posteriormente controlamos ésto con Javascript.

El Básico Mostrar y Ocultar

Más bien que adentrarnos en el CSS, primero estableceremos la acción básica de mostrar y ocultar la información de contacto. Ésto hará uso de un poco de Javascript (y en éste caso jQuery) para agregar y remover clases dependiendo de lo que es pulsado.

Ahora deberíamos ser capaces de mostrar y ocultar la tarjeta usando jQuery y la propiedad display de CSS.

Observa el básico ejemplo de mostrar y ocultar aquí:

Antes de Animar

Con el maquetado establecido, necesitamos añadir más estilo para ocultar varios elementos para que podamos animarlos al aparecer.

Éstos elementos tendrán un retraso antes de que tome efecto su animación, así que deben estar fuera de la vista inicialmente.

Animaciones Básicas

Con el mecanismo montado para mostrar y ocultar la tarjeta, podemos empezar a adjuntar las animaciones.  El código Javascript de arriba añade un estado show a la tarjeta cuando aparecen, y podemos adjuntar animaciones a ésta clase que presentarán las partes individuales de la tarjeta.

Para hacer ésto usaremos la propiedad animation de CSS y un conjunto de keyframes.

Es útil crear animaciones de propósito general en CSS y reutilizarlas. Animaciones sencillas tales como la aparición lenta y desaparición lenta puede ser definida una vez y usada en múltiples lugares.

Para mostrar como se definen los keyframes, vamos a crear las animaciones de aparición lenta y desaparición lenta.

Keyframes son una serie de pasos, definidos como porcentajes. Pueden ser cualquier número de pasos pero en nuestro ejemplo solo definimos el inicio (0%) y final (100%) de los keyframes. En el fade-in iniciamos sin opacidad (0) y finalizamos  con una total opacidad (1). La animación fade-out hace lo contrario.

Podemos usar la propiedad animación para aplicar éstas animaciones de desvanecimiento al botón cuando está mostrado y cuando está oculto.

La animación abreviada indica a la tarjeta usar la animación fade-in, que dura 0.4 segundos con un segundo de retraso. La animación se efectuará una vez y se detendrá al final y usa la propiedad function-timing (Función del Tiempo ó ritmo de la animación) con un valor de ease-out.

Cuando la clase hide se aplica al botón, la animación fade-out toma efecto.

Timing Function (Función del Tiempo) Efecto Elástico

La primera parte que presentaremos es la barra de íconos. Ya que aquí es donde estarán los enlaces, queremos que destaque y sea lo primero que la gente vea.

Cuando se genera animación podemos crear interesantes efectos usando la propiedad timing function (función del tiempo). En éste caso usaremos una timing function cubic-bezier (curva bezier) para añadir un "elástico" cuando aparece la barra de íconos.

Primero crearemos sencillos keyframes para que la barra primero sea pequeña y aumente su altura.

Podemos ahora aplicar éste conjunto de keyframes a la barra de íconos cuando la clase show se añada a la tarjeta.

El efecto de elasticidad es creado por el uso de la propiedad timing function cubic-bezier. La propiedad timing function describen los cambios en la velocidad durante la animación, y puedes ser designados para implementar una aceleración al inicio o al final de una animación. Ésta animación va un poco inerte, luego corrige, creando un efecto de elasticidad.

Retraso de la Animación

Con la barra de íconos introducida, necesitamos animar la sección que contiene los detalles y la imagen. Nos gustaría que ésta sección apareciera después de que ha sido introducida la barra de íconos. Para lograr ésto usaremos la propiedad animation-delay

La animación aplicada a la sección detalles se establece para tener una duración de 0.7 segundos, un retraso de 0.5 segundos.  Ésto significa que la animación no comenzará hasta después de que la barra de íconos ha sido presentada.

También usaremos una  timing function cubic bezier aquí para darle una apariencia de elasticidad.

Luego definimos los keyframes para la animación de éste contenedor.

Los keyframes de la animación show-detail-container inicia con el contenedor invisible con una altura de cero, y se anima para que alcance su altura definida. La propiedad  timing function cubic bezier hace la animación acelere un poco para darle una sensación de elasticidad.

Combinando múltiples animaciones

Múltiples animaciones pueden ser aplicadas en una sola propiedad. Mientras las animaciones no interfieran entre sí (al tratar de animar la misma propiedad), pueden usarse para añadir matiz a una animación. Múltiples animaciones son definidas como animaciones individuales pero separadas por comas.

En éste caso vamos a aparecer sutilmente la imagen, el nombre y el contenido de la descripción mientras al mismo tiempo se usa una función pop-in para hacer que aparezcan desde lejos y luego aumenten de tamaño.

Si hubiéramos usado una sola animación, con una timing function cubic bezier, el efecto de aparición pareceria como instantáneo e inadecuado. En cambio, tendremos la aparición lenta con un timing function linear y el zoom tendrá el efecto elástico.

Primero definimos los keyframes pop-in.

Ésto usa la transformación scale (escalar) para que cada elemento inicie más pequeño y luego escale a su tamaño normal.

Traigamos el contenido. Cada elemento tiene dos animaciones, y cada uno de los elementos tiene un retraso en la animación más largo ligeramente para lograr su aparición.

Ícono de Cerrar

La animación del ícono de cerrar hace uso de keyframes fade-in que definimos previamente.

Llamados a la Acción

Sólo necesitamos mostrar los íconos ahora. Cuando se presenten las animaciones, lo último que se anima es donde terminará la atención del espectador. Ésto significa que la atención de los espectadores seguirá la animación y finalizará observando los íconos que nos gustaría que seleccionaran.

De nuevo haremos uso de la propiedad retraso de la animación (delay) para éstos, buscando asegurarnos que se presenten al último. Primero definimos los keyframes de una animación para los íconos:

Cada ícono girará un poco mientras aparecen lentamente.  Podemos ahora enlazar ésta animación a cada uno de los íconos, usando un retraso en cada uno para hacerlos aparecer.

Pongamos todos éstos juntos y ahora tenemos una tarjeta que aparece llamativamente cuando el botón es pulsado.

Una Cosa Más

Antes de que podamos terminar, necesitamos añadir una acción hide al botón de cerrar y animar la tarjeta. Primero actualizaremos el código Javascript. Al presionar el ícono close (cerrar), el código Javascript espera un segundo antes de remover la tarjeta con display:none.

Ésto nos da un segundo para animar la tarjeta-la tendremos cayendo de la parte superior de la pantalla. Los keyframes que logran ésto son:

Entonces aplicamos ésto como una animación a la tarjeta.

Demo

Conjuntándolo todo, puedes ver el resultado aquí.

Una Nota sobre Prefijos y Compatibilidad de Navegadores

Las animaciones son bien soportadas en diferentes navegadores. Dependiendo del usuario, deberían funcionar en la mayoría de las situaciones. Vale la pena asegurarse de que la función básica de mostrar y ocultar funcione y que cualquier animación sea agregada como mejora progresiva.

Resumen

A través del uso de animaciones múltiples, y particularmente de la propiedad animation-delay, hemos tomado lo que habría sido un simple widget y lo hicimos más atractivo. La animación guía al espectador a través de cada uno de los elementos y lo motiva a interactuar.

La animación puede ser una gran forma de comunicarse dentro de tus diseños. Ésta comunicación ayuda a los visitantes a entender tu intención así como a mejorar la credibilidad y la confianza en la calidad de tu trabajo.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
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.