18 DE OCTUBRE DE 2023
Easing avanzado en la animación paso a paso de Tilda
Ahora dispone de más flexibilidad para personalizar la servidumbre de cada paso de la animación. Anteriormente, se disponía de cinco tipos básicos de servidumbre: Lineal, Ease-In, Ease-Out, Ease-In-Out y Elastic-Fin. Ahora puedes ajustar manualmente el easing, establecer valores precisos para esta función, así como aprovechar los 24 nuevos tipos de easing.
Qué es la flexibilización
La suavización es un cambio en la velocidad de movimiento de un elemento dentro de una misma animación, ralentizando o acelerando. Aporta propiedades físicas a los objetos no físicos: autenticidad, carácter y dinámica.
El movimiento lineal es el que resulta más antinatural. Imagina que la velocidad del elemento no cambia en toda la animación, como si no hubiera gravedad ni fricción. Tal animación parecerá artificial y simplemente descuidada.
El movimiento lineal es el que resulta más antinatural. Imagina que la velocidad del elemento no cambia en toda la animación, como si no hubiera gravedad ni fricción. Tal animación parecerá artificial y simplemente descuidada.
Ejemplo de animación sin el efecto easing. La velocidad del elemento permanece constante durante todo el movimiento.
Un ejemplo con el efecto easing al principio y al final de la animación. El aligeramiento al principio y al final es simétrico.
Cuando viene bien
Los distintos tipos de servidumbre y la posibilidad de modificarlos con curvas Bezier permiten experimentar con la animación en función del escenario y elegir la mejor configuración. Esto resultará especialmente relevante en proyectos que incluyan animaciones complejas impresionantes.
Un ejemplo de página web. Para el efecto de animación circular se utiliza el tipo de easing "Expo In Out".
Cómo configurar el Easing
- Seleccione un elemento y añádale un paso de animación.
- Ajuste Mover (o cualquier otro parámetro) y vaya a Easing → Editar.
- Aquí puede seleccionar el tipo de servidumbre de la lista, modificar la servidumbre con curvas Bezier o establecer los valores precisos para la misma. A continuación puede ejecutar el patrón de animación para este paso haciendo clic en el icono de reproducción.
La atenuación se personaliza por separado para cada paso de la animación.
Configuración del parámetro Easing en el editor de bloques cero de Tilda
Dónde encontrar el editor de Easing: Animación Paso a Paso → Easing → Editar.
Ver también
El nuevo bloque convierte cualquier Bloque Cero en una ventana emergente
Ya puedes crear y editar elementos vectoriales en el editor Zero Block de Tilda.
