egret帧动画与粒子动画

Particles are very frequently used in visual effects animation to recreate natural events like fire, smoke, cloud, fog and flocks of birds. But particle animation is quite different from the standard “discrete” animation of individual elements traditionally associated with CSS and SVG. This can lead to confusion for developers approaching particle animation for the first time, so a broad introduction can be helpful:

粒子经常在视觉效果动画中使用，以重现自然事件，例如火，烟，云，雾和鸟群。 但是，粒子动画与传统上与CSS和SVG相关联的单个元素的标准“离散”动画完全不同。 这可能会使开发人员第一次接近粒子动画时感到困惑，因此广泛的介绍可能会有所帮助：

粒子规则 (Particle Rules)

Particle animation can be defined by a few things:

粒子动画可以由以下几项定义：

• Particles are spawned, live and die in a system.

  粒子在系统中生成，存活并死亡 。

• Unlike traditional discrete animation, there may be hundreds or thousands of particles in an animation.

  与传统的离散动画不同，动画中可能有数百或数千个粒子 。

• An individual particle is a dynamic point in space.

  单个粒子是空间中的动态点 。

• This particle point could be associated with any representation you wish: a circle, a blobby sphere, a fish, anything. In the final animation, the particle’s position and motion in space as a tiny point is replaced by the new entity.

  该粒子点可以与您希望的任何表示形式相关联：一个圆，一个球形球，一条鱼，任何东西。 在最终动画中，粒子在空间中作为微小点的位置和运动被新实体替代。

• Particles that are replaced with entities that are sufficiently large and blurry will tend to blend together, which is the key to creating effects like fire and fog. 被足够大且模糊的实体替换的粒子将趋于融合在一起，这是创建诸如火和雾之类的效果的关键。

• a collection of particles may have a source or origin (think of the exhaust streaming from a jet engine). This source is frequently referred to as an emitter.

  颗粒的集合可能具有来源或起源 (想想喷气发动机排放的废气)。 此源通常称为发射器 。

• Particles may also have an attractor or destination that they are drawn to, like stars circling a black hole.

  粒子也可能具有吸引子或吸引它们的目标 ，例如绕黑洞的恒星。

• Particles may respond to physical laws, recreated in code, such as gravity, or the effects of wind or current. 粒子可能会对物理定律做出响应，并以代码形式重新创建，例如重力或风或电流的影响。
• In some cases, particles might have a limited “awareness” of each other, acting to maintain a certain distance (like a school of fish). 在某些情况下，粒子之间可能彼此之间只有有限的“意识”，起到保持一定距离的作用(例如鱼群)。
• Particles may also be “unbound”, exhibiting random motion inside a region. 粒子也可能是“未结合的”，在区域内表现出随机运动。

• In some cases, the trajectory or path of the particle is used; this is commonly used to create effects like hair or grass.

  在某些情况下，使用粒子的轨迹或路径 。 通常用于创建头发或草等效果。

• Most importantly, you do not have individual control over a particle: rather, particles exist under a set of broad rules, with their behaviour controlled by random variables within defined ranges.

  最重要的是， 您没有对粒子的单独控制 ：相反，粒子存在于一组广泛的规则下 ，其行为由定义范围内的随机变量控制。

One way of thinking about particles is looking at a population of bacteria in a petri dish: you can determine where the bacteria might spawn from (a source of food, for example), but you can’t control the induvidual fates of cells in the bacterial culture.

考虑微粒的一种方法是查看培养皿中的细菌种群：您可以确定细菌可能从何处产生(例如，食物来源)，但您无法控制细菌在细胞中的个体命运细菌培养。

There are many ways of creating particles, but the most common method in JavaScript uses the Canvas API… which I will be looking at next.

创建粒子的方法有很多，但是JavaScript中最常用的方法是使用Canvas API …接下来我将介绍。

翻译自: https://thenewcode.com/1133/Animation-Fundamentals-Understanding-Particles

egret帧动画与粒子动画