Использовать кубический безье CSS для ключевых кадров в After Effects?

Вроде, как бы, что-то вроде. Модель анимации немного отличается, поэтому у вас есть несколько способов решения проблемы. Как правило, не стоит думать: «Эй, я знаю CSS. Я подойду к этому так же». Это делает вас крайне неэффективным в долгосрочной перспективе.

Первый подход заключается в том, чтобы просто использовать редактор графиков, установить режим на маркеры значений, а затем перетащить маркеры. Только это не очень хорошо работает для позиционной анимации (за исключением случаев, когда вы двигаетесь ортогонально), так как вам нужно настроить 3 ручки, и обеспечение того, чтобы вы делали это одинаково в разных масштабах, не слишком хорошо работает. Во-вторых, вы не можете выйти за пределы ваших значений ключевых кадров, как это позволяет вам CSS.

Второй вариант — предварительно скомпоновать анимацию и ввести исходный кадр эффектов временной деформации. Опять же, вы не можете выйти за рамки ценностей.

Третий вариант — написать собственный интерполятор.

В AE scripts есть плагин под названием FLOW, вы можете скопировать свой куб-безье и поставить его туда.

https://aescripts.com/flow/

Я потратил некоторое время, чтобы узнать о кубических кривых Безье и о том, как их читать, потому что я заметил, что многие системы дизайна брендов включают значения кривых кубического Безье и значения скорости After Effects в свой раздел спецификаций дизайна движения. Я действительно хотел понять взаимосвязь между ними и научиться преобразовывать кубические значения Безье в значения AE. Вот что я узнал до сих пор.

Координаты x1 и x2 (горизонтальные) преобразуются в значения влияния скорости After Effects. Координаты y1 и y2 (вертикальные) преобразуются в значения пикселей в секунду (скорость). Легко заметить шаблон значений скорости, как только вы поймете, как его перевести.

Итак, для вашего примера кубический безье (0,65, 0, 0,35, 1) переводится как:

• x1: 0,65 = Исходящая скорость 65% влияет на значение
• x2: 0,35 = Входящая скорость 65% влияет на значение

Теперь я не совсем понимаю, как работает параметр «пикселей в секунду», поэтому я оставлю это для кого-то другого, чтобы он погрузился и объяснил, поскольку мне также нужна помощь в понимании этого. Но по существу ось X читается слева направо, начиная с 0 и заканчивая 1, исходящие дескрипторы перетаскиваются слева, а входящие дескрипторы перетаскиваются справа. надеюсь, это поможет

Используйте Animation Composer 3 для последующего эффекта. В нем есть все пресеты кривых:

https://misterhorse.com/анимация-композитор

Да, вы можете, потребуется немного больше работы, чтобы добавить его к ключевым кадрам, но это будет выглядеть примерно так:

@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% {
  }
} 

Вот хорошая статья о переходе с CSS на AfterEffects.