El easing permite cambiar la aceleración y la desaceleración de la transición de una animación. Google Web Designer proporciona las cinco funciones de easing estándar definidas en las especificaciones de CSS3, así como las transiciones por paso y la opción de personalizar easings en el modo Avanzado.
Nota: Hay varias opciones de easing disponibles para los efectos de texto.
Easing en el modo Rápido
En el modo Rápido, se aplica el mismo easing a todos los elementos animados situados entre las miniaturas.
Para cambiar el easing en el modo Rápido:
- Haga clic en el botón Opciones de fotograma clave , situado entre las miniaturas.
- Se abre el editor de transiciones.
-
En el editor de transiciones, haga clic en las flechas para elegir entre los distintos preajustes de easing predeterminados. Si lo desea, también puede cambiar la duración del easing. Para ello, introduzca un periodo de tiempo en segundos o haga clic en el campo del tiempo y arrastre el cursor hacia la izquierdo o la derecha.
Preajustes de easing predeterminados
Preajuste de easing | Descripción |
---|---|
Lineal |
Las animaciones cambian a una velocidad constante. |
Ease |
Las animaciones comienzan a una velocidad media y se desaceleran hacia el final. |
Ease-out |
Las animaciones comienzan rápidamente y se desaceleran hacia el final. |
Ease-in |
Las animaciones comienzan lentamente y terminan rápidamente. |
Ease-in-out |
Las animaciones comienzan y terminan lentamente, pero se mueven rápidamente en el centro. |
Finalización del paso |
Las animaciones se mantienen en la posición inicial durante el tiempo del easing y después saltan directamente a la posición final. |
Inicio del paso |
Las animaciones saltan directamente a la posición final. |
Easing en el modo Avanzado
El modo Avanzado ofrece opciones de easing adicionales:
- Cambiar el easing de varios intervalos al mismo tiempo.
- Especificar easings personalizados.
- Guardar un easing personalizado como preajuste nuevo para volver a usarlo fácilmente en otros intervalos.
Para cambiar el easing en el modo Avanzado:
-
Haga clic con el botón derecho en el intervalo con animación cuyo easing quiera modificar. Para seleccionar y editar varios easings contiguos al mismo tiempo, pulse Mayús y haga clic en ellos. Para seleccionar y editar varios easings no contiguos al mismo tiempo, pulse Control (en Windows) o Comando (en Mac) y haga clic en ellos. A continuación, haga clic con el botón derecho en uno de los intervalos seleccionados. Solo se modificarán los intervalos que tengan animación.
- En el menú emergente, seleccione uno de los preajustes o seleccione Opciones de easing... para ver las curvas de easing o especificar un easing personalizado.
Para crear un easing personalizado:
- Haga clic con el botón derecho en un intervalo y seleccione Opciones de easing... para abrir el cuadro de diálogo Easing.
- Modifique el easing siguiendo uno de estos métodos:
- Arrastre el control de curvatura para ajustar la forma de la curva del easing. El ángulo del control de curvatura determina la inclinación de la curva, y la longitud determina la intensidad de la aceleración o desaceleración.
- En el campo Cúbica de Bézier, introduzca la notación de función
cubic-bezier()
de la curva Bézier que quiere aplicar. Si el valor que especifica no es válido, el campo se subrayará en rojo.
- Si lo desea, puede guardar este easing como un preajuste. Para ello, haga clic en Guardar como nuevo preajuste.
- Haga clic en Aplicar para utilizar este easing personalizado en los intervalos seleccionados.
Preajustes de easing personalizados
- Son de acceso rápido. Los preajustes de easings aparecen como opciones en el menú emergente que se muestra al hacer clic con el botón derecho en un intervalo.
- Pueden identificarse fácilmente. Los nombres de los preajustes aparecen en la cronología del modo avanzado.