От автора: частицы очень часто используются в анимации для воссоздания природных явлений наподобие огня, дыма, облаков, тумана и стай птиц. Однако анимация частиц немного отличается от обычной дискретной анимации отдельных элементов, которая обычно ассоциируется с CSS и SVG, что может смутить разработчиков, работающих с анимацией частиц в первый раз. Хорошая вводная статья по основам анимации должна помочь.
Правила частиц
Анимацию частиц можно определить по:
Частицы создаются, живут и умирают в системе.
В отличие от дискретной анимации, количество частиц может достигать сотен или тысяч.
Отдельные частицы – динамические точки в пространстве.
Точку частицы можно представить в любой форме: круг, бесформенная сфера, что угодно. В конечной анимации положение и движение частицы в пространстве в виде крошечной точки заменяется на новую частицу.
Большие и нечеткие частицы, которые возникают из других частиц, как правило, сливаются, что является ключевым моментом для создания эффекта огня или тумана.
У коллекции частиц может быть источник или происхождение (представьте поток воздуха из реактивного двигателя). Такой источник часто называют эмиттером.
У частиц также может быть аттрактор или конечная точка, куда они должны прийти. Как звезды, кружащиеся вокруг черной дыры.
Частицы могут подчиняться законам физики, воссозданным в коде, таким как гравитация, ветер или ток.
В некоторых случаях частицы могут знать о частицах вокруг себя, чтобы держаться друг от друга на определенном расстоянии (как косяк рыб).
Частицы могут быть свободными, т.е. они могут двигаться по случайной траектории внутри заданной области.
В отдельных случаях к частицам применяется траектория или путь. Обычно используется для создания эффекта волос или травы.
Самое главное – вы не можете управлять каждой частицей отдельно: частицы существуют и подчиняются ряду общих правил, а их поведение определяется случайными переменными в заданных границах.
Частицы можно представить в виде популяции бактерий в чашке Петри: вы можете определить, откуда появилась бактерия (еда, например), но не можете контролировать отдельные клетки.
Существует много способов создать частицы, но самый распространенный метод в JavaScript использует для этого Canvas API… который мы рассмотрим в следующей статье.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
