Zero Block: animación paso a paso
Cómo configurar una animación compleja en Zero Block
Videotutorial
Animación paso a paso
Mira este video tutorial sobre cómo crear animaciones paso a paso en Zero Block, o lee una guía práctica detallada a continuación.
Hay dos modos de animación en Zero Block:
1) La animación básica es una animación simple. Estos son los efectos listos para usar más utilizados, como el efecto de apariencia (a través de la opacidad, de abajo hacia arriba, de derecha a izquierda, etc.), el paralaje y la fijación. Estos son suficientes en el 90% de los casos.
Guía de → básicos de animación
2) La animación paso a paso te permite hacer realidad ideas brillantes y creativas, de la manera que desees.
Echa un vistazo a diferentes ejemplos de lo que puedes lograr usando la animación paso a paso.
1) La animación básica es una animación simple. Estos son los efectos listos para usar más utilizados, como el efecto de apariencia (a través de la opacidad, de abajo hacia arriba, de derecha a izquierda, etc.), el paralaje y la fijación. Estos son suficientes en el 90% de los casos.
Guía de → básicos de animación
2) La animación paso a paso te permite hacer realidad ideas brillantes y creativas, de la manera que desees.
Echa un vistazo a diferentes ejemplos de lo que puedes lograr usando la animación paso a paso.
Primeros pasos con 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. Agregue un Zero Block a la página seleccionándolo en la Biblioteca de bloques (justo debajo de la categoría "Otro"), o haga clic en Zero Block en la parte inferior de la página.
Haga clic en Editar bloque en la esquina superior izquierda del Zero Block para personalizarlo.
Agregue un nuevo elemento, selecciónelo, abra el panel Configuración, desplácese hacia abajo hasta la sección "Animación paso a paso" y haga clic en Agregar.
Agregue un nuevo elemento, selecciónelo, abra el panel Configuración, desplácese hacia abajo hasta la sección "Animación paso a paso" y haga clic en Agregar.
La creación de una animación paso a paso para un elemento cancelará todas las configuraciones 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 tan pronto como aparece un elemento en particular en la pantalla;
- Bloquear en pantalla: una animación comienza a reproducirse cuando aparece un bloque completo en la pantalla;
- En desplazamiento: una animación comienza a reproducirse y continúa reproduciéndose durante el desplazamiento;
- Al pasar el ratón: comienza a reproducirse una animación al pasar el ratón;
- 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 de disparador.
- Start Trigger es un área o algo que iniciará 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;
- Trigger Offset es el desplazamiento del punto de inicio de la animación a la parte superior de la ventana, el centro de la ventana o la parte inferior de la ventana seleccionados;
- Loop se utiliza para configurar una animación para que se reproduzca en bucle.
Puede probar una animación, un elemento seleccionado o todos los elementos del bloque haciendo clic en Reproducir elemento o Reproducir todo.
Cómo agregar pasos de animación
El primer paso se estableció de forma predeterminada. Se llama Inicio. Agregue pasos y cambie las propiedades de los elementos en cada paso. Esto hará que el elemento cambie.
Para agregar un paso, haga clic en Agregar paso.
Para agregar un paso, haga clic en Agregar paso.
Puede cambiar entre pasos. El borde de un elemento que se vuelve azul significa que el elemento está en su posición original, mientras que el borde del elemento que se vuelve verde significa que el paso se está editando.
Para cambiar la posición original de un elemento, por ejemplo, para que sea invisible en el lanzamiento (opacidad: 0%), agregue 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, Flexibilizar y Retraso.
La duración es la duración de una animación en segundos.
Mover son las coordenadas donde se mueve el elemento en relación con su posición original. Para configurarlos, puede asignar valores o mover el elemento.
La escala es el grado de aumento o disminución del elemento al final del paso.
La opacidad es el valor de la transparencia del elemento al final del paso.
Rotar es la rotación de un elemento en grados hacia el final del paso.
La aceleración es la opción para elegir un efecto de animación: Lineal (ejecución de animación lineal); easeIn, easeOut, easeInOut (ralentización al principio, al final o ambas al principio y al final de la animación); bounceFin (un pequeño rebote de un elemento al final de la animación).
El retraso es la duración de una pausa antes de que una animación comience a reproducirse.
La duración es la duración de una animación en segundos.
Mover son las coordenadas donde se mueve el elemento en relación con su posición original. Para configurarlos, puede asignar valores o mover el elemento.
La escala es el grado de aumento o disminución del elemento al final del paso.
La opacidad es el valor de la transparencia del elemento al final del paso.
Rotar es la rotación de un elemento en grados hacia el final del paso.
La aceleración es la opción para elegir un efecto de animación: Lineal (ejecución de animación lineal); easeIn, easeOut, easeInOut (ralentización al principio, al final o ambas al principio y al final de la animación); bounceFin (un pequeño rebote de un elemento al final de la animación).
El retraso es la duración de una pausa antes de que una animación comience a reproducirse.
Crear una animación es agregar pasos y cambiar las propiedades de los elementos en cada paso.
El ejemplo de una animación de dos pasos.
Echemos un vistazo a cómo mover este cuadrado amarillo 550 px a la derecha, reducirlo mientras está en movimiento y volver a su posición original.
Aquí hay una guía paso a paso con nuestros comentarios a continuación:
Comprueba cómo funciona tu animación en el navegador
Además de los botones "Reproducir elemento" y "Reproducir todo", también puede obtener una vista previa de su animación.
Abra dos pestañas en su navegador: Zero Block y la misma página en el modo de vista previa.
Entonces, cuando haga clic en Guardar en Zero Block, verá los cambios en la página de vista previa después de actualizarla.
Abra dos pestañas en su navegador: Zero Block y la misma página en el modo de vista previa.
Entonces, cuando haga clic en Guardar en Zero Block, verá 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 ver la animación.
Haga clic para ver la página y ver la animación.
Haga clic para ver la página y ver la animación.
Revisión de características básicas.
Trabajar con contenedores y crear elementos fluidos.
Una lista de todos los métodos abreviados de teclado para acelerar su trabajo.
Conceptos básicos de animación: fijación, paralaje y efectos interactivos.
Una herramienta de animación avanzada: principios básicos, configuraciones y ejemplos.
