En este artículo, repasaremos cómo agregar Animaciones a cualquier parte de tu diseño.
Las animaciones son una forma efectiva de mostrar promociones, anuncios y mensajes. Atraen el ojo humano con el movimiento, causando que las personas miren naturalmente hacia su origen. Con Designer, es fácil agregar animaciones a tus diseños, atrayendo más atención de los visitantes.
Para una introducción al uso de Designer, consulta nuestro artículo sobre Primeros Pasos con Designer.
Cómo Agregar Animaciones a Elementos de Diseño
Seleccionar el botón Animar te permitirá agregar animaciones a tus elementos de diseño.
Este botón también está disponible por elemento.
Al hacer clic se abrirá el área Animar en el Menú Lateral:
Para agregar una animación, necesitarás seleccionar un elemento para animar. Luego, decide si usar una Animación de Página o una Animación de Objeto.
Para demostrar las diferencias entre las dos y cómo usarlas mejor (juntas o por separado), usaremos un diseño de plantilla simple, como el siguiente:
Animaciones de Página
Las Animaciones de Página se animarán en el orden en que se colocan en la lista. Estas también se animarán solo una vez, cuando se cargue la página.
Por ejemplo, digamos que queremos que el agua en nuestra plantilla de ejemplo entre volando desde la derecha - para dar la apariencia de salpicar las botellas de agua.
Primero, selecciona el elemento. Luego, presiona Animar → Agregar bajo la sección Animaciones de Página. Esto mostrará un montón de opciones:
Tipos de Animación:
- Aparecer gradualmente
- Desvanecer
- Volar desde la izquierda
- Volar desde la derecha
- Volar desde abajo
- Volar desde arriba
- Volar hacia la izquierda
- Volar hacia la derecha
- Volar hacia abajo
- Volar hacia arriba
- Acercar - Acerca brevemente el elemento
- Alejar - Aleja brevemente el elemento
- Rebotar X - Rebota el elemento horizontalmente
- Rebotar Y - Rebota el elemento verticalmente
- Destello
- Zoom - Alterna entre acercar y alejar el elemento
- Girar a la izquierda
- Girar a la derecha
Si bien podríamos proporcionar descripciones detalladas de cada una de estas, ¡es más divertido jugar con ellas y ver cómo se ajustan a tu visión por ti mismo!
Temporización de Animación:
- Después de la anterior - Configura la animación para que se active después de la animación anterior en la lista.
- Con la anterior - Configura la animación para que se active al mismo tiempo que la animación anterior.
- Desde el principio - Configura la animación para que se active tan pronto como se cargue el activo.
Retraso (seg) - Cuánto tiempo de retraso entre la carga del activo/animación anterior y la activación de la animación.
Velocidad de Animación - Cambia qué tan rápido se mueve la animación.
| NOTA |
|
Para utilizar correctamente la Temporización de Animación, necesitarás coordinar tu elección con la opción de Retraso. Por ejemplo, digamos que tenemos tres animaciones de página, A, B y C.
|
Una vez que se agrega una animación, se pueden crear más. La lista de animaciones se puede reordenar mediante arrastrar y soltar:
| NOTA |
| El orden en que se arrastran las Animaciones no anula su temporización para mostrar. Por ejemplo, si tienes tres animaciones y una está configurada para mostrarse "Desde el principio" y la arrastras al final del orden, aún se mostrará desde el principio a pesar de ser la última en orden. Cambiar el orden en el arrastrar y soltar no cambiará la configuración de Temporización de Animación. |
Para crear la animación que queremos, simplemente seleccionamos los diferentes elementos de agua y hacemos que Vuelen desde la derecha, configurados en Desde el principio para que toda el agua entre a la vez. Podemos probar esto presionando Reproducir:
Animaciones de Objeto
Las Animaciones de Objeto se animarán simultáneamente, independientemente del orden en que se coloquen. Estas también se pueden configurar para animar indefinidamente (o mientras el activo se muestre en la pantalla).
Por ejemplo, digamos que queremos que nuestra pantalla permanezca activa durante bastante tiempo (más de un minuto, digamos). Para eso, querremos incluir alguna animación adicional para asegurarnos de que no se estanque y continúe atrayendo la atención de las personas.
Para hacer esto, llamaremos la atención sobre el elemento de texto Hidratación creando una Animación de Objeto.
La pestaña Animaciones de Objeto es similar a la pestaña Animaciones de Página, con algunas diferencias clave:
Temporización de Animación
- Retraso - se refiere al retraso entre cada animación. Esto incluye al principio y en cada animación subsiguiente
- Retraso Final - Se refiere al retraso dentro de cada animación.
Bucle
- Indefinidamente - Repite continuamente la animación hasta que se cambie el activo.
- Una Vez - Reproduce la animación al cargar una sola vez.
- Iteraciones - Te permite especificar cuántas veces te gustaría que se repita la animación.
| NOTA para Usuarios Legacy de Designer 1.0 |
| Con la reciente actualización de Designer 2.0, hemos descontinuado múltiples animaciones de objeto en un solo elemento. Si tienes 2-3 animaciones de objeto en un diseño 1.0, aún se puede editar en 2.0. Sin embargo, si se elimina, tendrá que agregarse nuevamente en 1.0. Una vez que Designer 1.0 sea descontinuado, solo podrás editar o eliminar estas animaciones. |
Digamos que queremos que el texto de Hidratación rebote de lado a lado, pero no tan rápido como para ser distractor o molesto.
Estableceremos el Retraso en 3 segundos y luego estableceremos el Retraso Final también en 3 segundos. Esto causará que el rebote se detenga durante ese tiempo. Por último, estableceremos el Bucle en Indefinidamente:
Ahora, cuando juntamos todas nuestras animaciones, obtenemos un buen conjunto rápido de animaciones al principio gracias a nuestras Animaciones de Página, seguido de un buen bucle después gracias a nuestra Animación de Objeto. Esto se puede probar con Reproducir Todo o Vista Previa:
| NOTA |
|
La fórmula para cada iteración de Animación de Objeto es la siguiente: Retraso + Duración de Animación + Retraso Final = 1 Iteración. |
Problemas Comunes con Animaciones
Ahora, repasemos algunos problemas comunes que puedes encontrar mientras intentas mostrar tus animaciones en una pantalla.
Precarga de Activos en Lista de Reproducción
Esta función permite una apariencia más fluida al cargar activos antes de mostrarlos en pantalla. Esto reduce la probabilidad de que tu señalización digital se cuelgue por uno o dos segundos mientras se cargan los activos.
OptiSigns precargará tus activos 6-8 segundos antes de que el activo se muestre en la pantalla. Esto tiene el efecto desafortunado de potencialmente omitir tu animación, que se mostrará inmediatamente al cargar. Para solucionar esto, puedes:
- (Recomendado) Agregar un retraso de 1-3 segundos en tus animaciones para asegurar que aparezcan en pantalla cuando se seleccione esta precarga:
- Desactivar Precargar Activos en Lista de Reproducción. Sin embargo, esto mostrará una pantalla en blanco entre transiciones.
Rendimiento del Dispositivo
Ejecutar demasiadas animaciones a la vez afectará el rendimiento de tu dispositivo y creará una experiencia de señalización digital menos que ideal.
En general, el grado en que esto se sienta dependerá de las capacidades de rendimiento de tu dispositivo. Un dispositivo Roku, Smart TV típico, Amazon FireStick u otro dispositivo no diseñado específicamente para señalización digital es probable que sufra problemas peores. Si usas uno de estos dispositivos, recomendamos no más de 1 o 2 animaciones por activo creado.
Por el contrario, los dispositivos Windows y Linux o los reproductores OptiSigns pueden manejar cargas significativamente más altas. Sin embargo, si ves tartamudeo mientras usas uno de estos dispositivos, recomendamos limitar las animaciones a 3-4 animaciones por activo creado.
¡Eso es todo!
OptiSigns es el líder en software de señalización digital. Si tienes preguntas adicionales, inquietudes o comentarios sobre OptiSigns, no dudes en contactar a nuestro equipo de soporte en support@optisigns.com.