Масштабирование

В библиотеке anime.js масштабирование объектов осуществляется через свойство scale. Оно позволяет изменять размер HTML-элементов, SVG или Canvas-графики по осям X и Y, создавая эффект увеличения или уменьшения без изменения исходной структуры DOM.

Основной синтаксис

Для базового масштабирования используется объект анимации:

anime({
  targets: '.box',
  scale: 1.5,
  duration: 1000,
  easing: 'easeInOutQuad'
});

Пояснения:

  • targets – элемент или набор элементов, к которым применяется анимация. Может быть селектором, массивом элементов или объектом DOM.
  • scale – величина масштабирования. 1 означает исходный размер, 1.5 — увеличение на 50%, 0.5 — уменьшение до половины.
  • duration – продолжительность анимации в миллисекундах.
  • easing – функция сглаживания перехода, определяющая характер ускорения и замедления анимации.

Масштабирование по осям

Для независимого управления горизонтальным и вертикальным масштабом используются свойства scaleX и scaleY:

anime({
  targets: '.box',
  scaleX: 2,
  scaleY: 0.5,
  duration: 1200,
  easing: 'easeOutElastic(1, .8)'
});

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

  • scaleX — масштаб по горизонтали.
  • scaleY — масштаб по вертикали.
  • Если указать только scale, значения scaleX и scaleY синхронизируются автоматически.

Анимация от и до

Для создания эффекта изменения масштаба с конкретного начального значения используется объект keyframes или свойства value:

anime({
  targets: '.box',
  scale: [
    { value: 0.5, duration: 500 },
    { value: 1.5, duration: 700 },
    { value: 1, duration: 300 }
  ],
  easing: 'easeInOutSine'
});

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

  • Каждое ключевое состояние (value) задает промежуточный масштаб.
  • duration внутри массива определяет продолжительность каждой фазы анимации.
  • Использование keyframes позволяет создавать сложные последовательные трансформации.

Масштабирование с цикличностью

Для повторяющейся анимации применяется свойство loop и direction:

anime({
  targets: '.box',
  scale: 1.5,
  direction: 'alternate',
  loop: true,
  duration: 800,
  easing: 'easeInOutQuad'
});
  • direction: 'alternate' — объект возвращается к исходному масштабу после завершения цикла.
  • loop: true — бесконечное повторение анимации. Можно также задать число повторов (loop: 3).

Масштабирование с задержкой и последовательностью

Свойства delay и stagger позволяют создавать цепочки анимаций для нескольких элементов:

anime({
  targets: '.box',
  scale: 1.5,
  delay: anime.stagger(200),
  duration: 600,
  easing: 'easeOutElastic(1, .6)'
});
  • anime.stagger(200) — задержка между запуском анимации у разных элементов.
  • Позволяет создавать волнообразный эффект увеличения или уменьшения объектов.

Масштабирование вместе с другими трансформациями

Anime.js поддерживает одновременное комбинирование scale с translate, rotate и opacity:

anime({
  targets: '.box',
  scale: 1.3,
  rotate: '1turn',
  translateX: 250,
  opacity: 0.5,
  duration: 1200,
  easing: 'easeInOutCubic'
});
  • Анимация выполняется синхронно по всем указанным свойствам.
  • Позволяет создавать комплексные эффекты, например увеличение с вращением и перемещением.

Масштабирование SVG-элементов

Для SVG-объектов свойства scale, scaleX и scaleY работают аналогично, но важно учитывать атрибут transform-origin для контроля точки масштабирования:

anime({
  targets: 'svg circle',
  scale: 2,
  transformOrigin: '50% 50%',
  duration: 800,
  easing: 'easeInOutQuad'
});
  • transformOrigin — определяет центр масштабирования относительно элемента (center, top left, или в процентах).

Динамическое масштабирование с функциями

Значение свойства scale может быть функцией, возвращающей разные величины для каждого элемента:

anime({
  targets: '.box',
  scale: function(el, i) {
    return 1 + i * 0.2;
  },
  duration: 1000,
  easing: 'easeInOutQuad'
});
  • el — текущий элемент.
  • i — индекс элемента в наборе.
  • Позволяет создавать постепенное увеличение объектов по порядку.

Итоговые советы

  • Использовать scale для симметричного изменения размера, scaleX и scaleY для асимметричного.
  • Совмещать с keyframes для сложных последовательных анимаций.
  • Для SVG и Canvas важно правильно задавать transformOrigin.
  • Стратегически применять loop, direction и stagger для создания динамичных визуальных эффектов.

Масштабирование в anime.js является мощным инструментом, позволяющим создавать как простые, так и сложные анимации изменения размеров объектов, с высокой гибкостью настройки и управлением синхронизацией элементов.

Оглавление