Клиппинг и маски

В anime.js анимация клиппинга и масок осуществляется через манипуляцию свойств CSS и SVG. Для эффективного использования этих техник важно понимать разницу между CSS-клиппингом и SVG-масками и особенности их применения в анимации.

CSS-клиппинг

CSS-клиппинг позволяет ограничивать видимую область элемента с помощью свойств clip или clip-path. Наиболее современный и гибкий способ — использование clip-path.

Пример базового клиппинга через clip-path:

anime({
  targets: '.box',
  clipPath: ['circle(0% at 50% 50%)', 'circle(50% at 50% 50%)'],
  easing: 'easeOutQuad',
  duration: 1500
});

Разбор ключевых моментов:

  • targets — элементы, к которым применяется анимация.
  • clipPath — задаёт начальное и конечное значения маски в виде формы (circle, ellipse, polygon).
  • Анимация плавно изменяет радиус круга от 0% до 50%, создавая эффект появления.

Особенности использования CSS-клиппинга:

  • Можно анимировать не только circle, но и ellipse, polygon, inset.
  • Поддерживаются ключевые CSS-функции для сложных форм.
  • Для плавной анимации необходимо указывать стартовое и конечное состояние формы в одинаковом формате.

Анимация масок в SVG

SVG-маски позволяют создавать более сложные визуальные эффекты, так как поддерживают прозрачность и градиенты. Маска задаётся с помощью элемента и свойства mask на целевом элементе.

Пример использования SVG-маски с anime.js:


  
    
      
      
    
  
  

anime({
  targets: 'circle',
  r: 100,
  easing: 'easeOutCubic',
  duration: 2000
});

Разбор:

  • Белый цвет в маске делает часть элемента видимой, черный — скрытой.
  • Анимация радиуса круга изменяет видимую область красного квадрата.
  • Можно комбинировать с translate, scale, rotate для сложных эффектов.

Анимация сложных форм

Для сложных форм, таких как многоугольники или пути SVG, anime.js позволяет анимировать атрибут d у или координаты точек в polygon.

Пример анимации полигона через CSS:

anime({
  targets: '.polygon',
  clipPath: ['polygon(50% 0%, 100% 100%, 0% 100%)', 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)'],
  easing: 'easeInOutSine',
  duration: 1800
});
  • Изменение координат вершин создаёт эффект трансформации формы.
  • Поддержка плавной анимации возможна только если количество точек совпадает между начальной и конечной формой.

Управление анимацией клиппинга и масок

Пошаговое управление:

  • begin — функция вызывается в начале анимации.
  • update — позволяет модифицировать значения в процессе анимации.
  • complete — выполняется после окончания.
anime({
  targets: '.box',
  clipPath: ['circle(0% at 50% 50%)', 'circle(40% at 50% 50%)'],
  duration: 2000,
  easing: 'easeOutExpo',
  update: function(anim) {
    console.log(anim.progress + '%');
  }
});

Преимущества такого подхода:

  • Возможность синхронизации анимации с другими эффектами.
  • Контроль над прогрессом позволяет создавать интерактивные или отзывчивые анимации.

Комбинирование с другими свойствами

Анимации клиппинга и масок можно комбинировать с:

  • opacity для плавного появления.
  • transform (scale, translate, rotate) для динамического эффекта движения.
  • stroke-dasharray и stroke-dashoffset для эффекта прорисовки линий через маску.
anime({
  targets: '.circle-mask',
  r: [0, 80],
  opacity: [0, 1],
  easing: 'easeOutQuad',
  duration: 1500
});

Такой подход позволяет создавать сложные и визуально выразительные переходы элементов на странице.

Оглавление