Від автора: частинки дуже часто використовуються в анімації для відтворення природних явищ зразок вогню, диму, хмар, туману і зграй птахів. Однак анімація частинок трохи відрізняється від звичайної дискретної анімації окремих елементів, яка зазвичай асоціюється з CSS і SVG, що може збентежити розробників, що працюють з анімацією частинок в перший раз. Хороша вступна стаття з основ анімації повинна допомогти.
Правила частинок
Анімацію частинок можна визначити з:
Частинки створюються, живуть і вмирають в системі.
На відміну від дискретної анімації, кількість частинок може досягати сотень або тисяч.
Окремі частинки – динамічні точки в просторі.
Точку частинки можна уявити в будь-якій формі: коло, безформна сфера, що завгодно. В кінцевій анімації положення і рух частинки в просторі у вигляді крихітної точки замінюється на нову частинку.
Великі і нечіткі частинки, які виникають з інших частинок, як правило, зливаються, що є ключовим моментом для створення ефекту вогню або туману.
У колекції частинок може бути джерело або походження (уявіть потік повітря з реактивного двигуна). Такий джерело часто називають емітером.
У частинок також може бути аттрактор або кінцева точка, куди вони повинні прийти. Як зірки, що кружляють навколо чорної діри.
Частинки можуть підкорятися законам фізики, відтвореним в коді, таким як гравітація, вітер або струм.
У деяких випадках частинки можуть знати про частинках навколо себе, щоб триматися один від одного на певній відстані (як косяк риб).
Частки можуть бути вільними, тобто вони можуть рухатися по випадкової траєкторії в межах заданої області.
В окремих випадках до частинок застосовується траєкторія або шлях. Зазвичай використовується для створення ефекту волосся або трави.
Найголовніше – ви не можете управляти кожною частинкою окремо: частинки існують і підкоряються ряду загальних правил, а їх поведінка визначається випадковими змінними в заданих межах.
Частинки можна представити у вигляді популяції бактерій в чашці Петрі: ви можете визначити, звідки з’явилася бактерія (їжа, наприклад), але не можете контролювати окремі клітини.
Існує багато способів створити частинки, але найпоширеніший метод використовує JavaScript для цього Canvas API… який ми розглянемо в наступній статті.
