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

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

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

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

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

See the Pen hatEx by yoksel (@yoksel) on CodePen.

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

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.

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

See the Pen CbDFK by yoksel (@yoksel) on CodePen.

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

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

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

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

See the Pen Simple animated mask in SVG by yoksel (@yoksel) on CodePen.

И под углом:

See the Pen Simple animated mask in SVG by yoksel (@yoksel) on CodePen.

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

Клеточки:

See the Pen Simple animated mask in SVG by yoksel (@yoksel) on CodePen.

Ромбики:

See the Pen Simple animated mask in SVG by yoksel (@yoksel) on CodePen.

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

See the Pen Simple animated mask in SVG (shutter) by yoksel (@yoksel) on CodePen.

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

See the Pen Simple animated mask in SVG (wavy shutter) by yoksel (@yoksel) on CodePen.

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

See the Pen Simple animated mask in SVG (wavy shutter) by yoksel (@yoksel) on CodePen.

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

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

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