Анимация масок реализуется за счет анимации элементов svg, входящих в состав маски. Составными частями маски могут быть любые базовые фигуры SVG: Line, circle, ellipse, polyline, polygon, rect, а также path любой формы.
Маска может работать в нескольких режимах
1. Обрезать всё, что находится вне зоны действия маски, то есть этот режим подобен действию clipPath
2. Вырезать, например в изображении отверстие в форме маски, показывая тем самым всё, что находится ниже изображения.
В примере ниже в состав маски входят прямоугольник и окружность. Изменяя радиус окружности, можно менять размер круглой маски, увеличивая или уменьшая размер круглого отверстия сквозь, которое становится видимым нижнее градиентные полосы.
|
1 2 3 4 5 6 7 8 9 |
<!-- Маска --> <mask id="msk1" > <rect width="100%" height="100%" fill="black" /> <circle cx="300" cy="300" r="0" fill="white" > <!-- Анимация маски прорезающей радиальный градиент и показывающей фоновое изображение --> <animate attributeName="r" begin="svg1.click" dur="8s" values="0;300;300;0;0" fill="freeze" repeatCount="3" /> </circle> </mask> |
See the Pen
Animation mask SVG with radial gradient by Alexandr_TT (@Alexandr_T)
on CodePen.
На первом слое расположены цветные градиентные полосы. Выше этого слоя расположено изображение.
|
1 2 |
<rect width="600" height="600" fill="url(#grad)" /> <image xlink:href="https://i.stack.imgur.com/fhtOM.jpg" y="-60" mask="url(#msk1)" width="800" height="780" /> |
Если бы к изображению не была бы применена маска mask=”url(#msk1)”, то было бы всегда видно только изображение, так как градиентные полосы расположены под изображением. Но к изображению применена маска, состоящая из двух прямоугольников, которые имеют fill=”black”, делая тем самым маску полностью прозрачной и показывая тем самым, нижний слой с градиентными полосами. При анимации раздвигания половинок маски, становится видно изображение.
See the Pen
Animation mask SVG with radial gradient by Alexandr_TT (@Alexandr_T)
on CodePen.
Используется два изображения девушки и рассерженного льва
|
1 2 3 4 5 6 7 |
<!-- Фоновое изображение льва, которое видно, через отверстие прорезанное маской --> <image id="img2" xlink:href="https://i.stack.imgur.com/T5UFF.jpg" opacity="1" x="-60" y="-40" width="160%" height="160%" > </image> <!-- К изображению девушки применена маска --> <image id="img1" xlink:href="https://i.stack.imgur.com/73YNh.jpg" width="100%" height="100%" pointer-events="fill" mask="url(#msk1)" /> |
Этот пример аналогичен второму примеру.
На нижнем слое фоновое изображение льва.
На верхнем слое изображение девушки, к которому применена маска.
|
1 2 3 4 |
<ellipse cx="300" cy="265" rx="0" ry="240" > <animate id="open" attributeName="rx" dur="3s" begin="idefinite" values="0;50;0;50;0;100;80;185" fill="freeze" /> <animate id="close" attributeName="rx" dur="3s" begin="idefinite" values="185;0" fill="freeze" /> </ellipse> |
Анимация маски достигается изменением rx эллипса.
Анимация раскрытия изображения льва начинается после клика, закрытие изображения после повторного клика
See the Pen
Mask’s animation SVG Through one image, another image becomes visible by Alexandr_TT (@Alexandr_T)
on CodePen.
Анимация прозрачности маски
Как и в третьем примере два изображения:
нижнее, в качестве фона льва
к верхнему изображению девушки применена маска в форме овала
|
1 2 3 4 5 6 7 |
<!-- Фоновое изображение льва, которое видно, через отверстие прорезанное маской --> <image id="img2" xlink:href="https://i.stack.imgur.com/T5UFF.jpg" opacity="1" x="-60" y="-40" width= "160%" height="160%" /> <!-- К изображению девушки применена маска --> <image id="img1" xlink:href="https://i.stack.imgur.com/73YNh.jpg" width="100%" height="100%" pointer-events="fill" mask="url(#msk1)" /> |
Анимация маски достигается за счет анимации прозрачности овала.
See the Pen
Mask SVG transparency animation by Alexandr_TT (@Alexandr_T)
on CodePen.