В последнем уроке Particles.js вы узнали, как создавать частицы с желаемыми формами и размерами. Хотя было приятно видеть, как все частицы движутся, есть еще место для улучшения. В настоящее время взаимодействие между различными частицами отсутствует. Они просто проходят друг через друга, как будто другие частицы не существуют.
Этот урок научит вас, как перемещать частицы так, как вы хотите, контролируя их направление, скорость и многое другое. Вы также узнаете о различных режимах взаимодействия и событиях.
Управление движением частиц
Не все частицы в каждой системе частиц движутся в случайных направлениях. Даже когда они это делают, в действии есть и другие силы. Например, они могут ускоряться при сближении или приходить в себя после столкновений. Все эти параметры могут контролироваться различными свойствами, доступными при move .
Если вы не хотите, чтобы частицы двигались вообще, вы можете сделать это, установив enable в false . Вы можете указать скорость частиц, используя параметр speed . Чтобы переместить каждую частицу с некоторой случайной скоростью, установите для random значение true . С другой стороны, чтобы перемещать их в случайных направлениях, укажите direction как none .
Рано или поздно хотя бы одна из частиц переместится к границе нашей системы. Отклоняется ли эта частица назад или выходит из другого направления, определяется значением параметра out_mode . Когда он установлен, частицы выходят из холста. Когда он настроен на bounce , частицы отскакивают назад после удара границы.
Кажется немного неестественным, когда частицы проходят друг через друга без каких-либо изменений в скорости. Чтобы изменить скорость частиц при каждом столкновении, вы можете установить для bounce значение true . Интересно, что это будет работать, только если line_linked свойство line_linked или line_linked . Частицы меняют свое направление каждый раз, когда сталкиваются, даже если столкновение не встречное.
Наконец, я хотел бы обсудить привлечение. Как только вы включите притяжение, частицы будут менять свою скорость, когда они находятся в непосредственной близости от других частиц. Изменение может быть положительным или отрицательным в зависимости от значения других параметров. Притяжение в каждом направлении обратно пропорционально значению соответствующих параметров, rotateX и rotateY . Значения по умолчанию очень высоки, чтобы наблюдать некоторое заметное притяжение. С другой стороны, если вы сделаете их значения слишком низкими, частицы через некоторое время наберут очень высокие скорости.
JSON, ответственный за движение частиц выше:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
«move»: {
«enable»: true,
«speed»: 20,
«random»: true,
«direction»: «none»,
«bounce»: true,
«out_mode»: «bounce»,
«attract»: {
«enable»: true,
«rotateX»: 10,
«rotateY»: 10
}
}
|
Вы должны иметь в виду, что когда вы устанавливаете straight в true и direction в none то же время, частицы вообще не будут двигаться.
События и режимы взаимодействия
Пока все хорошо, но вам может быть интересно, могут ли частицы также взаимодействовать с пользователем, и если они могут, как они будут взаимодействовать.
Чтобы ответить на ваш первый вопрос, частицы могут взаимодействовать с пользователем. Particles.js может реагировать на три события: hover , click и resize . Однако сначала вы должны знать, что события могут быть обнаружены на холсте или в самом окне, установив значение параметра detect_on . Теперь все эти события будут срабатывать при каждом наведении курсора, нажатии или изменении размера холста / окна.
Когда вы устанавливаете для resize значение true , частицы корректируют себя в оставшемся пространстве без каких-либо искажений. Когда для resize задано значение false , частицы изменят свою форму, чтобы учесть любые изменения в размере холста.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
«detect_on»: «canvas»,
«events»: {
«onhover»: {
«enable»: true,
«mode»: «repulse»
},
«onclick»: {
«enable»: true,
«mode»: «push»
},
«resize»: true
}
|
Возможно, вам интересно, что делает параметр mode в приведенном выше фрагменте кода. Этот параметр определяет, как частицы будут взаимодействовать с пользователем. Библиотека определила пять режимов взаимодействия. Они grab , bubble , push , push и remove .
Режим grab создает соединительные линии между вашей точкой зависания или щелчка и соседними частицами на определенном расстоянии, которое вы установили сами. Этот режим работает только с событием наведения. JSON ниже рисует линию с непрозрачностью 1, чтобы соединить все частицы в пределах 800 пикселей.
|
1
2
3
4
5
6
|
«grab»: {
«distance»: 800,
«line_linked»: {
«opacity»: 1
}
}
|
Режим bubble изменяет размер и непрозрачность всех частиц, находящихся на определенном расстоянии, на время, которое вы решите. Режим отталкивания заставляет частицу уходить от места щелчка. Оба эти режима могут быть добавлены либо к hover или click . Продолжительность применяется только к событиям щелчка в обоих случаях.
|
01
02
03
04
05
06
07
08
09
10
|
«bubble»: {
«distance»: 600,
«size»: 60,
«duration»: 0.1,
«opacity»: 1
},
«repulse»: {
«distance»: 500,
«duration»: 0.5
}
|
Вы должны попытаться изменить различные параметры, чтобы сделать демо еще лучше.
Режим push добавляет определенное количество частиц при каждом щелчке мыши. Частицы будут добавлены в месте щелчка. Аналогично, режим remove удаляет частицы с холста. Частицы, которые будут удалены, выбираются случайным образом.
|
1
2
3
4
5
6
|
«push»: {
«particles_nb»: 3
},
«remove»: {
«particles_nb»: 1
}
|
Последние мысли
Три руководства из этой серии охватывают все, что может предложить Particles.js. Я также упоминал о некоторых вещах время от времени, чтобы вам не приходилось потом чесать голову из-за проблем, таких как частицы не отскакивают друг от друга и т. Д.
Если вам нужно узнать больше обо всех параметрах, которые мы обсуждали, пожалуйста, ознакомьтесь с документацией этой библиотеки. Более того, если вы застряли в какой-то момент во время использования библиотеки или что-то не работает, как следует, я хотел бы предложить вам прочитать исходный код, чтобы увидеть, что происходит под капотом.