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

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

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

Начиная

Мы будем использовать метод CSS, который довольно редко встречается среди веб-разработчиков, но дизайнеры используют его довольно часто. Это называется маскировка.

Итак, что приходит вам в голову, когда вы слышите «маска»?

Вы, вероятно, представляете себе обложку поверх чего-то. Это все, что нам нужно понять.

Подождите, но эта статья связана с кодированием и использованием CSS-анимации ...

Не волнуйся! Мы займемся этим.

Создание базовой маски

Допустим, у нас есть <div> с background: green;, и это выглядит примерно так:

Теперь предположим, что у меня есть face.svg:

Если мы применим свойство CSS mask-image: url(face.svg); к <div>, вы будете поражены, увидев, что мы получим:

Вы можете подумать, что здесь что-то странное. face.svg был помещен поверх <div>, но он приобрел цвет background. Это противоположно тому, чего вы могли ожидать. Это происходит из-за свойства mask-type, которое делает непрозрачную часть svg прозрачной. Это позволяет видеть цвет фона.

Не будем сейчас углубляться в это. Просто имейте в виду, что мы можем использовать background-color, чтобы изменить цвет маски. Если вы знакомы с различными способами использования background-color, мы также можем использовать градиенты и написать простой градиент, который заполняет красный цвет в центре и радиально распространяется черным наружу. Код для этого следующий:

background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1));

Что приводит к следующему:

Добавление анимации

Теперь давайте добавим анимации к этому пустому лицу. Для этого у меня есть expression.svg, который выглядит как на изображении ниже. Для простоты я создал все SVG с одинаковой шириной и высотой, чтобы мы избегали выравнивания лица и выражения вручную.

Теперь у mask-image есть эта замечательная опция, которая позволяет использовать несколько изображений в качестве масок. Итак, мы можем сделать это: mask-image: url(face.svg), url(expression.svg);. Вот что у нас есть сейчас:

Одним из наиболее важных свойств масок CSS является mask-position, который позиционирует маску из верхнего левого угла относительно ее родительского элемента. И я могу разместить несколько масок, используя свойство mask-position, как и mask-image.

Итак, чтобы сделать лицо грустным, мы можем использовать что-то вроде этого: mask-position: 0 0, 0 12px;. И вот результат:

Первая позиция 0 0 предназначена для face.svg, а вторая 0 12px - для expression.svg. Это подталкивает его на 12 пикселей сверху и приводит к приведенному выше выражению.

Применение функциональности

Теперь давайте оживим эти выражения при наведении курсора. Итак, полный код, который мы получаем после применения псевдокласса hover, выглядит следующим образом:

i {
  background-image: -webkit-radial-gradient(hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8) 60%, hsla(0, 100%, 10%, 1));
  
  mask-image: url('face.svg'), url('expression.svg');
  mask-position: 0 0, 0 12px; /* To make the sad expression */
  transition: mask-position .5s ease-out;
}
i:hover {
  background-image: -webkit-radial-gradient(hsla(120, 100%, 50%, .7), hsla(120, 100%, 20%, .8) 60%, hsla(120, 100%, 10%, 1));
  mask-position: 0 0, 0 0; /* To make the happy expression */
  transition: mask-position .1s linear;
}

Еще немного поиграв с CSS, мы можем сделать это:

Это один из методов, которые мы можем использовать для создания тех захватывающих анимаций, с которыми мы сталкиваемся почти ежедневно.

Одно важное примечание

Свойства маскирования могут работать не во всех браузерах. Поэтому, чтобы они работали во всех браузерах, просто добавьте к ним ярлыки, относящиеся к браузеру, например -webkit-, -moz- & -0-.

Вы можете посмотреть полный код здесь, на github и codepen.

Спасибо за прочтение! Надеюсь, вы кое-что узнали.