В предыдущем руководстве Particles.js кратко обсуждались различные функции, которые предлагает библиотека, и как начать работу с библиотекой. В этом уроке я подробно расскажу обо всех аспектах Particles.js, которые касаются физического появления частиц.
Число, цвет и непрозрачность
Первое, с чем мы будем иметь дело, это количество и плотность частиц. Плотность определяет количество частиц, которые будут упакованы вместе в данной области. По умолчанию он включен с параметром value_area 800. Вот JSON, который позволяет вам контролировать количество частиц:
|
1
2
3
4
5
6
7
|
«number»: {
«value»: 50,
«density»: {
«enable»: true,
«value_area»: 500
}
}
|
Если для параметра « enable под плотностью» установлено значение « value_area то количество отображаемых частиц будет ровно 50. Удвоение значения value_area уменьшит количество частиц примерно вдвое.
Есть три способа установить цвета частиц. Вы можете установить цвета в формате HEX, RGB или HSL. Из-за ошибки в библиотеке формат RGB и HSL работает только при удалении значения цвета по умолчанию из библиотеки.
Если вы хотите установить цвет частиц случайным образом, вы можете сделать это со значением «random». Наконец, чтобы установить цвет случайным образом из списка цветов, вам нужно будет предоставить цвета в формате HEX в виде массива. Вот JSON, чтобы установить цвета для частиц:
|
1
2
3
4
5
6
7
|
«color»: {
«value»: «#fff» //set white in HEX (We are using this version)
«value»: {r:255, g:255, b:255} //set white in RGB
«value»: {h:0, s:100%, l:100%} //set white in HSL
«value»: [«#f00», «#0f0», «#00f»] //set red, green and blue randomly
«value»: «random» //set colors randomly
}
|
Свойство opacity дает вам большой контроль. Вы можете установить его на точное значение или использовать случайные значения, установив "random" в true . Не только это, но вы также можете оживить непрозрачность частиц. Вот код JSON для свойства opacity:
|
01
02
03
04
05
06
07
08
09
10
|
«opacity»: {
«value»: 1,
«random»: true, // Set to false in our case
«anim»: {
«enable»: true,
«speed»: 8,
«opacity_min»: 0.4,
«sync»: false
}
}
|
Установка "sync" в true будет анимировать непрозрачность всех частиц одновременно. Использование значения 0,4 для "opacity_min" гарантирует, что непрозрачность никогда не опускается ниже 0,4 для любой частицы во время анимации. Вот демо со звездами, движущимися через пространство Попробуйте изменить количество, цвет или непрозрачность частиц, чтобы увидеть их эффект.
Форма и Размер
Particles.js имеет пять различных значений для создания основных фигур. Простая форма, такая как circle создает круговую частицу, triangle треугольные частицы, а edge квадраты. Вы можете использовать значение polygon для создания многогранного nb_sides , где вы предоставляете значение nb_sides . Чтобы создать настоящие фигуры звезд, вы можете установить тип фигуры star . Параметр stroke добавляет контур заданного цвета и ширины вокруг всех частиц. Код JSON ниже создаст шестиугольники.
|
01
02
03
04
05
06
07
08
09
10
|
«shape»: {
«type»: «polygon»,
«stroke»: {
«width»: 4,
«color»: «#fff»
},
«polygon»: {
«nb_sides»: 6
}
}
|
Также возможно отображать изображения вместо основных форм. Сначала вам нужно будет указать тип фигуры как image . После этого вы можете установить источник изображения и его желаемую высоту и ширину. Следует иметь в виду, что ширина и высота будут определять не размер частиц изображения, а их соотношение сторон. Вот некоторые JSON для создания частиц с изображениями астероидов:
|
1
2
3
4
5
6
7
8
|
«shape»: {
«type»: «image»,
«image»: {
«src»: «img/football.png», // Set image path.
«width»: 1, // Width and height don’t decide size.
«height»: 1 // They just decide aspect ratio.
}
}
|
Библиотека также позволяет смешивать несколько фигур вместе. Например, вы можете решить создавать круги, квадраты и шестиугольники одновременно. В этом случае все, что вам нужно сделать, это передать массив со всеми этими фигурами.
|
1
|
«type»: [«circle»,»edge»,»polygon»]
|
Свойство size имеет все параметры свойства opacity. Вы можете установить размер случайным образом, а также анимировать размер отдельных частиц. Внимательно посмотрите на следующий код JSON.
|
01
02
03
04
05
06
07
08
09
10
|
«size»: {
«value»: 25,
«random»: true,
«anim»: {
«enable»: true,
«speed»: 20,
«size_min»: 10,
«sync»: false
}
}
|
Если для параметра random задано значение false , все частицы будут иметь размер 25. Если для параметра random задано значение true , размер служит максимальным пределом размера частиц. Установка sync в true внутри анимации изменит размер всех элементов одновременно. Вы должны открыть демо-версию и попробовать разные значения количества сторон многоугольника, анимации и других свойств, чтобы увидеть, как они влияют на конечный результат.
Связывание частиц вместе
Когда частицы достаточно близки, вы можете нарисовать соединительные линии между ними, включив свойство line_linked .
Это свойство имеет четыре дополнительных значения. Свойство distance указывает максимальное расстояние, до которого будут нарисованы линии. Вы также можете установить color в виде строки HEX. Непрозрачность линий изменяется в зависимости от расстояния между частицами. Значение, которое вы указываете как opacity является непрозрачностью линий, когда частицы действительно близко друг к другу. Наконец, width определяет, насколько широкими будут ваши линии. Вот фрагмент JSON для сопровождающей демонстрации.
|
1
2
3
4
5
6
7
|
«line_linked»: {
«enable»: true,
«distance»: 200,
«color»: «#fff»,
«opacity»: 1,
«width»: 4
}
|
Вы можете видеть, что линии исчезают, как только расстояние между частицами становится больше 200 пикселей.
Последние мысли
Я попытался охватить все, что вам нужно знать, чтобы изменить форму, размер, цвет и почти все другие физические свойства частиц. Примеры в этом уроке наглядно демонстрируют, насколько просто использовать эту библиотеку. Если вам когда-нибудь понадобится базовая библиотека частиц, обязательно попробуйте Particles.js.
Следующий урок научит вас, как контролировать движение частиц и их взаимодействие между собой, а также с вами. Если у вас есть какие-либо вопросы, связанные с этим учебником, пожалуйста, оставьте комментарий.