Параметры CustomWiggle: wiggles и type

Библиотека GSAP предоставляет мощный инструмент для создания сложных анимаций с плавными и естественными движениями. Одним из таких инструментов является плагин CustomWiggle, позволяющий создавать “тряску”, колебания или хаотичные движения объектов с точным контролем параметров. Основными параметрами этого плагина являются wiggles и type, которые определяют характер и интенсивность анимации.

Параметр wiggles

Описание: wiggles задаёт количество колебаний, которые объект совершит в течение всей анимации. Значение может быть целым числом больше нуля. Чем больше число, тем более интенсивными и частыми будут движения.

Принципы работы:

  1. wiggles определяет количество точек изменения значения свойства в течение анимации.
  2. Каждое “колебание” соответствует переходу от одного значения к другому с определённой амплитудой, создавая эффект тряски.
  3. Параметр не задаёт длительность анимации напрямую, а лишь распределяет колебания по её длине.

Пример использования:

gsap.to(".box", {
  duration: 2,
  x: 100,
  ease: "customWiggle",
  wiggles: 5
});

В этом примере объект .box совершит 5 колебаний по оси x в течение 2 секунд, плавно перемещаясь от исходного положения к 100px.

Особенности:

  • Малые значения (1–3) создают медленные, едва заметные движения.
  • Средние значения (5–10) подходят для стандартной анимации “дрожания” или “взбалтывания”.
  • Большие значения (>15) создают интенсивный хаотичный эффект, который может выглядеть как вибрация или тряска.

Параметр type

Описание: type определяет форму колебаний, то есть как именно объект будет перемещаться между точками. Плагин CustomWiggle поддерживает несколько типов кривых для создания различных динамических эффектов.

Возможные значения:

  1. "uniform" — равномерные колебания, все волны одинаковой амплитуды. Эффект подходит для строгих, предсказуемых анимаций.
  2. "soft" — колебания плавные, с постепенным увеличением и уменьшением амплитуды. Эффект создаёт мягкое, органичное движение.
  3. "rough" — хаотические колебания с непредсказуемой амплитудой. Подходит для имитации тряски, вибрации или шумного движения.
  4. Функции кастомизации — вместо строки можно передать функцию, которая получает индекс колебания и возвращает значение амплитуды. Позволяет создавать уникальные, нелинейные эффекты движения.

Пример использования:

gsap.to(".box", {
  duration: 2,
  x: 100,
  ease: "customWiggle",
  wiggles: 6,
  type: "soft"
});

Объект будет перемещаться с 6 плавными колебаниями, создавая эффект мягкого покачивания.

Использование функции для type:

gsap.to(".box", {
  duration: 3,
  y: 50,
  ease: "customWiggle",
  wiggles: 8,
  type: (index) => Math.sin(index) * 20
});

Функция позволяет динамически менять амплитуду каждого колебания, создавая уникальный паттерн движения.

Взаимодействие параметров wiggles и type

  • Количество колебаний (wiggles) напрямую влияет на характер движения, но их восприятие определяется типом (type).
  • Тип колебаний (type) меняет визуальное ощущение даже при одинаковом числе wiggles. Например, 10 колебаний с "soft" будут выглядеть плавно, а с "rough" — хаотично.
  • Оптимальный результат достигается подбором комбинации: высокое количество колебаний с мягким типом создаёт органичное дрожание, а небольшое количество с "rough" — резкий вибрирующий эффект.

Практические советы

  1. Для интерфейсных анимаций лучше использовать wiggles в диапазоне 3–7 и тип "soft", чтобы движение выглядело естественно.
  2. Для имитации физической тряски или вибрации механизма подходят "rough" с wiggles 10–20.
  3. При создании уникальных эффектов допустимо комбинировать функции для type с разными значениями wiggles, чтобы каждая колебательная точка имела собственную амплитуду и форму движения.

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

Оглавление