Zero Block: Animación paso a paso
Cómo configurar una animación compleja en Zero Block
Tutorial en vídeo
Animación paso a paso
Vea este tutorial en vídeo sobre la creación de animaciones paso a paso en Zero Block, o lea una guía detallada a continuación.
Hay dos modos de animación en Zero Block:
1) Animación básica es una animación simple. Se trata de efectos ya hechos, los más utilizados, como el efecto de apariencia (a través de la opacidad, de abajo hacia arriba, de derecha a izquierda, etc.), paralaje, y la fijación. Son suficientes en el 90% de los casos.
Guía de animación básica →
2) La animación paso a paso le permite hacer realidad ideas brillantes y creativas, de la forma que desee.
Eche un vistazo a diferentes ejemplos de lo que puede conseguir utilizando la animación paso a paso.
1) Animación básica es una animación simple. Se trata de efectos ya hechos, los más utilizados, como el efecto de apariencia (a través de la opacidad, de abajo hacia arriba, de derecha a izquierda, etc.), paralaje, y la fijación. Son suficientes en el 90% de los casos.
Guía de animación básica →
2) La animación paso a paso le permite hacer realidad ideas brillantes y creativas, de la forma que desee.
Eche un vistazo a diferentes ejemplos de lo que puede conseguir utilizando la animación paso a paso.
Introducción a la animación paso a paso
La herramienta de animación paso a paso está disponible en Zero Block, un editor web dirigido a diseñadores profesionales. Añada un Zero Block a la página seleccionándolo en la Biblioteca de bloques (justo debajo de la categoría "Otros"), o haga clic en Zero Block en la parte inferior de la página.
Haga clic en Editar bloque en la esquina superior izquierda de Zero Block para personalizarlo.
Añada un nuevo elemento, selecciónelo, abra el panel Configuración, desplácese hasta la sección "Animación paso a paso" y haga clic en Añadir.
Añada un nuevo elemento, selecciónelo, abra el panel Configuración, desplácese hasta la sección "Animación paso a paso" y haga clic en Añadir.
Crear una animación paso a paso para un elemento cancelará todos los ajustes de Animación Básica para este elemento.
Cómo seleccionar un evento para lanzar una animación
Comience a crear una animación paso a paso seleccionando un Evento-una condición para que la animación comience a reproducirse. Hay cinco condiciones para elegir:
- Elemento en pantalla: una animación comienza a reproducirse en cuanto aparece un elemento determinado en la pantalla;
- Bloque en pantalla: una animación empieza a reproducirse cuando aparece un bloque entero en la pantalla;
- Al desplazarse: se inicia una animación que continúa reproduciéndose durante el desplazamiento;
- Al pasar el ratón por encima: una animación comienza a reproducirse al pasar el ratón por encima;
- Al hacer clic: una animación comienza a reproducirse al hacer clic.
El punto de inicio de la animación tiene tres opciones adicionales: Disparador de inicio, Bucle y Desplazamiento del disparador.
- Start Trigger es un área o cosa que lanzará su animación. Elija entre tres áreas: en la parte superior de la ventana, en el centro de la ventana o en la parte inferior de la ventana;
- El Desplazamiento del Disparador es el desplazamiento del punto de inicio de la animación respecto a la Ventana Superior, Ventana Central o Ventana Inferior seleccionada;
- Loop se utiliza para configurar una animación para que se reproduzca en bucle.
Puede probar una animación o un elemento seleccionado o todos los elementos del bloque haciendo clic en Reproducir elemento o Reproducir todo.
Cómo añadir pasos de animación
El primer paso se estableció por defecto. Se llama Inicio. Añada pasos y cambie las propiedades del elemento en cada paso. Esto hará que el elemento cambie.
Para añadir un paso, haga clic en Añadir paso.
Para añadir un paso, haga clic en Añadir paso.
Puede cambiar de un paso a otro. Si el borde de un elemento se vuelve azul, significa que el elemento está en su posición original, mientras que si el borde del elemento se vuelve verde, significa que se está editando el paso.
Para cambiar la posición original de un elemento, por ejemplo, para hacerlo invisible en el lanzamiento (opacidad-0%), añada el primer paso y establezca la opacidad en 0% y la duración en 0 segundos.
Cada paso tiene un conjunto de propiedades como Duración,Mover , Escala, Opacidad, Rotar, Suavizar y Retraso.
Duración es la duración de una animación en segundos.
Mover son las coordenadas a las que se mueve el elemento respecto a su posición original. Para configurarlas, puede asignar valores o mover el elemento.
Escala es el grado de aumento o disminución del elemento hacia el final del paso.
Opacidad es el valor de transparencia del elemento hacia el final del paso.
Rotar es la rotación de un elemento en grados hacia el final del paso.
Easing es la opción para elegir un efecto de animación: Lineal (ejecución lineal de la animación); easeIn, easeOut, easeInOut (ralentización al principio, al final, o ambos al principio y al final de la animación); bounceFin (un pequeño rebote de un elemento al final de la animación).
Delay es la duración de una pausa antes de que una animación comience a reproducirse.
Duración es la duración de una animación en segundos.
Mover son las coordenadas a las que se mueve el elemento respecto a su posición original. Para configurarlas, puede asignar valores o mover el elemento.
Escala es el grado de aumento o disminución del elemento hacia el final del paso.
Opacidad es el valor de transparencia del elemento hacia el final del paso.
Rotar es la rotación de un elemento en grados hacia el final del paso.
Easing es la opción para elegir un efecto de animación: Lineal (ejecución lineal de la animación); easeIn, easeOut, easeInOut (ralentización al principio, al final, o ambos al principio y al final de la animación); bounceFin (un pequeño rebote de un elemento al final de la animación).
Delay es la duración de una pausa antes de que una animación comience a reproducirse.
Crear una animación es añadir pasos y cambiar las propiedades de los elementos en cada paso.
Ejemplo de animación en dos tiempos
Veamos cómo mover este cuadrado amarillo 550px a la derecha, reducir su escala mientras está en movimiento, y volver a su posición original.
Aquí tienes una guía paso a paso con nuestros comentarios:
Comprueba cómo funciona tu animación en el navegador
Además de los botones "Reproducir elemento" y "Reproducir todo", también puedes previsualizar tu animación.
Abre dos pestañas en tu navegador: Zero Block y la misma página en el modo de previsualización.
Así, cuando hagas clic en Guardar en Zero Block, verás los cambios en la página de vista previa después de actualizarla.
Abre dos pestañas en tu navegador: Zero Block y la misma página en el modo de previsualización.
Así, cuando hagas clic en Guardar en Zero Block, verás los cambios en la página de vista previa después de actualizarla.
Los ejemplos de animación paso a paso:
Haga clic para ver la página y la animación.
Haga clic para ver la página y la animación.
Haga clic para ver la página y la animación.
Revisión de las características básicas.
Trabajar con contenedores y crear elementos fluidos.
Una lista de todos los atajos de teclado para agilizar tu trabajo.
Conceptos básicos de animación: fijación, paralaje y efectos interactivos.
Una herramienta de animación avanzada: principios básicos, ajustes y ejemplos.
