javascript創(chuàng)建類

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.

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

? 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.?

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

研究 (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.

當(dāng)時我選擇使用一個名為Paperjs的庫。 那時，該庫使我可以構(gòu)建最接近我想要實現(xiàn)的東西。

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 。 它們都有優(yōu)點和缺點，與其他所有優(yōu)點一樣，您在它們之間的選擇取決于您可能有的特定需求。 我選擇了Matter.js。

認(rèn)識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物理引擎。 聽起來很復(fù)雜，但事實并非如此。 這實際上意味著該庫包含用JavaScript創(chuàng)建逼真的2D物理動畫所需的所有內(nèi)容。

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.

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

球管 (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.

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

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.

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

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.

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

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

擁有了我們需要的所有資產(chǎn)之后，我們現(xiàn)在就可以更深入地利用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:

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

• 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-包含用于創(chuàng)建和操縱世界復(fù)合材料的方法。

• 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用于創(chuàng)建場景的不同部分(球，不可見的邊界圓)的實體 。

• Matter.Body for applying forces to the bodies and thus creating a nice physics-based simulation of a blower.

  Matter.Body，用于將力施加到主體上，從而創(chuàng)建基于物理的鼓風(fēng)機模擬。

• Matter.Runner to run the whole thing.

  Matter.Runner負(fù)責(zé)整個過程。

• 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使我們能夠讓偵聽器了解動畫過程中可能發(fā)生的不同事件。 在此特定情況下，我們使用它來監(jiān)聽“ tick”事件，該事件在每個渲染滴答中發(fā)生。

  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.

  在事件處理程序功能中，我們檢查球何時與壁碰撞，并施加相關(guān)力以產(chǎn)生反彈效果。

  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.

  我們將此事件的監(jiān)聽時間延遲了3秒鐘，因此我們可以獲得更像樂透的效果。 假設(shè)有一個球體，當(dāng)按下按鈕時，球開始移動。

試玩 (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.

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

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.

當(dāng)我們談?wù)撐锢頃r，有足夠的實驗空間。 它總是很有趣，尤其是當(dāng)我們在圖片中添加動畫時。

結(jié)論 (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逼真的動畫。 當(dāng)然，您可以選擇其他選項，但是正如我所說，這是選擇和項目需求的問題。

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經(jīng)驗或類似經(jīng)驗的人來說，Matter.js絕對很容易上手。 而且，如果您足夠頑固地繼續(xù)嘗試其他設(shè)置，則可能會獲得令人難以置信的結(jié)果。

資源資源 (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/-圖書館的網(wǎng)站https://burakkanber.com/blog/modeling-physics-in-javascript-introduction/-與JavaScript相關(guān)的有趣有趣的文章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內(nèi)的時鐘和粒子-里面的圓邊界和粒子(襪子！)的另一個示例

翻譯自: https://www.freecodecamp.org/news/how-to-create-a-lotto-balls-blowing-effect/

javascript創(chuàng)建類

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的javascript创建类_如何使用JavaScript创建吹气效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。