Анимация "Созвездие"

+45

Начнем с создания общего объекта созвездия Constellation и его основных переменных и методов.

Переменные:

  • _this - ссылка на текущий контекст выполнения, для удобства в будущем;
  • canvas - ссылка на элемент холста;
  • context - контекст рисования на холсте;
  • config - здесь будут настройки нашего созвездия.

Сразу определим две настройки: width и height - ширина и высота для холста равные ширине и высоте окна.

Методы:

  • setCanvas - задает свойства холста;
  • setContext - задает свойства контекста;
  • init - инициализация созвездия, именно эта функция запускает всю анимацию, пока что там вызываются два предыдущих метода.

В методе setCanvas зададим ширину и высоту холста, указанные в настройках.

Теперь нужно все это дело запустить. Повесим обработчик на событие DOMContentLoaded - функцию, которая содержит создание экземпляра нашего объекта созвездия и вызов метода init.

Точки на холсте

Теперь нужно нарисовать на холсте звезды. Определим некоторые требования:

  • хаотичное расположение точек на холсте;
  • точки должны быть разного размера;
  • количество точек должно зависеть от диагонали холста;

Приступим. В переменную настроек добавим:

  • объект star с двумя свойствами: color и width, цвет точки и ее максимальный радиус;
  • свойство length- количество точек: диагональ холста разделенная на 10;
  • свойство stars- массив, содержащий все звезды.

Создадим новый объект Star внутри созвездия, что бы ему были доступны основные переменные.

Внутри объекта определяем расположение точки декартовыми координатами и указываем ее радиус- параметры x, y и radius соответственно, также определяем метод create, который нарисует точку на холсте.

Значение координаты x должно быть от 0 до значения ширины холста. Для хаотичного расположения звезд нам нужно выбрать случайную точку в этом отрезке, воспользуемся методом Math.random() (он возвращает число от 0 до 1) - умножим значение ширины на случайное число, возвращенное этим методом. То же самое проделываем с координатой y, используя высоту холста.

Максимально возможный радиус мы ранее указали в настройках, это свойство width во вложенном в настройки объекте star. Умножим это значение на результат работы метода Math.random().

С объектом точки закончили, вернемся к созвездию.

В методе setContext зададим цвет заливки фигур, свойство fillStyle контекста. Это будет цвет точек.

Напишем метод createStars, который будет создавать точки, в нем выполним следующие действия:

  1. Очистим холст методом clearRect;
  2. Создадим точки, количество которых определено с помощью цикла значением настройки length. На каждой итерации цикла создаем экземпляр объекта Star, добавляем его в массив stars (свойство объекта настроек) и вызываем метод create.

Для последующей анимации нам потребует запускать этот метод циклически. Поэтому сразу добавим метод loop, который в качестве параметра принимает функцию. Вызывает переданную функцию и с помощью метода requestAnimationFrame запускает вновь себя же, передавая в качестве параметра полученную функцию. Получается рекурсия. Почечему нужно использовать requestAnimationFrame: без него исполнение кода браузером остановится на данной рекурсии. Также стоит обратить внимание: внутри метод запускается из ранее созданной переменной _this.

В конец метода init допишем вызов цикла, и смотрим что получилось.

 Движение точек

В объект Star добавим два параметра vx и vy, они определяют скорость и направление движения точек. Принцип расчета такой:

  • вычитаем из 0.5 результат Math.random() - получаем случайное число от -0.5 до 0.5 (отрицательное значение спровоцирует движение в противоположную сторону);
  • для уменьшения скорости делим полученное значение на 5.

Пишем метод animate для реализации движения. В нем циклом проходим по массиву stars, определяем не достигла ли точка края холста, если достигла- меняем знак параметра vx или vy (в зависимости от стороны) на противоположный и увеличиваем значение координат x и y на vx и vy соответственно.

Вызываем метод animate в конце метода createStars из переменной _this.

Смотрим результат.

Анимация линий

Осталось нарисовать линии в области наведения курсора.

Добавим в настройки:

  • объект line с двумя свойствами: color и width - цвет линий и их толщина;
  • объект position с двумя свойствами: x и y - координаты курсора;
  • свойство distance;
  • свойство radius.

В методе setContext зададим цвет и толщину линий, свойства strokeStyle и lineWidth контекста.

Пишем метод line, который будет отвечать за рисование линий. В методе два вложенных цикла. Оба они проходят по каждой точке. Таким образом можно определить расстояние между каждой точкой. Если расстояние между точками по обеим координатам меньше указанного в настройке distance и расстояние от положения курсора до точки по обеим координатам меньше указанного в настройке radius, то рисуется линия от первой точки до второй.

Вызываем метод line в конце метода createStars из переменной _this.

Для обновления позиции курсора напишем метод bind, в котором создадим обработчик события mousemove на холсте. В обработчике определяем положение курсора относительно холста и полученные координаты пишем в ранее созданный объект настроек position. Вызываем метод bind в конце метода init.

Смотрим готовый результат.

Понравилась статья? Поделись с друзьями:

Комментарии ()

    Категории
    События студии все
    Поздравляем, 2021 наступил! Сколько на него надежд во всем мире...
    01 Января 2021
    Поздравляем, 2021 наступил! Сколько на него надежд во всем мире...
    Наступил Новый 2021 год! Очень надеемся на то, что он будет лучше прошлого, отступит коронавирус, восстановится экономика, справится малый и средний бизнес, а государство поможет ему в этом реальной помощью!
    307 просмотров
    подробнее
    Популярное
    Последнее