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)想過(guò)如何使用JavaScript創(chuàng)建逼真的吹氣效果？ 就像晚上電視節(jié)目中顯示的那樣，利用氣壓將多個(gè)球混合在一個(gè)球形物體中？ 如果您想了解它是如何完成的，請(qǐng)繼續(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.?

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

研究 (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年前為我的一個(gè)工程做的舊東西。 這是它的外觀：

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)時(shí)我選擇使用一個(gè)名為Paperjs的庫(kù)。 那時(shí)，該庫(kù)使我可以構(gòu)建最接近我想要實(shí)現(xiàn)的東西。

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

事實(shí)證明，今天有更多JavaScript庫(kù)可以讓您在有或沒(méi)有物理的情況下制作動(dòng)畫(huà)。

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

認(rèn)識(shí)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物理引擎。 聽(tīng)起來(lái)很復(fù)雜，但事實(shí)并非如此。 這實(shí)際上意味著該庫(kù)包含用JavaScript創(chuàng)建逼真的2D物理動(dòng)畫(huà)所需的所有內(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模塊及其具有的功能。 讓我們?cè)谙乱还?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.

“管”組件很容易。 這只是我用來(lái)產(chǎn)生一種幻覺(jué)的背景圖像 ，這些幻覺(jué)是球在球形玻璃物體內(nèi)部飛來(lá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)建動(dòng)畫(huà)并檢測(cè)球與墻之間的碰撞的代碼。 但是，讓我們一步一步走。

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.

正如我所說(shuō)的，“ tube”是我通過(guò)簡(jiǎn)單CSS background屬性添加的背景圖片。 讓我們看看球本身。 對(duì)于他們來(lái)說(shuō)，我有兩種選擇-嘗試在畫(huà)布上繪制圓并使它們看起來(lái)像球形或使用簡(jiǎn)單的圖像。 我選擇了后者，因?yàn)槲蚁敫鎸?shí)地觀察球。

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

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

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實(shí)施一些物理了。

實(shí)施，測(cè)試，實(shí)施，測(cè)試 (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)入動(dòng)畫(huà)本身之前，我們需要提及一些Matter.js特定的東西。 使用此庫(kù)創(chuàng)建動(dòng)畫(huà)時(shí)，我們至少需要定義：

• 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-此模塊是一個(gè)簡(jiǎn)單的基于HTML5畫(huà)布的渲染器，用于可視化Matter.Engine實(shí)例。

  Matter.Render - this module is a simple HTML5 canvas-based renderer for visualizing instances of Matter.Engine.

  Matter.Render-此模塊是一個(gè)簡(jiǎn)單的基于HTML5畫(huà)布的渲染器，用于可視化Matter.Engine實(shí)例。

  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)建場(chǎng)景的不同部分(球，不可見(jiàn)的邊界圓)的實(shí)體 。

• 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)機(jī)模擬。

• Matter.Runner to run the whole thing.

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

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

  在事件處理程序功能中，我們檢查球何時(shí)與壁碰撞，并施加相關(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)聽(tīng)時(shí)間延遲了3秒鐘，因此我們可以獲得更像樂(lè)透的效果。 假設(shè)有一個(gè)球體，當(dāng)按下按鈕時(shí)，球開(kāi)始移動(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.

在本文的開(kāi)頭，我發(fā)布了到GitHub存儲(chǔ)庫(kù)的鏈接，其中包含代碼和資產(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(shí)，有足夠的實(shí)驗(yàn)空間。 它總是很有趣，尤其是當(dāng)我們?cè)趫D片中添加動(dòng)畫(huà)時(shí)。

結(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.

事實(shí)證明， Matter.js是一個(gè)出色的庫(kù)，用于制作由物理定律支持的2D逼真的動(dòng)畫(huà)。 當(dāng)然，您可以選擇其他選項(xiàng)，但是正如我所說(shuō)，這是選擇和項(xiàng)目需求的問(wèn)題。

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.

我個(gè)人建議至少嘗試一下，自己看看。 對(duì)于具有Flash經(jīng)驗(yàn)或類似經(jīng)驗(yàn)的人來(lái)說(shuō)，Matter.js絕對(duì)很容易上手。 而且，如果您足夠頑固地繼續(xù)嘗試其他設(shè)置，則可能會(huì)獲得令人難以置信的結(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/-圖書(shū)館的網(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/-碰撞檢測(cè)教程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開(kāi)始https://codepen.io/jh3y/pen/gOPmMyO?editors=0110-另一個(gè)酷跌熊的例子https://codepen.io/danielgivens/pen/geKrRx-甚至帶圓圈的更酷的例子https://codepen.io/dotcli/pen/NEXrQe內(nèi)的時(shí)鐘和粒子-里面的圓邊界和粒子(襪子！)的另一個(gè)示例

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

javascript創(chuàng)建類

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

總結(jié)

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

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