Saltar la navegación

5- Animación

Como ves, hasta ahora, todo lo visto para Genial.ly es muy parecido a lo que vimos en unidades anteriores para Canva y Piktochart. Lo que verdaderamente hace diferente a Genial.ly son 2 características

  1. Animación: dotar de efectos y animaciones a los elementos que componen la infografía para hacerla más impactante.
  2. Interactividad: Lograr que la infografía haga algo ante una acción del usuario.

Veremos en primer lugar en qué consiste la animación y cómo podemos utilizarla:

Animar un elemento

Puedes animar cualquier elemento que contenga tu infografía (iconos, imágenes, textos, etc.). Es tan sencillo como seleccionar el elemento al que quieres animar y elegir esta herramienta mediante el icono Animación que aparecerá justo encima del elemento seleccionado, como puedes ver en la siguiente imagen (1): 

Icono Animación:

A continuación, conocerás las distintas opciones que tendrás para animar tu elemento: 

Comportamiento

Podrás elegir entre estas cuatro opciones: La entrada solo se producirá al principio. La salida, al final. El comportamiento continuo significará que el efecto no parará. Si solo quieres que se produzca el efecto cuando pase el ratón, selecciona la cuarta opción:

Dirección

En este segundo paso, elegirás la dirección hacia la que quieres que se produzca el efecto, dándole así un movimiento de una forma u otra. Si eliges la primera opción, aparecerá desde la misma posición en la que se encuentre el elemento:

Efecto

En este apartado, elegirás el efecto en sí que quieres que tenga dicho elemento. Podrás elegir entre esta lista de efectos, cada una con su particularidad. Podrás ver una previsualización y al momento se aplicará al elemento y podrás ver cómo queda:

Tiempo

Si seleccionas un efecto dede entrada o salida, aquí podrás elegir el tiempo de inicio y también la velocidad. Para ir viendo cómo quedan los efectos, pulsa en el icono del ojo en la parte superior derecha y podrás  previsualizar el resultado.

4

Atención

Si deseas copiar la animación de un elemento en particular y aplicar la misma animación a otro elemento, es tan sencillo como hacer lo siguiente:

  • Selecciona primero el elemento que tiene la animación que quieres copiar y, en las opciones de animación, haz clic en el icono copiar:

  • Después selecciona el elemento al que quieres insertar la misma animación que acabas de copiar y en las opciones de animación, haz clic en el icono "Pegar":

2