Эта статья была спонсирована Tumult . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
Анимация может быть примерно определена как показ последовательных изображений или кадров, чтобы создать иллюзию плавных изменений. Вместо того чтобы создавать каждый кадр вручную, современные инструменты веб-анимации, такие как Tumult Hype, позволяют аниматору создавать ключевые кадры (обычно точки начала и конца), и компьютер динамически заполняет все промежуточные кадры . То, как компьютер решит сгенерировать эти кадры, может повлиять на внимание и эмоциональную связь зрителя. В этой статье рассматривается критическая часть сгенерированных анимаций, функция синхронизации и как наилучшим образом использовать расширенный редактор функций синхронизации Tumult Hype для ваших анимаций.
Прежде чем читать, первым делом загрузите Tumult Hype . Пробная версия полностью функциональна в течение 14 дней. Tumult Hype имеет два режима вкуса: стандартный и профессиональный. Для создания пользовательских функций синхронизации (и следования этой статье!) Вы захотите использовать Hype Professional.
Линейные и замедляющие функции синхронизации
Допустим, вы хотите анимировать окно, перемещающееся по экрану. В течение двух секунд он будет перемещаться на 300 пикселей влево. При создании анимации, компьютер должен определить положение окна во времени, и это роль функции синхронизации. Самым основным из них является линейная интерполяция , которая равномерно делит расстояние на количество кадров. Таким образом, при анимации 30 кадров в секунду каждый шаг будет перемещаться на 5 пикселей, так как 300px / (2s * 30fps) = 5px. Это успешно создает анимацию:
Чтобы быть субъективным, эта анимация мягкая! Он движется без какой-либо естественной физики или веса. Глаза зрителя должны догнать скорость, с которой движется бокс, и затем, вероятно, перескочат в их взгляд, когда анимация внезапно заканчивается. Наиболее распространенным решением является применение базового ускорения и замедления к коробке. Эта функция синхронизации называется Ease In Out :
Это выглядит лучше и является наиболее распространенным выбором для анимации. Это функция синхронизации по умолчанию в Tumult Hype и большинстве других инструментов анимации по уважительной причине.
Представление функций синхронизации
Чтобы быть более точным, функция синхронизации вводит значение времени (x) и выводит значение анимированного свойства (y). Возвращаясь к алгебре средней школы, функции стиля f(x) = y — это форма, которую можно представить на двумерном графике. Базовая функция линейного хронирования выглядит так, как можно было бы ожидать, строка:
Ease In Out — это плавная кривая, которая показывает, как она будет начинаться и заканчиваться на более медленных скоростях:
Эта временная функция создается с помощью математики кубической кривой Безье . Изменяя контрольные точки, влияющие на кривизну, можно добиться разного ускорения и замедления:
Значения свойств могут даже опускаться ниже минимального значения или выше максимального значения, создавая функции времени ожидания и превышения:
Tumult Hype предлагает еще больше возможностей: несколько кривых Безье можно объединить, чтобы сформировать много кривые пути. Они могут использоваться для различных эффектов, таких как подпрыгивание или эластичность:
Общая причина сосредоточения внимания на функциях синхронизации в вашей анимации
Природа не движется механически, как линейная функция синхронизации выше. Поэтому такие временные функции, как смягчение, играют важную роль в гуманизации элементов, которые вы оживляете. Это помогает представлять информацию чисто и четко. Направляет фокус.
Хорошее время помогает придать смысл анимации. Превращает безжизненные формы в реальность. Некоторые могут помочь передать эмоции, которые имеют решающее значение для брендинга. Другие моменты могут развлекать и привлекать.
Движение «неодушевленных» объектов больше регулируется физикой. «Одушевленные» объекты управляются своими мыслями и эмоциями. Оба стиля могут быть смоделированы с помощью функций синхронизации.
Применение функций синхронизации в Tumult Hype
Редактировать функцию синхронизации анимации в Tumult Hype очень просто. Шаг ноль — создание анимации, поэтому, если вы незнакомы, ознакомьтесь с руководствами и документацией .
Чтобы настроить функцию синхронизации одной анимации, вы можете дважды щелкнуть панель индикатора анимации между ключевыми кадрами в области для каждого свойства:
Если выбрано несколько анимаций, вы можете использовать всплывающую кнопку «Функция синхронизации» в правой части интерфейса временной шкалы:
Если анимации не выбраны, функция синхронизации по умолчанию отображается в качестве заголовка всплывающей кнопки функции синхронизации.
В Hype Professional этот интерфейс позволяет манипулировать контрольными точками и добавлять новые точки на кривой для формирования собственных пользовательских функций синхронизации. Функции синхронизации могут быть названы так, чтобы они сохранялись для будущего использования в документе Hype. Они также могут быть установлены в качестве временной функции по умолчанию для любых новых анимаций:
Этот редактор похож на другие приложения для редактирования векторов. Вот шпаргалка для управления контрольными точками:
- Нажмите на кривую: добавить новую точку
- Удалить ключ: удалить контрольную точку
- Option-Click: конвертировать в угловую вершину
- Option-Drag: перетаскивать новые контрольные точки
- Опция (при перетаскивании контрольной точки): зеркальная
- Команда (при перетаскивании контрольной точки): отключена
- нет (просто перетаскивая контрольную точку): асимметричный
- Сдвиг (при перетаскивании контрольной точки): удерживайте под углом 45 °
Практические советы по использованию функций синхронизации
- Создание и выбор временных функций — это навык, опыт сделает его лучше.
- Пусть ваша анимация «отдохнет», пройдя несколько дней, не глядя на нее, и посмотрите, понравится ли она вам, когда вы вернетесь. Или получить отзыв от сверстников.
- Циклическая анимация должна обычно использовать линейную функцию синхронизации. Основанные на простоте функции синхронизации могут создать точку остановки или скачок в начале цикла цикла.
- Избегайте значительного ускорения (медленного ускорения) с анимациями, которые запускаются действиями пользователя, так как это будет ощущаться вялым.
- Overshoot (Назад) и Предвидение (Reverse Back) могут быть эффектами, которые могут выглядеть великолепно, но часто это идет вразрез с целью анимации, помогающей зрителю связать действия. Кроме того, они могут тратить время пользователя, так как они занимают больше времени. Используйте экономно.
- Может быть полезно поэкспериментировать с использованием одинаковых длительностей анимации и разных функций синхронизации для большей визуальной интриги или для выражения различного веса / инерции. Тем не менее, если вы не анимируете от естественных моделей или персонажей, лучше не переусердствовать со слишком многими различными функциями синхронизации. Не забудьте также поэкспериментировать с ошеломляющим временем запуска анимации или немного изменить продолжительность.
- Точно так же, как у визуалов часто есть спецификации, управляющие весом линий и цветовой палитрой, хорошо бы придумать язык дизайна для анимации, включая используемые длительности и функции синхронизации, а также обоснование того, какие обстоятельства выбрать, какую функцию синхронизации.
- Наблюдайте за природой и понимайте математику гравитации / физики, так как это может помочь в создании анимации. Например, чтобы создать подпрыгивающий объект, значение Y должно использовать функцию синхронизации Bounce. Значение X должно иметь линейную функцию синхронизации, потому что на эту ось не действуют силы. Даже если это хорошо понимают, иногда проще использовать физический движок .
- Получите вдохновение от природы или от ведущих аниматоров:
- Время для анимации Джона Халаса и Гарольда Уитакера
- Комплект выживания аниматора от Ричарда Уильямса
Вывод
Управление временными функциями является продвинутым шагом в создании значимой анимации. Они могут помочь моделировать физику, эмоции или просто уменьшить конструкцию ключевых кадров. Пользовательский редактор функций синхронизации Tumult Hype дает мощь и гибкость, помогая создавать ваши лучшие анимации.
Если вы хотите попробовать Hype, прямо сейчас, как пользователь SitePoint, вы можете получить Hype Standard со скидкой 50% за 24,99 долларов США.
Или, если вам нужна версия со всеми прибамбасами, мы также предлагаем скидку 25% на Hype Professional по цене $ 74,99.