Основы анимации: понятие частиц

Основы анимации: понятие частиц

От автора: частицы очень часто используются в анимации для воссоздания природных явлений наподобие огня, дыма, облаков, тумана и стай птиц. Однако анимация частиц немного отличается от обычной дискретной анимации отдельных элементов, которая обычно ассоциируется с CSS и SVG, что может смутить разработчиков, работающих с анимацией частиц в первый раз. Хорошая вводная статья по основам анимации должна помочь.

Правила частиц

Анимацию частиц можно определить по:

Частицы создаются, живут и умирают в системе.

В отличие от дискретной анимации, количество частиц может достигать сотен или тысяч.

Отдельные частицы – динамические точки в пространстве.

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

Большие и нечеткие частицы, которые возникают из других частиц, как правило, сливаются, что является ключевым моментом для создания эффекта огня или тумана.

У коллекции частиц может быть источник или происхождение (представьте поток воздуха из реактивного двигателя). Такой источник часто называют эмиттером.

У частиц также может быть аттрактор или конечная точка, куда они должны прийти. Как звезды, кружащиеся вокруг черной дыры.

Частицы могут подчиняться законам физики, воссозданным в коде, таким как гравитация, ветер или ток.

В некоторых случаях частицы могут знать о частицах вокруг себя, чтобы держаться друг от друга на определенном расстоянии (как косяк рыб).

Частицы могут быть свободными, т.е. они могут двигаться по случайной траектории внутри заданной области.

В отдельных случаях к частицам применяется траектория или путь. Обычно используется для создания эффекта волос или травы.

Самое главное – вы не можете управлять каждой частицей отдельно: частицы существуют и подчиняются ряду общих правил, а их поведение определяется случайными переменными в заданных границах.

Частицы можно представить в виде популяции бактерий в чашке Петри: вы можете определить, откуда появилась бактерия (еда, например), но не можете контролировать отдельные клетки.

Существует много способов создать частицы, но самый распространенный метод в JavaScript использует для этого Canvas API… который мы рассмотрим в следующей статье.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree