Иногда наличие физического движка может быть серьезным излишеством для вашего проекта, и вы можете гораздо проще создавать простые анимации, используя анимацию движения. Или у вас могут быть элементы, не связанные с физическим движком, и ими будет проще управлять с помощью твинов.
Анимация или переход между ними — это процесс создания промежуточных кадров между двумя статическими кадрами (начальным и конечным), часто называемых ключевыми кадрами.
Твины в компьютерной графике создаются путем интерполяции различных свойств от начального значения до конечного значения. Некоторыми примерами наиболее часто используемых свойств анимации являются положение (координаты x, y), масштаб, вращение и т. д.
Ослабление — это тип интерполяции, который используется для любого заданного перехода, также известного как синхронизация анимации. Самый популярный тип замедления — линейная интерполяция — это означает, что сгенерированные значения между началом и концом равномерно распределяются по кадрам. Например, если бы мы интерполировали между 1 и 10 в интервале из 10 кадров, результатом было бы [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].
Но есть и другие типы замедления (интерполяции), такие как замедление, ослабление, замедление и многие другие. В таких смягчениях значения распределяются по кадрам неравномерно, что добавляет динамику движению/анимации.
- Линейный
- Упрощение
- Упрощение
- EaseInOut
Почему мы используем подростков?
Как упоминалось ранее, анимация обеспечивает гораздо более простой способ достижения сложных движений и последовательностей анимаций с гораздо меньшим количеством кода по сравнению с использованием физического движка. Другой способ анимации — использовать покадровые таблицы спрайтов, но представьте, что вам нужно отрисовывать каждый кадр каждого движения персонажа для нескольких персонажей. 😵 Итак, сегодня мы рассмотрим GSAP — библиотеку анимации JavaScript, которая может создавать удивительные и сложные анимации с небольшим количеством кода.
Что можно анимировать с помощью GSAP?
Все! Воспринимайте это самым буквальным образом. Любой объект JavaScript можно передать в анимацию GSAP, и она анимирует для вас все указанные числовые свойства. Для анимации изображений в основном мы используем анимацию положения, масштаба, поворота и непрозрачности. Но есть и другие применения, например, изменяя значение текстового поля с 10 до 0, мы получаем эффект обратного отсчета, похожий на те, что вы видите в старых фильмах.
Давайте создадим несколько рабочих примеров
Начиная с основ, код для перемещения изображения по экрану выглядит так:
Создание последовательности временной шкалы
Давайте создадим анимацию нашей ракеты, которая взлетает и улетает вдаль. Мы создадим последовательность твинов, также называемую временной шкалой. Временная шкала — это контейнер твинов, поэтому позже мы можем воспроизвести/обратить/масштабировать все их твины как единое целое.
Несколько подростков одновременно
В этом примере мы расширим нашу временную шкалу, комбинируя масштаб и положение анимации для достижения эффекта глубины, также называемого 2,5D-анимацией.
Бонусный контент — Твининг анимации 😲
Мы можем сделать анимацию движения или временную шкалу целью анимации, а затем анимировать ее прогресс или шкалу времени, точно так же, как масштаб изображения!
