Advertisement
  1. Web Design
  2. SVG
Webdesign

Как оживить Всемирный день психического здоровья Лента SVG

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Liliya (you can also view the original English article)

«Всемирный день психического здоровья» Всемирной организации здравоохранения проходит 10 октября 2018 года, чтобы помочь повысить осведомленность о проблемах психического здоровья. В этом году основной упор делается на то, чтобы побудить всех нас поддержать и принять участие в программах и услугах, которые могут охватить молодежь, в идеале - эффективно решать проблемы как можно раньше.

Чтобы отметить день, когда мы собираемся использовать CSS для анимации SVG с зеленой полосой, которую носят многие люди, чтобы символизировать понимание психического здоровья.

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

Когда вы закончите, у вас будет эта анимация (нажмите RERUN, если необходимо):

1. Получить стартовый код

Я заранее подготовил для вас SVG и HTML-код, чтобы вы могли просто сосредоточиться на использовании CSS для анимации различных элементов, составляющих иллюстрацию.

Для начала создайте пустой HTML-файл, затем скопируйте и вставьте код, который вы видите ниже:

Сохраните и просмотрите файл в браузере, и вы должны увидеть это изображение со всеми видимыми элементами SVG, некоторые из которых расположены поверх других:

World Mental Health Day 2018 first image

Давайте начнем с разбивки каждого элемента, включенного в SVG, чтобы вы знали, с чем мы работаем.

Сначала у нас есть передняя рука, которая войдет с левой стороны SVG:

World Mental Health Day 2018 the hand

Тогда у нас есть задняя рука, которая войдет справа:

World Mental Health Day 2018 right hand

После того, как две открытые руки пересекаются в центре экрана, мы заменим их сложенными руками:

World Mental Health Day 2018 clasped hands

Затем у нас есть зеленая лента осведомленности о психическом здоровье, которая исчезнет:

World Mental Health Day 2018 green ribbon

Основной текст «Всемирного дня психического здоровья», который появится после этого:

World Mental Health Day 2018 text label

И текст даты, который будет последним элементом, который должен исчезнуть:

World Mental Health Day 2018 subtitle

2. Начните добавлять CSS

Все, что нам нужно для нашей анимации, уже находится в коде SVG, нам просто нужно охватить и нацелить элементы, которые он содержит, через их идентификаторы.

Первое, что нам нужно сделать, это спрятать все элементы, чтобы мы могли позже показать каждый из них в соответствующее время. Добавьте следующий код между тегами style> , уже присутствующими в только что созданном HTML-файле.

3. Заставьте переднюю руку войти слева

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

Добавьте следующий код в ваш CSS.

Давайте пройдемся по тому, что мы делаем с этим кодом.

Нам нужно только переместить наш элемент из одной позиции в другую, а не зигзагообразно проходить через промежуточные позиции. По этой причине мы можем просто использовать from и to, а не указывать процентные ключевые кадры.

В ключевом кадре from мы будем использовать свойство transform, чтобы перевести, т.е. переместить элемент влево, позицию, которая выражается как -100%. В ключевом кадре to мы указываем исходную позицию элемента с 0%. Анимация ключевого кадра автоматически обрабатывает перемещение элемента между состояниями from и to.

Вы также заметите, что opacity установлена ​​на 1 в обоих ключевых кадрах. Это означает, что элемент появится в начале анимации, останется видимым до самого конца, а затем вернется к opacity по умолчанию 0, которую мы установили ранее, и снова исчезнет. Нам нужно, чтобы это произошло, чтобы освободить место для элемента со сложенными руками, который появится позже.

Теперь мы можем применить анимацию к переднему элементу нашего SVG, который использует ID #fronthand. Добавьте следующий CSS в ваш код.

Здесь мы указываем имя анимации, то есть infromleft, который активирует только что созданную анимацию. Во второй строке мы говорим, что анимация запускается в течение 1,5 секунд. А в третьей строке мы говорим использовать функцию ease-out, которая заставит двигаться быстрее, а затем замедлится до конца.

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

World Mental Health Day 2018 hand

4. Заставьте заднюю руку войти справа

Теперь мы создадим еще одну анимацию, почти идентичную первой, с той разницей, что элемент будет перемещаться справа, а не слева. Добавьте этот CSS к вашему стилю:

Вы увидите, что в ключевом кадре from мы переводим на 100% вместо -100%, что выталкивает начальную точку анимации за правый край. Все остальное в этом коде совпадает с последней анимацией.

Мы применим эту анимацию к заднему элементу в SVG, добавив следующий код:

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

World Mental Health Day 2018 hands crossing over

5.Сделать соединенные руки

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

Чтобы это произошло, мы создадим еще одну ключевую анимацию с именем instantappear. Все, что будет делать эта анимация, это установить opacity 1 на протяжении всей анимации. Добавьте этот CSS в ваш файл:

Примените анимацию к элементу #claspedhands с помощью этого кода:

Здесь в первых двух строках мы вызываем нашу анимацию instantappear и устанавливаем ее продолжительность равной 1 секунде.

В третьей строке мы говорим, что анимация задерживается на 1,5 секунды, что соответствует продолжительности наших первых двух анимаций. Таким образом, как только они закончат, эта анимация начнется.

Затем в четвертой строке мы устанавливаем свойство animation-fill-mode в forward. Это говорит анимации остановиться на последнем кадре и остаться там. Это будет держать элемент с opacity 1, установленной в конечном ключевом кадре, вместо того, чтобы возвращаться к opacity по умолчанию 0, как это делали наши передняя и задняя руки.

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

World Mental Health Day 2018 clasped hands

6. Исчезновение оставшихся элементов с повторно используемыми ключевыми кадрами.

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

Создайте новую анимацию с именем fadein и установите для нее переход от opacity 0 к opacity 1 следующим образом:

Зеленая лента - следующий элемент, который мы хотим отобразить, поэтому примените к нему нашу новую анимацию fadein с помощью следующего CSS:

Здесь эффект затухания длится три четверти секунды, и мы устанавливаем его на 1,75 секунды после завершения предыдущих анимаций. Снова мы используем animation-fill-mode: forwards; чтобы opacity элемента оставалась равной 1, а не по умолчанию равной 0.

Когда ваша последовательность завершится, вы должны увидеть это:

World Mental Health Day 2018 final animation

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

Мы используем тот же код, что и на элементе #ribbon, просто увеличив задержку до 2,25 секунды, чтобы поразить внешний вид элементов.

Ваша анимация должна завершиться в этом состоянии:

World Mental Health Day 2018 finish state

Наконец, нам нужно отобразить дату, поэтому обновите существующий стиль #date:

Опять же, единственное изменение - выталкивание времени начала анимации.

Подводим итоги

С этим последним фрагментом кода ваша анимация завершена, и когда она завершится, она должна выглядеть следующим образом:

World Mental Health Day 2018 complete clasping hands animation

Для получения дополнительной информации о Всемирном дне психического здоровья посетите веб-сайт ВОЗ.

Узнайте все о CSS анимации:

Узнайте больше о анимации SVG:


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.