Краткий обзор анимации с помощью CSS, Javascript и After Effects.

Прежде чем погрузиться в разработку программного обеспечения, я потратил время на изучение моушн-дизайна как области. Удивительно, но между двумя отраслями есть несколько вещей, и одна из них — ключевые кадры анимации.

Если вы работали в индустрии анимации или кинопроизводства, скорее всего, вы уже слышали термин «ключевой кадр». Ключевые кадры важны для создания плавных переходов — они определяют начальную и конечную точки. Учитывая установленный период времени между началом и концом, вы сможете создать плавный переход. Если вы когда-либо создавали новое веб-приложение с помощью командной строки create-react-app, скорее всего, вы также сталкивались с термином «ключевые кадры», хотя и выбрасывали все в App.css.

Чего ждать?

Помните, когда вы перешли в корневой каталог своего проекта, запустили
npm run start, ваш браузер волшебным образом загрузил localhost:3000, и на странице появился вращающийся логотип React? Ну, это часть того, что помогло создать эту анимацию. Я считаю, что это отличный пример для понимания того, как работает анимация, поэтому давайте разберем его по частям.

В нашем index.js есть такая строка:

<img src={logo} className=”App-logo” alt=”logo” />

Связанное имя класса относится к нашему css, где мы добавили ограничение по высоте.

В нашем файле App.css у нас есть несколько строк, на которые стоит обратить внимание:

.App-logo {
  height: 40vmin;
  animation: App-logo-spin infinite 20s linear;
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.App-logo — это имя класса, связанное с нашим изображением. Мы задали ограничение по высоте, но следующая строка может быть не такой знакомой.

animation: App-logo-spin infinite 20s linear;

Здесь мы привязываем анимацию App-logo-spin к определенному классу App-logo. Анимация свойства на самом деле является сокращенным правилом, которое можно разбить на несколько отдельных свойств анимации, а точнее на четыре.

/*specifies the name of the animation that you want to bind to the element */
animation-name: App-logo-spin;
/* specifies how many times an animation should run */
animation-iteration-count: infinite;
/* defines how long an animation should take to complete */
animation-duration: 20s;
/* specifies speed curve of the animation */
animation-timing-function: linear; 

На самом деле есть два дополнительных свойства, которые можно включить в сокращение:

/* specifies a delay for the start of an animation */
animation-delay: 0s;
/* specifies the direction of the animation. */
animation-direction: normal;

Итак, теперь мы подошли к фактическим ключевым кадрам, которые описывают анимацию.

/* declares an animation called App-logo-spin */
@keyframes App-logo-spin {
  /* define the start */
  from {
    /* starting animation style properties go here*/
    transform: rotate(0deg);
  }
}
  /* define the end */
  to {
    /* ending animation style properties go here */
    transform: rotate(360deg);
  }
}

Если вам не нравятся термины from/to, вы также можете представить анимацию с точки зрения продолжительности прогресса и вместо этого заменить ее процентами, записанными следующим образом:

@keyframes App-logo-spin {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

Где 0% определяет начало, а 100% определяет конец. Кроме того, вы также можете определить любые промежуточные проценты (например, 20%, 25%, 50% и т. д.) и свойства, которые вы хотите связать с анимацией во время ее выполнения.

И это основы анимации ключевых кадров CSS:создайте элемент, определите начальные и конечные ключевые кадры, добавьте некоторые свойства, которые вы хотите видеть в начале и в конце, и привяжите их к элементу, чтобы он всплывал. в вашем веб-приложении.

… А еще есть альтернатива Javascript:

document.getElementByClassName("App-Logo")[0].animate([
  // keyframes
  { transform: 'rotate(0deg)' },
  { transform: 'rotate(360deg)' }
], {
  // timing options
  duration: 20s,
  iterations: Infinity
});

Итак… подождите, а при чем здесь After Effects?

Если вы не знакомы с After Effects, это программное обеспечение для анимации, являющееся частью Adobe Creative Cloud, используемое многими художниками и профессионалами в области постпродакшна для создания фильмов, анимационной графики. и композиции 2,5/3D.

Навигация в After Effects для создания простой анимации может показаться довольно пугающей: для перемещения по графическому пользовательскому интерфейсу требуются слои, ключевые кадры, эффекты и средства визуализации. Я сомневаюсь, что большинство людей когда-либо будут заниматься After Effects в качестве хобби, но если вы когда-нибудь задумывались об этом и имели опыт программирования, вы были бы рады узнать, что в After Effects есть кое-что интересное:

Чего ждать?

В качестве очень краткого обзора выражения в After Effects — это код, который вы можете подключить к своей композиции, который вычисляет одно значение для одного свойства слоя в определенный момент времени. Интересная часть? Они написаны на Javascript! Выражения — это, по сути, функции дизайна, которые помогают художникам создавать желаемые эффекты для свойств. Есть несколько встроенных, таких как wiggle(frequency, amplitude), который рандомизирует значение свойства в зависимости от частоты, но вы, кто-то со знанием Javascript и некоторым творческим потенциалом, можете написать свое собственное.

Возможность создавать ключевые кадры и работать с ними имеет основополагающее значение для создания красивых анимаций. У CSS плохая репутация, но, типа… сейчас CSS крут?