¿Usar CSS cubic-bezier para fotogramas clave en After Effects?

Algo así como. El modelo de animación es un poco diferente, lo que significa que tiene varias formas de atacar el problema. Por lo general, no es una buena idea pensar: "Oye, sé CSS. Lo abordaré de la misma manera". Esto te hace extremadamente ineficiente a largo plazo.

El primer enfoque es simplemente usar el editor de gráficos, establecer el modo en los controladores de valor y luego arrastrar los controladores. Solo que esto realmente no funciona bien para la animación posicional (excepto en los casos en los que se mueve ortogonalmente), ya que necesitaría ajustar 3 controladores y asegurarse de hacerlo de la misma manera en diferentes escalas no funciona demasiado bien. En segundo lugar, no puede ir más allá de sus valores de fotogramas clave como lo permite CSS.

La segunda opción es precomponer su animación y teclear el cuadro de origen de los efectos de distorsión de tiempo. De nuevo, no puedes ir más allá de los valores.

La tercera opción es escribir su propio interpolador.

Hay un complemento llamado FLOW en los scripts AE, puede copiar su cubic-bezier y ponerlo allí.

https://aescripts.com/flow/

Me tomé un tiempo para aprender sobre las curvas cúbicas-bezier y cómo leerlas porque noté que muchos sistemas de diseño de marca incluyen valores de curvas cúbicas-bezier y valores de velocidad de After Effects en su sección de especificaciones de diseño de movimiento. Tenía muchas ganas de entender la relación entre los dos y aprender a traducir los valores cúbicos-bezier a valores AE. Esto es lo que aprendí hasta ahora.

Las coordenadas x1 y x2 (horizontal) se traducen en los valores de influencia de la velocidad de After Effects. Las coordenadas y1 e y2 (verticales) se traducen en valores de píxeles/segundo (velocidad). Es fácil notar el patrón de valores de velocidad una vez que entiendes cómo traducirlo.

Entonces, para su ejemplo, cubic-bezier (0.65, 0, 0.35, 1) se traduce en:

• x1: 0,65 = Valor de influencia del 65 % de la velocidad de salida
• x2: 0,35 = Valor de influencia del 65 % de la velocidad de entrada

Ahora no entiendo muy bien cómo funciona el parámetro "píxeles/segundo", así que lo dejaré para que alguien más se sumerja y lo explique, ya que también necesito ayuda para entenderlo. Pero esencialmente, el eje X se lee de izquierda a derecha, comenzando en 0 y terminando en 1, los controladores salientes se arrastran desde la izquierda y los controladores entrantes se arrastran desde la derecha. espero que esto ayude

Use Animation Composer 3 para el efecto posterior. Tiene todos los ajustes preestablecidos de curvas:

https://misterhorse.com/compositor-de-animaciones

Sí, puede, tomará un poco más de trabajo agregarlo a los fotogramas clave, pero se vería así:

@keyframes ae-to-css {
  0% {
    animation-timing-function:ease-out;
  }
  23% {
    animation-timing-function:ease-in;
  }
  50% {
    animation-timing-function:cubic-bezier(.5,0,.5,1.5);
  }
  76% {
    animation-timing-function:cubic-bezier(0,0,0,1);
  }
  100% {
  }
} 

Aquí hay un buen artículo para leer sobre cómo hacer la transición de CSS a AfterEffects.