Анимированные SVG-маски

В прошлой статье я рассматривала странности SVG-обводки, а также возможность сделать анимированные маски.

Так как трансформации в масках не анимируются в Firefox (31-я версия на момент написания статьи), я продолжила эксперименты с обводками.

В посте много демо с анимацией, страница может подтормаживать на слабых устройствах.

Обводками можно в какой-то степени имитировать трансформации в масках, и, таким образом, получить много разных интересных эффектов.

Пример простой маски:

Как она устроена?

SVG:

<mask id="m-lines">
  <line x1="0" y1="0" x2="100%" y2="100%" class="elem-mask"/>
  <line x1="0" y1="100%" x2="100%" y2="0%" class="elem-mask"/>
</mask>

Внутри две линии. Я не использовала path, потому что ему нельзя задать координаты в процентах.

CSS для линий:

$mask-time: 7s;

.elem-mask {
  stroke: #FFF;
  stroke-width: 0;
  animation: stroke-width $mask-time infinite;
}

@keyframes stroke-width {
  50% {
      stroke-width: 300;
  }
}

В исходном состоянии линии не видны, потому что stroke-width: 0. Для того, чтобы обводки в процессе анимации служили видимой областью маски, им задан белый цвет stroke: #FFF. Также задана анимация, которая увеличивает толщину рамки до 300.

Если вытащить маску наружу, она будет выглядеть вот так:

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

Маска применяется к фигуре с помощью атрибута mask="url(#m-line)" или через CSS: mask: url(#m-line);

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

Простое разворачивание из центра:

И под углом:

Использование паттернов позволяет делать узорные маски.

Клеточки:

Ромбики:

Паттерны позволяют добиться интересного результата минимумом фигур, но ещё интереснее можно сделать, если задать несколько фигур внутри маски и анимировать их по отдельности.

При этом пути в маске вовсе не обязательно должны быть прямыми линиями:

Да и вообще, необязательно это должны быть линии:

Помимо преимуществ, анимированные SVG-маски имеют некоторые проблемы. Связаны они не столько с масками, сколько с анимацией. Во-первых, анимации SVG-элементов не поддерживаются в IE. Вторая проблема — производительность. Насколько мне известно, на данный момент анимации SVG-элементов не оптимизируются браузерами, поэтому имеет смысл анимированный SVG применять умеренно и аккуратно.

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

Паттерны отсюда.

Ссылки по теме:
Css Animation
CSS и SVG маски
Странности обводки в SVG
SVG: полезные ссылки
Странности обводки в SVGCSS-анимации для ротации изображений
Наверх