Всем привет и добро пожаловать на канал!
В этом видео мы поэтапно создадим
интерактивную анимация движения частиц по орбите, на ванильном JavaScript. Как вы
можете видеть мы также реализуем эффект параллакс, если уточнить то при
перемещении указателя мыши по области просмотра
будет создаваться впечатление изменения угла обзора. Этот эффект довольно простой и
красивый, его легко кастомизировать под свои нужды и например установить в
качестве фона на сайте, самое главное не забудьте поставить лайк и оставить
комментарий после просмотра, это сильно мотивирует делать видео, кроме того
комментарии позволяют понять в какую сторону двигаться дальше и конечно же
это влияет на скорость развития канала.
Начнем! Разделию экран на две части для
для браузера и редактора кода. Первым делом мы подготовим базу для проекта , настроим
страницу. В редакторе кода создайте три пустых файла
index.html, style.css и script.js. Файл
index.html заполним базовой структурой.
Подключите файлы стилей и скрипта.
Добавьте тег Canvas. В стилях тегу canvas зададим произвольный фон. В моем случае тёмно-серый
 
У тега body скроем внешние отступы и отключим полосы прокрутки.
Приступим к созданию скрипта.
Запишем самовызывающуюся функцию
настроим canvas для начала объявим
константу с именем семьи в которую его
поместим sunken с получим используя
метод документ куэрри селектор kennys
далее необходимо указать в каком
контексте canvas мы хотим работать
константа сети x
указываем 2d контекст сильвинит контекст
тоады
объявим пару переменных для хранения
ширины и высоты кен вас лет кенсу it
comes хэй
еще одна пара переменных для хранения
центра canvas по x и y центр x центр
y значение этим переменным присвоим
внутри функции ресайз function ресайз 7w
будет равна ширине кен вас а ширина кмс
будет равна ширине окна просмотра и
нервы точно так же поступим с высотой
seas
она киносайт интерфейс
центр x это половина ширины а значит нам
нужно либо поделить череду на 2 либо
умножить ее на пять десятых умножено
пять десятых все x равно
sie w умножить на пятьдесят то же самое
с высотой
вызовем функцию российс и сразу запишем
слушатель событий чтобы адаптировать
размер холста если вдруг кто-то
попробует изменить размер области
просмотра
window а дэвин листами события ресайз
повторный вызов функции раз айс
кен весна строили создадим первую сферу
для этого запишем ее класс с именем arm
что на английском означать шар или сфера
class room
конструктор первым свойствам объекта
уорд будет его размер this says думаю
значение 5 будет достаточно этот
параметр будет отвечать за радиус
окружности добавим метод который в
будущем будем вызывать каждый кадр
анимации для движения и отрисовки сфер
recache
внутри будем рисовать простой круг
зададим цвет заливки цвет пока установим
красный red
откроем путь контекст агента
рисуем круг контекст парк
координаты x и y
позднее создадим эти переменные чуть
выше
теперь радиус окружности ресайз
начальный угол 0 конечный угол в
радианах
2 на мосты
заливка
контекст feel
вернемся к координатам ранее мы
использовали x и y племен и в методе арк
но нигде их не объявили
сделаем это чуть выше x будет равна
центр x red x равно центр x и y будет
равна центр y таким образом по умолчанию
координаты окружности будут совпадать с
центром кмс лет y равно центр и y для
проверки отобразим окружность на
странице
это очень просто сделать можно создать
новый объект у арабов и сразу вызвать
его метод ru fresh new york
refresh
поместим эту сферу на некоторое
расстояние от центра до буду еще орбит
по которой в последствии будут вращаться
несколько таких сфер добавим объект
свойства градус abs забыл точку , сингл
в окружности 360 градусов именно поэтому
зададим случайное значение от 0 до 360
используя рандом на трендом умножить на
360 далее нужно будет получить синус и
косинус угла
так как эти методы принимают радиан это
для начала преобразуем угол в радианы в
новой переменной пройдя лет пройдя
формула для преобразования за и сингл
умножить на папе
деленная на 180 теперь можно получить
синус и косинус лет класс
для косинуса используем одноименный
метод в которой передаем переменную
roedean
мы коз пройдя для синуса проделаем то же
самое
полученные переменные косинус и синус
прибавим к переменным x и y как известно
методы косинус и синус возвращает
значения от -1 до 1 а с такими
маленькими значениями изменения будут
практически незаметно ведь частицы будет
смещаться максимум на 1 пиксель в какую
либо сторону в зависимости от угла
следовательно у нас есть повод умножить
синус и косинус
на некое число это число должно быть
расстояние на которое мы переместим
сферу относительно центра
допустим мы хотим чтобы частица
появилась на расстояние равное 1 4
высоты кен вас тогда нам стоит добавить
еще одну переменную функцию раса из
дадим ей имя ph частью 100 part of за
хейт
ph равно и она будет равна c y умножено
на четыре десятых таким образом мы
получаем значение чуть меньше чем 1 4
высоты области просмотра
это значение я подбирал заранее вы
сможете потом и заменить его на свой
вкус умножим синус и косинус на это
значение частицы явно смещена от центра
на некоторое расстояние в данном случае
приблизительно на четверть высоты и
области просмотра
при обновлении страницы она каждый раз
смещается на это расстояние в случайном
направлении от центра теперь можно
увеличить количество сфер
допустим для начала их будет 40 запишем
это значение в объект конфиг который
сейчас создадим верху скрипта
const конфиг сюда также будем записывать
все остальные важные параметры что
обеспечит нам удобный доступ к ним а
значит и более легкую настройку проекта
значение 40 поместим в свойства forbes
каунт количество сфер
arp сканд 40 для хранения сфер нам
понадобится массив объявим его с именем
арбуз
лист лет
урбс лист для наполнения этого массива
создадим функцию cureit stardust
function- укроет stardust внутри
наполнения массива произведем с помощью
цикла for for лет а и равна нулю
количество итераций будет зависеть от
значения записанного свойствен korps
каунт следовательно цикл будет
продолжаться пока ой меньше
сейджи forbes каунт увеличиваем
переменную войны единицу a i + +
добавляю в массив новую сферу forbes
лист push
необ
вызовем эту функцию массив наполнен
осталось отобразить каждый элемент из
данного массива для этого создадим
очередную функцию function глуп
используя метод мы переберем каждый
элемент и вызовем для него method of
rage are pleased and refresh
и конечно вызовем эту функцию лук ранее
созданный единичный объект необходимо
удалить
он больше не нужен сейчас при каждом
обновлении страницы будут создаваться 40
окружностей на одном и том же расстоянии
от центра но в разных позициях следующим
шагом реализуем движение всех этих
окружностей в объект конфиг добавим
свойства отвечающая за минимальную
скорость перемещения мин власти 2
десятых будет достаточно только что
записано и значение добавим в сам объект
form с именем velocity за из velocity
равно сию джи мин власти
но это еще не все это значение мы будем
увеличивать на случайную добавочную
скорость
чтобы частица двигались с разной
скоростью + move рэндом помножить
используем то же самое значение
серии джи мин власти в конце методы
refresh мы будем менять значение угла
прибавляя или отнимая от него значение
скорости в зависимости от знака плюс или
минус
обращение будет происходить по часовой
стрелке или против неё за и сингл равно
за из англ
плюс здесь velocity поместим выражение в
скобки и поделим по модулю на 365 чтобы
сбрасывать и угол на ноль по достижению
360 градусов
запустим анимацию функцию лук нужно
сделать рекурсивный чтобы она вызывала
сама себя для этого внутри неё
необходимо вызвать стандартный метод
созданный специально для анимации
request и немощен фрейм а в скобках
укажем саму функцию лук сферы начали
свое движение по окружности
но они накладываются на предыдущие кадры
следовательно есть необходимость очищать
крыс каждый раз перед отрисовкой сфер
укажем цвет заливки в методы fills the
пусть будет серый как и текущей и
заливаем фил проект
хорошо мы увеличили количество сфер и
запустили их движения по орбите вокруг
центра кэндис каждая частица сейчас
находится на равном удалении от центра
то есть они перемещаются по одному
кольцу изменим количество колец по
которым частицы будут вращаться в конфиг
добавим свойства с именем rings каунт
который будет отвечать за количество
колец rings аккаунт значение 10
далее перейдем к объекту орб и определим
новое свойство radius из
радиус тут будем умножать моя гриндом на
количество колец на френдом
умножить 7 g rings каунт округлим до
целого числа используя битву you
операцию или 0 этот способ округления
является сокращенной альтернативой
стандартному методу floor которой
округляет число до целого в меньшую
сторону таким образом мы получаем целое
число от нуля до десяти
естественно это слишком маленькие
значения и разницы между позициями
окружностей будет несущественный чтобы
это исправить только что записано и
уравнение обернем скобками и умножим на
ph затем поделим на количество колец
напомню что значение ph примерно равно 1
4 высоты кенес и мы поделили его еще на
10 это то же самое что делить высотой
canvas на 40 спустимся ниже и дополним
уравнение переменных x и y обернем
скобками ph и прибавим радиус
на время за комментируя заливку фона
чтобы вы видели что перемещение идет
именно по кольцам
они хаотично раз комментируя обратно
заливку фона разверну браузер и редактор
кода на весь экран
так как анимация уже перестает
помещаться на такой маленькой области
теперь поиграемся с диаметром
окружностей посмотрите на частицы все
они одинакового размера но если
представить что частицы пролетающие
сверху находится вдали от нас а
проходящие снизу ближе к на то верхнее
оптически должны выглядеть меньше а
нижние наоборот больше
давайте внутри методы фреш объявим новую
переменную с именем оптик который
запишем выражение позволяющая нам
реализовать этот эффект light оптик на
самом деле для создания эффекта у нас
уже почти все есть первое что нам
пригодится это синус и вот почему в тот
момент когда частица проходит сверху
значения синуса приблизительно равно
минус одному
а в самой нижней точке синус наоборот
равен одному по краям слева и справа
значения синуса приближается к нулю если
мы будем умножать
эти значения синуса например на число 3
то в верхней части мы получим значение
минус 3 по краям что-то около нуля так
как умножим почти на 0 а снизу при
умножении на единицу естественно получим
тройку
так давайте запишем это выражение только
синус умножим не на 3 она размер самой
сферы
7 умножить this site
прибавим полученное выражение к текущему
размеру в отдельную переменную с именем
says it says тут просто сложим свойства
объекта says и переменную optic за из
says плюс оптик подставим полученное
значение в методе арк заменив за из says
просто says увеличу количество частиц до
400
как видите мы получили то чего
добивались верхней частицы стали меньше
а нижние больше
но это еще не все обратите внимание на
то что верхний частицы хоть и выглядят
меньше все же это не совсем корректно и
потому что грубо говоря они находятся на
разном отдали не от нас то есть среди
верхних те что ближе к центру должны все
же быть чуть большего размера а среди
нижних те что ближе к центру должны быть
чуть меньше чем те что в самом низу
усовершенствуем написанное выражение так
чтобы размер зависел от радиуса вращения
добавим в объект новое свойство
impact влияние или воздействие здесь
impact
поделим радиус на ph здесь радиус
уделить ph результатом этого выражения
будет число от 0 до 1
доработаем формулу в переменной оптику
умножив уже написанная на impact
теперь более корректно влияние
оказываемое на изменение размера точек
находящихся ближе к центру минимально
из-за этого они всегда одинакового
размера а точки расположены и в
отдаленности от центра больше всего
поддается изменению размера думаю
следует создать некую хаотичность в
размеров частиц в этом нам как всегда
поможет рэндом просто добавим метод
рэндом в свойства says
теперь размер будет случайным от 0 до 5
0 размер нам не подходит в нем нет
особого смысла поэтому в конце выражения
прибавим двойку
теперь размер будет колебаться от 2 до 7
откроем браузер и посмотрим на внешнее
кольцо
самая отдаленная от центра сферы
пролетающие верхней части независимо от
их размера уменьшается примерно до
одного пикселя а по идее некоторые
должны быть чуть больше некоторые чуть
меньше
для исправления этой мелочи достаточно
умножить переменную optic на семь
десятых
отлично с размерами закончили следующим
этапом превратим имеющуюся анимацию в
нечто похожая на солнечную систему или
планету вокруг которые летают эти
частицы
грубо говоря сферы должны летать не по
окружности как сейчас а по овалу
если так можно выразиться приступим к
растягивание объявим переменную
отвечающую за степени растягивания по
ширине
дадим ей имя asset x смещение по x
и тут нам очень повезло потому как у нас
опять почти все есть для того чтобы
растянуть анимацию например косинус угла
он прекрасно подходит нам в решении
этого вопроса так как его значение в
самой левой точке -1 а в самый правый +
1 умножим косинус на подходящее нам
число и по идее готова а вот подходящее
нам число чтобы долго не думать получим
также как уже получали четверть высоты
только теперь получим четверти ширины
добавим переменную и w прошу прощение не
четверть урины а часть ширины портов
завис пи w равно центр x умножить на 4
десятых возвращаемся к переменные f от x
косинус умножим на только что созданную
переменную полученное смещение прибавим
координате x и уау
на что здесь следует обратить внимание
конечно на то что все кольца
превратились в овал и если честно это не
совсем то что нам нужно больше похоже на
бублик дело в том что а чем меньше
диаметр кольца тем меньше его нужно
растягивать тогда визуально это станет
выглядеть более правильно у нас уже есть
параметр который следует включить в
уравнении смещения это свойство объекта
impact
влияние чем меньше расстояние до центра
тем меньше значение этой переменной и
наоборот
умножаем смещение на него
уже видно что мы приближаемся к цели что
там у нас с высотой нам необходимо
немного сплющить траектории движения
сфер чтобы они проплывали как бы позади
центральной сферы они над ней как вы уже
догадались за это будет отвечать
переменная сетки y
тут все очень схожа со все tex только
вместо косинуса и синуса умножаем на пи
w так как он отвечает за высоту
это уже умножим на impact
но и вычитаем полученное значение из
переменной y по ширине мы прибавляли так
как нам нужно было растянуть а бы высоте
вычитаем потому что нужно с плюс 0
превосходно
тем временем у нас образовалась
очередная задачка частицы которые якобы
пролетают за сферой прекрасно видны
конечно так быть не должно поэтому
спрячем их объясню как мы это сделаем
для начала мы рассчитаем расстояние от
самой сферы до центра экрана
далее создадим условия в котором мы
будем рисовать только те сферы
расстояние между которыми больше
значение ph потому что ph именно тот
параметр который отвечает за радиус
пустоту и в центре реализуем
вышесказанное новая переменная с именем
dist инсту центр
расстояние до центра разумеется и
сокращу
лет dist tu si
получить расстояние от центра до частицы
можно используя метод гипотенуза мазь
keypad первым аргументом нужно указать
дельта x это разница переменных x и cx
второй аргумент дельта y
разница y и c эдит дистанцию получили
сейчас какие хотели поместим отрисовку
сферы в условия
в пишем сама условия 10 тыс и больше ph
и посмотрим в целом можно сказать что
все работает так как частицы пролетающие
за сферой не отображаются просто нужно
внести некоторые правки
так как вместе с ними перестали
отображаться частицы пролетающие спереди
а ближайшая к центру кольцо мерцает
исправим это в два действия первым
действием избавимся от мерцания очевидно
что причина этого эффекта являются
мелкие неточности в вычислениях
поэтому для компенсации этой неточности
в условии просто вычтем единицу из
переменной ph мерцание пропала вторым
действием отобразим частицы пролетающие
спереди а чем они отличаются от тех что
прилетают позади это значение синуса вот
его-то и добавим в условия
а частицы находящихся на переднем плане
значения синуса больше нуля добавим и
это как второе условие или
синус больше 0 вот и все самое главное о
позади осталось раскрасить частицы в
разные цвета и добавить parallax effect
так сказать украсить анимацию начнем с
цвета
создадим несколько переменных с помощью
которых мы сгенерируем цвет 1 оттенок
лет h-значение оттенка будет равно
текущему углу частицы энгл вторая
переменная насыщенность лет с поставим
значение 100
далее яркость лет л
давайте пока установим 50 процентов
теперь переменная в которой это все
объединим в единый цвет red color
ставим обратные кавычки они похожи на
одинарные но находится на букве ё на
клавиатуре csl
вставляем все наши переменные h с.л.
после sl не забудьте знак процента
теперь можно подставить наш цвет вместо
райт и посмотреть color с цветом еще не
все добавим режим наложения передать
рисовкой сфер
будем использовать режим лайтера
в таком режиме цвета будут смешиваться
между собой образовывая в местах
пересечения более светлые оттенки
а частицы будут казаться полупрозрачными
перед заливкой фона нужно сбрасывать
значение наложения на normal иначе весь
canvas станет белым теперь применим
normal
city x global композита первейшим normal
как и говорил если смотреть на частицы
нарисованный друг на друге то можно
увидеть что цвет вместе пересечении
становится более светлым а сейчас хочу
сделать цвет самого внутреннего кольца и
самого внешнего более яркими почти
белыми а средние кольца наоборот более
темные за яркость отвечает переменная л
сами ними и значение яркость может быть
от 0 до 100 процентов а значит мы можем
использовать свойства impact значение
который меняется от 0 до 1 в зависимости
от того на каком расстоянии от центра
находится частица за 75 просто умножив
ее на стол получим значение от 0 до 100
центральный круг совсем пропала потому
что мы получили тот переход от 0 до 100
а нам нужен переход от 100 до нуля и
обратно до 100
для этого можно поместить им проекту в
метод сенса и умножить на число пи
в таком случае когда impact будет равен
нулю метод синуса вернёт 0 а значит при
умножении на 100
вернется 0 когда импэкс станет пять
десятых умноженной на пи
метод синуса вернет 1 а значит при
умножении на 100 вернется 100 и наконец
когда impact
равен одному при умножении на пи опять
вернется 0
таким образом мы получили значение от 0
до 100 и обратно до 0
а как было сказано ранее нам нужно было
наоборот от 100 до нуля и опять до 100
чтобы добиться этого просто инвертируем
результат синуса
вычтем его из единиц и средние кольца
практически не видно они получили
слишком темные чтобы этого не
происходило умножать будем на 90 и
прибавлять 10 вот и все
наконец добрались до параллакс эффекта
для начала получим координаты мыши на
холсте и сохраним их в переменных mxm y
создадим их лет mx
m y по умолчанию сделаем их равными нулю
далее добавим слушайте событие
перемещения мыши на canvas sen ve men
tester действия масс мы запишем функцию
в которой переменным mxm y присвоим
значение значением x будет равно клиент
x а еще вычтем положение элемента кен
вас на странице и нас sehen wie geht
mounting клиент red
лев аналогично поступим с координатой m
y
используя только что созданные
переменные реализуем эффект наклоном
влево вправо в зависимости от положения
мыши на canvas объявим переменную
параллакса x red flags rex ее значение
будет позиция мыши деленная на ширину
холста таким образом мы получим число от
0 до 1 умножим все на 2 для
преобразования значений и получим на
выходе от 0 до 2 в конце вычтем единицу
для получения значения от -1 до 1 только
что полученную переменную используем для
наклона наклон сам по себе в нашем
случае эта коррекция высоты частиц с
одной стороны от центра частицы будут
подниматься по диагонали выше
с другой стороны опускаться вниз за
расположение по высоте отвечает
координаты y значит переменную параллакс
x
нужно использовать в ней в конце
выражения вычитаем или прибавим
параллакс x знак плюс или минус а в
дальнейшем будет влиять только на то в
какую сторону будет происходить наклон
при перемещении курсора в моем случае
вычитаю минус параллакс x
значение borla xxix колеблется от -1 до
1 это навряд ли хватит чтобы увидеть
смещение кроме того нам не нужно смещать
или опускать все частицы самое
центральное кольцо не нужно трогать
вообще то есть влияние смещение на него
должно быть минимальным
в отличие от самого крайнего кольца и
возмещение должно быть максимальным
причем с одной стороны в минусовую
сторону с другой стороны в плюсовую в
счастье нам опять повезло и у нас уже
есть переменная пригодная на данную роль
это офсет x умножим на нее
отлично все работает теперь объявим
переменную параллакс игры для эффекта
наклоны вперед-назад
лет warlocks y делим позицию мыши по y
на высоту кен вас тут все проще в
переменной мы получаем значение от 0 до
1 а смещение по высоте у нас уже есть
эта переменная сет y и она уже стоит в
формуле умножим ее на параллакса y
parallax effect готов и можно сказать
основная часть анимация это же дополним
анимацию несколькими мелочами и чуть
подправим первое с чего хочу начать это
изменить направление вращения против
часовой стрелки и увеличить скорость
вращения частиц отдаленных от центра для
изменения направления достаточно
поменять знак плюса на минус в момент
изменения угла
увеличить скорость внешних конец можно
сложив ее с свойствам impact кстати если
вычесть и impact то вращение внешних
колец будет противоположным внутренним
верну как было следующее что можно
добавить и на мой взгляд это сделает
анимацию более интересный это увеличение
частиц когда они пролетают рядом с
курсором
для этого нужно рассчитать расстояние
частички до курсора скопируем строку
кода в которые измеряли расстояние до
центра кен вас переименуем переменную
действуя сокращенно от дественности маус
центр x центр y заменим на
mxm y далее новая переменная m effect
mass effect
тут будет условии если дистанция до
сферы меньше либо равна 50 то будем
делить расстояние на 50 вычитаем это из
единиц и окружим скобками и умножим на
25 25 это число добавочного размера
частиц и таким образом получим плавное
увеличение по мере приближения курсоров
частицы а если расстояние больше 50 это
значение будет 0 и размер частиц и не
изменится прибавим это к размеру
еще изменим тип отрисовки частиц он
также будет зависеть от этого же самого
условия если дисплея меньше либо равна
50
то вместо заливки сферы нарисуем только
eye contour
иначе оставим заливку как и раньше цвет
контура будет такой же как и у заливки
просто припишем спереди
выглядит хорошо мне кажется такой эффект
действительно интересный когда есть
возможность хоть как-то
взаимодействовать с анимацией пожалуй
последнее что хочется поменять это фон я
уже подготовил два варианта фона оба
радиальный градиент и 1 темный 2 светлый
сейчас припишу их сюда первый фонд
создадим прямо перед функции лук light
background один метод радиального
градиента сетей crater radial gradient
начальные координаты градиента центра x
центр y начальный радиус 0
укажем координаты смещения у нас без
смещения поэтому те же самые что и
начальные второй радиус и то-то . где
кончится градиент и дальше в сторону
будет заполнение последним указанным
цветом установлю значение cx
сейчас необходимо добавить его цвета в
этом варианте будет три цвета виджей
один рад colors то тут нужно указать
число от 0 до 1
где ноль это центр градиента самое
начало а единица конец конечно указываем
0 следом указываем первый цвет rgb 10 10
10
следующий цвет на полпути это значит 5
десятых
чуть более синеватый 10 10 20 и
последний цвет
антен еще чуть больше синего и чуть
больше красного передадим этот цвет как
цвет заливки кен вас такой фонд создает
впечатление что в центре черная сфера
конечно градиент можно было задать с
помощью css
акен вас просто стирать это избавило бы
его от лишней нагрузки ну ладно запишем
2 фон скопируем то что есть сейчас
переименуем в pg2
тут сделаем семь цветов получается еще
несколько раз скопируем надеюсь принцип
работы с градиентом понятен поэтому я
быстренько перепишу значения и мы
посмотрим результат
ваше разрешение экрана может отличаться
от моего тогда картинка отобразится
иначе брезент можно будет адаптировать
при желании но в данном примере я этого
делать не буду так как ранее уже было
сказано что выгоднее будет сделать его
на css посмотрим в целом я показал все
что хотел если остались вопросы пишите в
комментарии или группу вконтакте
может у кого-то есть идея для урока
связанные с canvas 2d тоже можете
написать об этом в комментариях возможно
это станет темой одного из следующих
видео а на этом всё всем успехов и до
встречи в следующем видео
