Создаем анимированную сеть из динамических точек при помощи HTML5 Canvas

Создаем анимированную сеть из динамических точек при помощи HTML5 Canvas

От автора: демо ниже – возможно, один из самых узнаваемых визуальных мотивов последних лет. Не знаю, как правильно назвать этот эффект, это анимация сети динамических точек. Это мой вариант данной анимации, за основу было взято демо Дэниела Майовски.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В Codepen версии кода выше чуть больше стилей. Там показано, как поместить текст поверх анимации. Чтобы тег canvas всегда занимал всю высоту и ширину окна, первым делом необходимо написать JS скрипт в конце страницы с функцией resize:

Создаем точки

В объекте opts хранятся свойства со значениями по умолчанию для скрипта:

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

Размеры тега canvas необходимо изменять таким образом, чтобы точки всегда касались краев окна браузера. Функция resizeReset() вызывается единожды после полной загрузки скрипта. При изменении размеров окна ее необходимо вызывать повторно так, чтобы она не замедляла скрипт:

Объект Particle представляет собой достаточно большую функцию, генерирующую все точки:

Описание ниже относится ко всем созданным точкам:

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

в this.vector хранится направление движения точки. Если this.vector.x равен 1, частичка движется вправо, если -1, то влево. Точно так же если this.vector.y имеет отрицательное значение, точка движется вверх, если положительное – вниз;

this.update вычисляет следующие координаты для всех точек. Сперва проверяется, коснулась ли точка границы. Если точка проходит границу, вектор движения умножается на -1, тем самым направление меняется на противоположное;

при изменении размера окна частичка может вывалиться из периметра охвата функции border. Для предотвращения таких ситуаций задействован ряд условий if, которые в случае ухода за периметр заново задают позицию точки в пределах холста;

в конце отрисовывается сама точка.

Код ниже приводит все в движение:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Функция setup создает массив particles и с помощью requestionAnimationFrame заполняет его точками перед вызовом функции loop. Функция loop:

Функция loop очищает холст, обновляет позиции всех точек и рисует их. Постоянное обновление холста с помощью функции requestAnimationFrame() создает ощущение анимации.

Все начинается с вызова функции setup(), но сначала задается парочка констант и переменных и инициализируется функция resizeReset:

На данном этапе мы увидим на экране движущиеся точки:

Чтобы добавить сетку, нужно написать дополнительный код.

Создаем линии

Чтобы нарисовать линии, в функцию loop() нужно добавить следующий код:

Функция linkPoints вызывается для каждой точки. Эта функция также использует кусок кода ниже:

Функция checkDistance определяет расстояние между всеми точками. Если оно меньше linkDistance, то прозрачность линии будет больше 0, то есть между точками возникнет линия.

Перед тем как мы продолжим, rgb цвет нужно разбить на компоненты:

Функция linkPoints проверяет все точки по отношению друг к другу и с помощью шаблонных строк отрисовывает линии с определенным уровнем прозрачности:

Заключение

Результат получился впечатляющий, советую поэкспериментировать с разными значениями в скрипте.

Стоит отметить, что если добавить слишком много точек или слишком сильно увеличить расстояние для связи (что создаст слишком много линий), анимация может сломаться. Было бы неплохо, если бы при сужении окна браузера снижалась скорость точек. Если уменьшить площадь, точки начнут двигаться слишком быстро.

CodePen демо к этой статье https://codepen.io/dudleystorey/pen/NbNjjX

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree