Помните мультфильмы, которые мы смотрели в детстве? В то время они были воплощением анимации. В настоящее время анимация не ограничивается мультфильмами - мы сталкиваемся с ними почти каждый день, когда проверяем свой телефон или смотрим на любое устройство с экраном.
Сегодня анимация используется не только для привлечения внимания, но и для улучшения взаимодействия с пользователем и направления пользовательского потока. В любом хорошем дизайне анимации добавляются таким образом, что они сочетаются с общим потоком, создавая тем самым беспроблемный пользовательский интерфейс.
Итак, в этой статье мы создадим простую анимацию лица с разными выражениями, и в этом процессе мы немного изучим 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.
Спасибо за прочтение! Надеюсь, вы кое-что узнали.