Acerca del easing

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.

Si modifica easings en el modo Avanzado, es posible que aparezca el valor "Mixed" como tipo de easing cuando cambie al modo Rápido.

Para cambiar el easing en el modo Rápido:

  1. Haga clic en el botón Opciones de fotograma clave , situado entre las miniaturas.
  2. Se abre el editor de transiciones.
  3. 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:

Para cambiar el easing en el modo Avanzado:

  1. 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.

  2. 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:

  1. Haga clic con el botón derecho en un intervalo y seleccione Opciones de easing... para abrir el cuadro de diálogo Easing.
  2. 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.
  3. Si lo desea, puede guardar este easing como un preajuste. Para ello, haga clic en Guardar como nuevo preajuste.
  4. Haga clic en Aplicar para utilizar este easing personalizado en los intervalos seleccionados.

Preajustes de easing personalizados

Si quiere volver a usar un determinado easing personalizado en varios intervalos, guárdelo como un preajuste. Estas son las ventajas que ofrecen los preajustes:
  • 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.
Los preajustes personalizados se guardan en su instancia de Google Web Designer y se pueden utilizar en varios documentos. Si abre un documento que contiene el preajuste personalizado de otro usuario, en lugar del nombre del easing, se mostrará "personalizado". La curva del easing no se modificará.
Para guardar un preajuste personalizado nuevo, cree un easing personalizado en el cuadro de diálogo Opciones de easing. A continuación, haga clic en Guardar como nuevo preajuste para asignarle un nombre. Los nombres de los preajustes y de las curvas cúbicas de Bézier no deben repetirse. Si hay intervalos con el mismo valor personalizado, pasarán a mostrar el nombre del preajuste personalizado.
Para cambiar el nombre de un preajuste personalizado, haga doble clic en él o coloque el cursor sobre él en el cuadro de diálogo Opciones de easing y haga clic en el icono del lápiz que aparece junto al nombre del preajuste. Cambie el nombre y pulse Intro. Los intervalos que utilicen este preajuste ahora mostrarán el nuevo nombre.
Para eliminar un preajuste personalizado, coloque el cursor sobre él en el cuadro de diálogo Opciones de easing y haga clic en el icono de papelera que aparece junto al nombre del preajuste. Los intervalos que utilicen este preajuste no se modificarán. La única diferencia es que ahora se mostrarán como personalizados.
No es posible cambiar la curva de un preajuste. Deberá crear otro preajuste personalizado y aplicarlo a los intervalos que quiera modificar.

¿Te ha resultado útil esta información?

¿Cómo podemos mejorar esta página?
Búsqueda
Borrar búsqueda
Cerrar búsqueda
Aplicaciones de Google
Menú principal