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内的时钟和粒子-里面的圆边界和粒子(袜子！)的另一个示例