Автор оригинала: FreeCodeCamp Community Member.
Вы когда-нибудь задавались вопросом, как вы можете создать реалистичный эффект воздуха с JavaScript? Как и тот, который показан на вечером телешоу, где несколько шаров перемешаются в подобном сфере, используя давление воздуха? Если вы хотите узнать, как это сделано, читать дальше.
✨ Если вы хотите пропустить чтение и прыгать прямо к коду, вы найдете его здесь Отказ Кроме того, я развернул Живая демонстрация здесь .✨.
Исследовать
Недавно я решил отремонтировать что-то старое, что я сделал 4 года назад за Проект моего Отказ Вот как это выглядело:
В то время я решил использовать библиотеку под названием Paperjs Отказ Тогда эта библиотека позвольте мне построить ближайшую вещь к тому, что я хотел достичь.
Как получается, сегодня много библиотек JavaScript сегодня, которые позволяют вам делать анимацию с физикой или без них.
Прежде чем сделать мой окончательный выбор, который вы увидите ниже, я играл с Anime.js , Velocity.js , Popmotion , Three.js , Greensock JS , Mo.js и Matter.js Отказ Все они имеют плюсы и минусы, и, как и во всем остальном, ваш выбор между ними зависит от конкретных потребностей, которые вы могли бы иметь. Я выбрал Matter.js.
Встретить matter.js.
Matter.js – это 2D жесткий корпус JavaScript физический двигатель. Звучит сложный, но это не так. Что это на самом деле означает, что эта библиотека содержит все вещи, которые нам нужно для создания реалистичной 2D-физической анимации с JavaScript.
Для получения подробной информации о том, что может предложить motor.js, вы можете проверить их Документация Отказ В нашем случае мы воспользуемся преимуществом в основном из Модуль тела И особенности у него есть. Давайте посмотрим, как в следующем разделе.
Шарики и трубка
Компонент «TUBE» прост. Это просто фон изображение Я использую, чтобы создать иллюзию, что шары летают внутри, подобно сферу стеклянного объекта.
Интересная часть – код для создания анимации и обнаруживать столкновения между шарами и стенами. Но пойдем шаг за шагом.
Как я уже сказал, «трубка» – это фоновое изображение, которое я добавил через простые CSS Фон недвижимость Отказ Давайте посмотрим сами шары. Для них у меня были два варианта – попробуйте рисовать круги в холсте и заставить их выглядеть как шарики или использовать простые изображения. Я выбрал последний вариант, так как я хотел иметь более реалистичный вид на шары.
Итак, с помощью программы графической обработки, другу моего созданного 75 изображений Для меня один для каждого мяча.
Наличие всех необходимых нам активов, мы теперь готовы добиться глубже и реализовать какую-то физику с Matter .js.
Реализация, тестирование, внедрение, тест
Прежде чем идти в саму анимацию, нам нужно упомянуть несколько важных вещей. При создании анимации с этой библиотекой нам нужно определить, как минимум:
- Дело. Действительность – Это контроллер, который управляет обновлениями имитации мира.
- Материи. Вольт – Содержит методы создания и манипулирования мировым композитом.
- Motal.render – Этот модуль представляет собой простой HTML5 на основе холстеровщика для визуализации экземпляров
Дело. ДействительностьОтказ В нашем примере мы также собираемся использовать: - Дело .боды Для создания различных частей сцены (шарики, невидимый пограничный круг).
- Дело. Тебе Для применения сил к органам и тем самым создавая приятную физику моделирования воздуходувки.
- Motor.runner запускать все это.
- Дело. Детали Дает нам возможность иметь слушателей для разных событий, которые могут произойти во время анимации. В этом конкретном случае мы используем его для прослушивания события «Tick», которое происходит на каждой рендеризме. В функции обработчика событий мы выполняем нашу проверку, когда шары сталкиваются со стенами, и мы применяем соответствующие силы для создания эффекта отказов. Мы откладываем прослушивание для этого события с 3-секундной тайм-аутами, поэтому мы можем иметь более лотно-подобный эффект. Представьте себе сферу, где шары начинают двигаться, когда скажем, кнопка нажата.
Попробуй и играть
В начале этой статьи я опубликовал ссылку на Github Repository с кодом и активами в нем. Если вы хотите поиграть больше, вы можете легко проверить его и попробовать различные модификации. Возможно, вы захотите сыграть с применением сил или размером шариков и так далее.
Есть много места для экспериментов, когда мы говорим о физике. И это всегда весело, особенно когда мы добавляем анимацию на картинку.
Заключение
Как оказывается, Matter.js Это отличная библиотека для выполнения 2D реалистичных анимаций, подкрепленных законами физики. Конечно, есть другие варианты, из которых вы можете выбрать, но, как я уже сказал, это вопрос выбора и потребностей проекта.
Я лично рекомендую хотя бы дать ему попытаться увидеть сами. Для кого-то с опытом Flash или похожим, Matce.js определенно легко начать. И если вы достаточно упрямые, чтобы продолжать пробовать разные настройки, вы можете достичь невероятных результатов.
Ресурсы
https://brm.io/matter-js/- Сайт библиотеки https://burakkanber.com/blog/modeling-physics-in-javascript-introduction/ – Интересные и хорошо объясненные статьи, связанные с физикой в JavaScript https://spicyyyoghurt.com/tutorials/html5-javascript-game-development/collision-detection-physics/ – Учебное пособие на выявление столкновений https://codepen.io/alexra96/full/egaxvv – Пример прыгающего мяча https://codepen.io/shokeen/pen/wjkmmg?editors=1010 – Пример кодепена с применением сил https://code.tutsplus.com/tutorials/getting-started-with-matterjs-body-module-mats—8835 – Учебник для начинающих, чтобы вы начали с Matter.js https://codepen.io/jh3y/pen/gopmmyojeditors=0110 – еще один крутой пример с падающими медведями https://codepen.io/danielgivens/pen/gekrrx – Даже пример кулера с круглыми часами и частицами внутри https://codepen.io/dotcli/pen/nexrqe – еще один пример границ круг и частиц (носки!) внутри