javascript創建類_如何使用JavaScript創建吹氣效果

javascript創建類

Have you ever wondered how you can create a realistic air blowing effect with JavaScript? Like the one shown on the evening TV shows, where multiple balls are being mixed up in a sphere-like object by leveraging air pressure? If you want to find out how it's done, read on.

您是否曾經想過如何使用JavaScript創建逼真的吹氣效果？就像晚上電視節目中顯示的那樣，利用氣壓將多個球混合在一個球形物體中？如果您想了解它是如何完成的，請繼續閱讀。

? If you want to skip the reading and jump straight to the code, you will find it here. Also, I have deployed a live demo here.?

?如果您想跳過閱讀并直接跳轉到代碼，您將在這里找到它。另外，我在這里部署了一個現場演示。

研究 (Research)

Recently I have decided to refurbish something old that I did 4 years ago for a project of mine. Here is how it looked:

最近我決定翻新我4年前為我的一個工程做的舊東西。這是它的外觀：

At that time I chose to use a library called Paperjs. Back then this library let me build the closest thing to what I wanted to achieve.

當時我選擇使用一個名為Paperjs的庫。那時，該庫使我可以構建最接近我想要實現的東西。

As it turns out, there are many more JavaScript libraries today that let you do animations with or without physics.

事實證明，今天有更多JavaScript庫可以讓您在有或沒有物理的情況下制作動畫。

Before making my final choice, which you will see below, I played around with Anime.js, Velocity.js, Popmotion, Three.js, GreenSock JS, Mo.js and Matter.js. All of them have pluses and minuses, and as with everything else, your choice between them depends on the specific needs you might have. I chose Matter.js.

在做出最終選擇(您將在下面看到)之前，我使用了Anime.js ， Velocity.js ， Popmotion ， Three.js ， GreenSock JS ， Mo.js和Matter.js 。它們都有優點和缺點，與其他所有優點一樣，您在它們之間的選擇取決于您可能有的特定需求。我選擇了Matter.js。

認識Matter.js (Meet Matter.js)

Matter.js is a 2d rigid body JavaScript physics engine. Sounds complex, but it's not. What this actually means is that this library contains all the stuff we need to create realistic 2d physics animations with JavaScript.

Matter.js是2D剛體JavaScript物理引擎。聽起來很復雜，但事實并非如此。這實際上意味著該庫包含用JavaScript創建逼真的2D物理動畫所需的所有內容。

For detailed information on what Matter.js has to offer, you might check their documentation. In our case, we will take advantage mainly of the Body module and the features it has. Let's see how in the next section.

有關Matter.js提供的內容的詳細信息，您可以查看其文檔。在我們的案例中，我們將主要利用Body模塊及其具有的功能。讓我們在下一節中了解如何。

球管 (Balls and Tube)

The "tube" component is easy. It's just a background image I am using to create an illusion that the balls are flying around inside a sphere-like glass object.

“管”組件很容易。這只是我用來產生一種幻覺的背景圖像，這些幻覺是球在球形玻璃物體內部飛來飛去。

The interesting part is the code to create the animations and detect the collisions between the balls and the walls. But let's go step by step.

有趣的部分是用于創建動畫并檢測球與墻之間的碰撞的代碼。但是，讓我們一步一步走。

As I said, the "tube" is a background image I've added via the simple CSS background property. Let's see the balls themselves. For them I had two choices - try to draw circles in canvas and make them look like balls or use simple images. I chose the latter option, as I wanted to have a more realistic view of the balls.

正如我所說的，“ tube”是我通過簡單CSS background屬性添加的背景圖片。讓我們看看球本身。對于他們來說，我有兩種選擇-嘗試在畫布上繪制圓并使它們看起來像球形或使用簡單的圖像。我選擇了后者，因為我想更真實地觀察球。

So, with the help of a graphic processing program, a friend of mine created 75 images for me, one for each ball.

因此，在一個圖形處理程序的幫助下，我的一個朋友為我創建了75張圖像，每個球一個。

Having all the assets we need, we are now ready to go deeper and implement some physics with Matter.js.

擁有了我們需要的所有資產之后，我們現在就可以更深入地利用Matter.js實施一些物理了。

實施，測試，實施，測試 (Implement, test, implement, test)

Before going into the animation itself, we need to mention few Matter.js specific things. When creating animations with this library, we need to define, at a minimum:

在進入動畫本身之前，我們需要提及一些Matter.js特定的東西。使用此庫創建動畫時，我們至少需要定義：

Matter.Engine - this is the controller that manages updates to the simulation of the world.
Matter.Engine-這是管理世界模擬更新的控制器。
Matter.World - contains methods for creating and manipulating the world composite.
Matter.World-包含用于創建和操縱世界復合材料的方法。
Matter.Render - this module is a simple HTML5 canvas-based renderer for visualizing instances of Matter.Engine.
Matter.Render-此模塊是一個簡單的基于HTML5畫布的渲染器，用于可視化Matter.Engine實例。

Matter.Render - this module is a simple HTML5 canvas-based renderer for visualizing instances of Matter.Engine.
Matter.Render-此模塊是一個簡單的基于HTML5畫布的渲染器，用于可視化Matter.Engine實例。

In our example we are also going to use:
在我們的示例中，我們還將使用：
Matter.Bodies for creating the different parts of the scene (the balls, the invisible boundary circle).
Matter.Body用于創建場景的不同部分(球，不可見的邊界圓)的實體。
Matter.Body for applying forces to the bodies and thus creating a nice physics-based simulation of a blower.
Matter.Body，用于將力施加到主體上，從而創建基于物理的鼓風機模擬。
Matter.Runner to run the whole thing.
Matter.Runner負責整個過程。
Matter.Events gives us ability to have listeners for different events that could happen during the animation. In this specific case we use it for listening for the 'tick' event, which occurs on every render tick.
Matter.Events使我們能夠讓偵聽器了解動畫過程中可能發生的不同事件。在此特定情況下，我們使用它來監聽“ tick”事件，該事件在每個渲染滴答中發生。

In the event handler function we do our checking for when the balls collide with the walls and we apply the relevant forces to create a bounce effect.
在事件處理程序功能中，我們檢查球何時與壁碰撞，并施加相關力以產生反彈效果。

We postpone the listening for this event with a 3 second timeout, so we can have a more lotto-like effect. Imagine a sphere where the balls are starting to move when, let's say, a button is pressed.
我們將此事件的監聽時間延遲了3秒鐘，因此我們可以獲得更像樂透的效果。假設有一個球體，當按下按鈕時，球開始移動。

試玩 (Try and Play)

In the beginning of this article I posted the link to the GitHub repository with the code and the assets in it. If you want to play more, you can easily check it out and try different modifications. You might want to play with the forces being applied, or the size of the balls, and so on.

在本文的開頭，我發布了到GitHub存儲庫的鏈接，其中包含代碼和資產。如果您想玩更多游戲，可以輕松查看并嘗試其他修改。您可能想玩一下所施加的力或球的大小等等。

There is plenty of room for experimenting when we talk about Physics. And it's always fun, especially when we add animations to the picture.

當我們談論物理時，有足夠的實驗空間。它總是很有趣，尤其是當我們在圖片中添加動畫時。

結論 (Conclusion)

As it turns out, Matter.js is a great library for doing 2d realistic animations backed up by the laws of Physics. Of course, there are other options you might choose from, but as I said, this is a matter of choice and project needs.

事實證明， Matter.js是一個出色的庫，用于制作由物理定律支持的2D逼真的動畫。當然，您可以選擇其他選項，但是正如我所說，這是選擇和項目需求的問題。

I personally would recommend at least giving it a try and see for yourself. For someone with Flash experience or similar, Matter.js is definitely easy to start with. And if you are stubborn enough to keep trying different settings, you might achieve incredible results.

我個人建議至少嘗試一下，自己看看。對于具有Flash經驗或類似經驗的人來說，Matter.js絕對很容易上手。而且，如果您足夠頑固地繼續嘗試其他設置，則可能會獲得令人難以置信的結果。

資源資源 (Resources)

https://brm.io/matter-js/ - The website of the libraryhttps://burakkanber.com/blog/modeling-physics-in-javascript-introduction/ - interesting and well explained articles related to physics in JavaScripthttps://spicyyoghurt.com/tutorials/html5-javascript-game-development/collision-detection-physics/ - collisions detection tutorialhttps://codepen.io/AlexRA96/full/egaxVV - bouncing ball examplehttps://codepen.io/Shokeen/pen/WjKmMG?editors=1010 - codepen example with applying forceshttps://code.tutsplus.com/tutorials/getting-started-with-matterjs-body-module--cms-28835 - beginner tutorial to get you started with Matter.jshttps://codepen.io/jh3y/pen/gOPmMyO?editors=0110 - another cool example with falling bearshttps://codepen.io/danielgivens/pen/geKrRx - even cooler example with a circle clock and particles insidehttps://codepen.io/dotcli/pen/NEXrQe - another example of circle bounds and particles (socks!) inside

https://brm.io/matter-js/-圖書館的網站https://burakkanber.com/blog/modeling-physics-in-javascript-introduction/-與JavaScript相關的有趣有趣的文章https ：//spicyyoghurt.com/tutorials/html5-javascript-game-development/collision-detection-physics/-碰撞檢測教程https://codepen.io/AlexRA96/full/egaxVV-彈跳球示例https：// codepen。 io / Shokeen / pen / WjKmMG？editors = 1010-施加力的Codepen示例https://code.tutsplus.com/tutorials/getting-started-with-matterjs-body-module--cms-28835-入門教程您從Matter.js開始https://codepen.io/jh3y/pen/gOPmMyO?editors=0110-另一個酷跌熊的例子https://codepen.io/danielgivens/pen/geKrRx-甚至帶圓圈的更酷的例子https://codepen.io/dotcli/pen/NEXrQe內的時鐘和粒子-里面的圓邊界和粒子(襪子！)的另一個示例